SEO对响应式网站指定图像宽度和高度的影响？

Question

我被告知,为所有图像指定内联宽度和高度将有利于SEO,也有助于网站加载更快,如下所示:

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

虽然我仍然可以使用height:auto覆盖内联设置; .因此,在不同的显示平台上,图像可以正确地重新调整大小

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

Answer 1

我被告知,为所有图像指定内联宽度和高度将有利于SEO,也有助于网站加载速度更快.

是.传统上这是真的(至少"网站加载更快"部分).

通过指定<img>浏览器的高度和宽度属性,保留与图像的那些维度匹配的空间,同时继续解析HTML文档的其余部分.然后,当浏览器加载图像时,保留的空间正在等待,无需重排文档.

提供此大小调整数据会导致更快的渲染过程.

相反,如果省略width和height属性,则在下载完成之前,浏览器将不知道图像的大小,这会强制浏览器重排文档,从而减慢渲染过程.

现在想象一个包含50个图像但没有定义宽度和高度属性的页面.性能受到的影响可能非常明显.

上面的实践代表了传统的图像加载视图.

相比之下,有些人现在说,对于响应式设计,应该避免宽度和高度属性.

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

大多数响应式网站不使用宽度或高度,因为他们希望图像适应屏幕尺寸,并使用固定的宽度和高度来<img>抑制用户体验,Google已宣布这是最重要的因素之一.

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

因此,双方都存在争议,决定很可能取决于您的个案.正如您在此做出决定的更多细节:

• 指定图像尺寸以提高浏览器性能
• 图像宽度/高度作为属性还是在CSS中？