YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Specify image dimensions

前端性能优化:Specify image dimensions

今天介绍 PageSpeed 的前端性能优化规则是:Specify image dimensions(指定图片大小)。

Specify image dimensions 规则简介

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

译文:为所有图像指定宽度和高度能够实现更快的渲染并可以省去不必要的重排列和重绘。

其实在前面介绍《Do not scale images in HTML》规则的是有就提到过,给图片设置大小的问题,而且也说明了,设置的图片高度和宽度应该跟实际的图片尺寸一致。今天这个规则则更加详细的介绍了为什么要给图片指定大小。

When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don’t match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS.

当浏览器布局页面的时候,浏览器需要排列替换元素(例如图片元素)。浏览器在图片还没有完全加载到客户端前,就可以开始渲染这个页面了。只要浏览器知道其他非替代元素的尺寸就可以了。如果没有给包含图片的容器设置尺寸,或者设置的尺寸跟图片实际的大小不一致,浏览器会在图片完全下载后重排列和重绘页面。这个将是比较大的性能损耗,为了避免浏览器重排重绘,我们必须在HTML的IMG标签中和CSS中为页面中的每张图片都指定大小。当然,指定的大小应该跟图片的实际尺寸一样,即遵循 Do not scale images in HTML 的规则。

Specify image dimensions

对于 Specify image dimensions 规则的优化建议,PageSpeed 提供了两点建议:

Specify dimensions that match those of the images themselves.
Don’t use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don’t set the dimensions to 30 x 30 in the HTML or CSS.If the image needs to be smaller, scale it in an image editor and set its dimensions to match (see Optimize images for details.)
Be sure to specify dimensions on the image element or block-level parent
Be sure to set the dimensions on the <img>element itself, or a block-level parent. If the parent is not block-level, the dimensions will be ignored. Do not set dimensions on an ancestor that is not an immediate parent.
设置的大小要个图片本身大小一致
关于这一点,没有太多好说的,《Do not scale images in HTML》里已经介绍了。如果图片大了,那就裁剪它到需要的尺寸,使用《Optimize images》规则中介绍的工具压缩图片,并选择合理的图片格式。
确保给图片或者是块级元素的图片图片的父节点指定尺寸

需要强调的是如果图片的父节点是内联元素,那么设置的大小将不起作用(这个是内联元素的特点)。不要给包裹图片的链接标签A标签设置尺寸,因为A标签不算是一个直接的父节点。什么意思,例如下面的HTML代码:

<style type="text/css">
	.photo-md{
		margin:0 auto;
		padding:4px;
		border:1px solid #CCC;
		overflow:hidden;
	}
	.photo-md,.photo{
		width:200px;
		height:200px;
		vertical-align:middle;
	}
</style>
<p class="photo-md">
	<a href="SpecifyImageDimensions.html"><img src="images/sample.jpg" class="photo" alt="200" width="200" height="" /></a>
</p>

我们应该给IMG的直接(块级)父节点P设置大小,而不应该给A标签设置大小。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Specify image dimensions

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)