SEO影响指定图像宽度和响应网站的高度？ [英] SEO impact on specifying image width and height for responsive website?

问题描述

有人告诉我，为所有图片指定内联宽度和高度将适用于SEO ，并且还有助于网站加载速度更快，例如：

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

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

但是在我继续之前，只需要确保这些语句是真的。我个人认为固定内联维度和使用外部CSS覆盖，只是听起来有点怪我.....。

解决方案

< blockquote>

有人告诉我，为所有图片指定内联宽度和高度将
适用于SEO，也有助于网站加载速度更快。

是的。这通常是真的（至少是网站加载速度更快部分）。

通过指定< img> ; 浏览器保留与图像的尺寸匹配的空间，同时继续解析HTML文档的其余部分。然后，当浏览器加载图像时，保留的空间正在等待，因此无需回流文档。

提供此尺寸数据导致更快的渲染过程。

相反，如果省略width和height属性，浏览器将不会知道图像的大小，直到下载完成，这迫使浏览器重排文件，减慢渲染过程。

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

上述做法代表了传统视图的图片加载。

相比之下，有些人现在

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

大多数响应网站不使用width或
height，因为他们希望图像适应屏幕尺寸，而
使用fixed宽度和高度使用< img> ，这会抑制用户
的体验，并且Google已经宣布这是最重要的
因素。

_source： http://webmasters.stackexchange.com/a / 68494

因此，双方都有参数，在你的个案。以下是您的决定：

• 指定图片尺寸以提高浏览器性能


• 图片宽度/高度为属性还是在CSS中？

I was told that specifying inline width and height for all images will be good for SEO and also helps the site loads faster, like so:

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

Although I can still overwrite the inline setting using height:auto;. So that images re-size properly when in different display platforms.

But just before I go ahead and doing this just want to reassure if these statements are true. Personally I feel dubious about fixing the inline dimension and overwriting using external CSS, just sound a bit hacky to me.....

解决方案

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

Yes. This has traditionally been true (at least the "site loads faster" part).

By specifying the height and width attributes of an <img> the browser reserves a space matching those dimensions for the image while it continues parsing the rest of the HTML document. Then when the browser loads the image, the reserved space is waiting and there is no need to reflow the document.

Providing this sizing data results in a faster rendering process.

In contrast, if the width and height attributes are omitted, the browser will not know the size of the image until the download is complete, which forces the browser to reflow the document, slowing down the rendering process.

Now imagine a page with 50 images with no defined width and height attributes. The performance hit could be very noticeable.

The practice above represents the traditional view of image loading.

In contrast, some people are now saying that for responsive design the width and height attributes should be avoided.

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: http://webmasters.stackexchange.com/a/68494}

So there are arguments on both sides and the decision most likely depends on your individual case. As you make your decision here are some more details:

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

这篇关于SEO影响指定图像宽度和响应网站的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！