浏览器端是否正确调整了性能？

Question

知道原始图像要小得多，可以明智地设置img标签性能的宽度和高度吗？

我读过的文章通常说设置宽度和高度解决了性能问题，但不清楚，如果我设置宽度和高度并且它们与原始图像大小不同，是否“好”？ 或者我必须始终设置与图像本身相同的宽度和高度吗？

Answer 1

除非您预计您的网站在智能手机等慢速/有限设备上使用，否则您不应该在这种特定情况下担心性能。

但是，如果指定的尺寸大于实际图像尺寸，则图像看起来会很糟糕。

根据我的经验，指定图像大小对于避免在未立即加载图像时更改页面布局非常有用;在这种情况下，浏览器最初不知道大小是多少，也不会为它保留所需的空间。稍后加载图像时，页面内容可能会“跳转”，因为图像的大小将随浏览器而变化。

Answer 2

我手边没有基准测试，但我认为如果设置宽度/高度与原始宽度/高度不同，则根本不会出现问题。浏览器呈现图像，就是这样。就性能AFAIK而言，渲染动作通常并不昂贵。顺便说一句，你不应该害怕这样的事情，除非你做的事非常花哨（即图像99999x99999或在一页中渲染2000张图像）。

无论如何，如果你可以避免这种情况，那可能会更好。