文档中心 >Google PageSpeed

指定图片尺寸

概览

指定所有图片的宽度和高度可以加速渲染,因为省去了不必要的回流和重绘。

注,网站诊断目前只检测那些由图片属性指定的图片尺寸,如果你是通过CSS指定图片尺寸,那么你可以忽视这个建议。

详细

当浏览器勾画出页面时,它需要能够绕流可更换元件,例如图像。它可以开始呈现一个页面,及时图像还未下载,其前提是它知道尺寸以围绕包裹不可更换的元件。如果包含文档中没有指定尺寸,或者指定的尺寸与实际图像不匹配,那么当图像被下载,浏览器将需要一个回流和重绘。为了防止回流,指定所有图像的宽度和高度,无论是在HTML<img>标签,还是CSS。

建议

指定匹配图像本身的尺寸

不要使用的宽度和高度的规格来缩放图像。如果图像文件实际上是60×60像素,不要设置尺寸为30×30的HTML或CSS。如果图像需要更小,请在图像编辑器里改变尺度,并设置其尺寸一致(参见优化图像的细节。)

指定图像元素或父块级的尺寸

一定要在<img>元素本身或父块级上设置尺寸。如果父不是块级,尺寸将被忽略。不要在一个上级而不是直接父级指定尺寸。