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

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

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

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

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

解决方法

I was told that specifying inline width and height for all images will
be good for SEO and also helps the site load faster.

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

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

提供此大小调整数据可以加快渲染速度.

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

现在想象一个包含50个图像的页面,没有定义的宽度和高度属性.性能打击可能非常明显.

上述做法代表了traditional view of image loading.

相比之下,some people are now saying应该避免响应式设计的宽度和高度属性.

Responsive Design does not normally use any width or height attributes

The majority of responsive websites do not use width or
height because they want the images to adapt to the screen size and by
using fixed width and height using <img> which would dampen user
experience and Google has declared this one of the most important
factors.

_{source: 07003}

因此,双方都存在争议,而决定很可能取决于您的个案.当你在这里做出决定时,会有更多细节：

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