我了解到，明确指定图像尺寸是最佳实践。然后，浏览器可以在仍然下载图像本身的同时布局页面，从而缩短（感知的）页面渲染时间。
这是真的？如果是这样，在 HTML 或 CSS 中指定尺寸是否有区别？
- HTML:
<img src="" width="200" height="100">
- 内联CSS：
<img src="" style="width: 200px; height: 100px">
- 外部CSS：
#myImage { width: 200px; height: 200px; }
根据谷歌页面速度 http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions，如果您通过 CSS 或 HTML 指定尺寸并不重要，只要您的 CSS 面向 IMG 标签本身而不是父元素即可：
当浏览器布置页面时，它需要能够围绕可替换元素（例如图像）流动。它甚至可以在下载图像之前开始渲染页面，前提是它知道包裹不可替换元素的尺寸。如果包含的文档中未指定尺寸，或者指定的尺寸与实际图像的尺寸不匹配，则下载图像后浏览器将要求回流并重新绘制。为了防止重排，请在 HTML 标记或 CSS 中指定所有图像的宽度和高度。
但是，请注意，他们建议不要使用这些尺寸调整图像大小，即始终使用实际尺寸：
不要使用宽度和高度规范来动态缩放图像。如果图像文件实际上为 60 x 60 像素，请勿在 HTML 或 CSS 中将尺寸设置为 30 x 30。如果图像需要更小，请在图像编辑器中缩放并设置其尺寸以匹配（有关详细信息，请参阅优化图像。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
