最近我们发现谷歌浏览器对图片设置有一定的修改，它主要在图像上进行设置width和设置height属性，以防止布局发生变化并改善网站访问者的体验。
Web性能倡导者经常建议开发者为图像添加尺寸，以实现最佳性能，以便在下载图像本身之前，以适当的图像空间布置页面，这样可以避免下载图像时发生版式移位。
为什么说给图片设置宽度和高度是一个很好的建议呢？
一下图是简单例子：
h1>Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
以上例子分两个阶段进行渲染，首先是在下载HTML，然后再下载图像。使用上面的代码，这将导致主要内容在下载图像后发生加载版式移位。
图片未加载不留位置
布局的变化对用户造成很大的干扰，尤其是如果你已经开始阅读文章，突然被一连串的动荡甩开了，然后你必须再次找到自己的位置。当每个图像都通过Internet到达时，这还会在浏览器上进行额外的工作以重新计算页面布局。在包含大量图像的复杂页面上，这可能会在设备上要处理很多更好的事情时给设备带来可观的负担！
避免这种情况的传统方法是在标记中提供width和height属性，因此即使浏览器只有HTML，它仍然能够分配适当的空间。所以我们可以修改成以下内容：
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
然后进行渲染，如下所示，在到达图像时为图像留出适当的空间，并且下载图像时文本不会发生剧烈的偏移：
预留空间给图像
页面内容不断跳动对用户造成烦人的影响，更是对服务器的CPU影响相当大，所以在页面需要加载图片时，可以考虑添加高宽度。
閱讀更多 SOWORD科技言 的文章
