是否在 html 中指定图像尺寸

Question

在使用 gtmetrix 测试我的网站时，它建议如下：

页面速度

Specify image dimensions:

为所有图像指定宽度和高度可以通过消除不必要的重排和重绘来加快渲染速度。

来自 Google 的详细信息

当浏览器布局页面时，它需要能够围绕可替换元素（例如图像）流动。它甚至可以在下载图像之前开始渲染页面，前提是它知道包裹不可替换元素的尺寸。如果包含文档中未指定尺寸，或者指定的尺寸与实际图像的尺寸不匹配，则浏览器将在下载图像后要求重排和重绘。为防止重排，请在 HTML <img> 标记或 CSS 中指定所有图像的宽度和高度。

Y 慢

Do not scale images in HTML:

在 HTML 中缩放图像会导致下载大图像时不必要的带宽浪费。

来自雅虎的详细信息！

网页设计者有时会使用 HTML 图像元素的宽度和高度属性来设置图像尺寸。避免这样做，因为它会导致图像比需要的大。

那么，该关注哪一个？我应该在html中指定图像尺寸吗？

Answer 1

缩放和指定图像尺寸是两件不同的事情。

缩放：

您只需指定宽度和高度属性之一。假设，如果您指定宽度但未指定高度属性，则图像将与宽度成比例缩放，反之亦然。

您可以查看this 了解更多详情。

指定图片尺寸：

这意味着您应该使用两个属性，即宽度和高度。

您也可以查看this 了解更多详情。

那么，谷歌的建议是什么？

指定图像尺寸：这意味着您应该在 html 中定义宽度和高度属性。

还有，雅虎的建议是什么？

不要在 html 中缩放图像：这意味着你不应该只定义宽度和高度之一。

因此，当您在 html 中指定宽度和高度属性时，两个建议都会通过。

---

仅供参考，我正在添加这个：

指定图像尺寸也会影响 SEO。因此，它是 SEO 优化的一个加分点。您可能已经在 google 搜索中看到了更多选项来查找特定尺寸大小的特定图像。