javascript - 图像高度和宽度自动？

Question

出于性能目的，是否可以让我的 img 标签自动生成其 width 和 height 属性？

通常，有关 Web 性能的文章指出，包含 width 和 height 属性标记的图像可能会加载得更快，从而使浏览器不必在搜索过程中搜索这些值。加载过程。

Answer 1

宽度和高度属性不会使图像加载速度更快，并且浏览器不会“搜索”这些值。添加它们的作用是在页面上创建一个占位符，允许浏览器在页面上的适当位置渲染其他元素，而无需在图像最终加载后重排页面。

为了回答您的问题，除了一些从文件中检索图像宽度和高度并根据该属性将属性写入页面的服务器端解决方案之外，没有办法自动生成这些属性。但是，除非您已经在进行其他图像处理(例如生成缩略图)，否则这太过分了，并且可能会在服务器端浪费比在客户端节省的时间更多的时间。

此外，在某些情况下，例如实现响应式设计，实际上最好不添加属性，因为您需要将其留给浏览器来确定页面应如何流动以及图像应根据设备的分辨率显示。