搜索引擎优化对指定响应式网站的图像宽度和高度的影响？

Question

有人告诉我，为所有图片指定内嵌宽度和高度将有利于 SEO，还有助于网站加载更快，如下所示：

<img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" />

虽然我仍然可以使用 height:auto; 覆盖内联设置。 以便图像在不同的显示平台上正确调整大小。

但就在我继续这样做之前，我只是想确保这些陈述是否属实。就我个人而言，我对修复内联尺寸和使用外部 CSS 覆盖感到怀疑，对我来说听起来有点 hacky.....

Answer 1

有人告诉我，为所有图像指定内联宽度和高度将 对 SEO 有好处，也有助于网站加载更快。

是的。这在传统上是正确的（至少“网站加载速度更快”部分）。

通过指定<img> 的高度和宽度属性，浏览器会在继续解析HTML 文档的其余部分时为图像保留与这些尺寸相匹配的空间。那么当浏览器加载图片时，预留空间在等待，不需要reflow the document。

提供这种尺寸数据可以加快渲染过程。

相比之下，如果省略宽度和高度属性，则浏览器在下载完成之前不会知道图像的大小，这会迫使浏览器重新排列文档，从而减慢渲染过程。

现在想象一个页面有 50 张没有定义宽度和高度属性的图像。性能损失可能非常明显。

上面的做法代表traditional view of image loading。

相比之下，some people are now saying 认为对于响应式设计，应避免使用 width 和 height 属性。

响应式设计通常不使用任何宽度或高度属性

大多数响应式网站不使用宽度或 高度，因为他们希望图像适应屏幕尺寸并通过 使用<img> 使用固定宽度和高度，这会抑制用户 经验和谷歌已宣布这是最重要的之一 因素。

_{来源：https://webmasters.stackexchange.com/a/68494}

所以双方都有争论，决定很可能取决于您的个人情况。当您做出决定时，这里有一些详细信息：

• Specifying image dimensions to improve browser performance
• Image width/height as an attribute or in CSS?

Answer 2

如果您不告诉浏览器您的图片大小，那么它必须“构建”页面不是一次，而是两次（或更多次，具体取决于页面上的图片数量）。它将构建一次以显示所有文本，然后它会等到下载图像。当下载一个图像时，浏览器现在可以确定图像的大小，并将重建页面以将文本包裹在该图像周围。此过程将发生在您页面上的每张图片上。

如果您只指定图像尺寸，它就已经知道图像的大小，并且可以使用该信息来塑造页面。它不必重建页面一百万次。

Answer 3

有人告诉我，为所有图像指定行内宽度和高度将 对 SEO 有好处，也有助于网站加载更快。

不，它确实有助于更快地加载网站。它有助于避免在呈现页面时闪烁。如果您想更快地加载图像，请确保它们具有与页面中指定的大小相同的大小，并使用 kraken.io 之类的服务来减小相应的文件大小。

关于 SEO，不合适的图像尺寸和屏幕宽度会损害您的 SEO。 Google 可能会认为您的网站对用户不友好和/或对智能手机不友好。