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

前端之家收集整理的这篇文章主要介绍了HTML – SEO对响应式网站指定图像宽度和高度的影响?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我被告知,为所有图像指定内联宽度和高度将有利于SEO,也有助于网站加载更快,如下所示:
<img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" />@H_502_3@ 
 @H_502_4@虽然我仍然可以使用height:auto;覆盖内联设置.
因此,在不同的显示平台上,图像可以正确地重新调整大小

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

解决方法

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

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

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

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

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

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

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

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

@H_502_4@Responsive Design does not normally use any width or height attributes

@H_502_4@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.

@H_502_4@source: 07003

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

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

猜你在找的HTML相关文章