前端性能优化之--指定图片的宽高

经常有浏览大公司web端产品的习惯，习惯在chrome开发者工具中的audits下面的Specify image dimensions，发现这个后面跟着的数字总是挺大的。我刚上班的时候，对这一块也不是很懂，有时候偷懒，都喜欢对外部的图片管他3721就对它设置一个宽高，完全不处理图片，或者直接不设置宽高，让图片自适应。到后来，慢慢发现这个css的渲染机制，对图片这一块的处理相当影响性能。

看看下面外文文章的规则：

1. Specify dimensions that match those of the images themselves.
2. 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.)
3. Be sure to specify dimensions on the image element or block-level parent
4. Be sure to set the dimensions on the 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.

以上规则说明：

1. 指定图片尺寸的时候需要指定跟图片大小匹配的尺寸。
2. 不要使用img的width和height来缩放图片展示。如果图片源文件是60*60px的，不要在html或者css中将尺寸设置为30*30px。如果图片需要更小点，请在图片编辑器中将源文件尺寸缩放到对应的大小。
3. 确保在img元素或者块级父元素上指定图片的宽/高。
4. 确保实在元素上设置尺寸，或者是在图片的父元素上设置。如果图片（）父元素不是块级元素，那么设置的尺寸将不会生效。不要在非图片的直接父元素上设置图片的尺寸。

更多关于图片优化的建议，请移步这里

前端性能优化之--指定图片的宽高

原文：http://www.cnblogs.com/calvinjs/p/4936663.html