在html中指定图像尺寸与否

时间:2015-12-11 08:25:09

标签: html css image pagespeed yslow

使用gtmetrix测试我的网站时,建议如下:

页面速度

Specify image dimensions:

  

通过消除不必要的回流和重新绘制的需要,为所有图像指定宽度和高度可以加快渲染速度。

Google的详细信息

当浏览器布置页面时,它需要能够在诸如图像之类的可替换元素周围流动。它甚至可以在下载图像之前开始呈现页面,前提是它知道包装不可替换元素的尺寸。如果在包含文档中未指定维度,或者指定的维度与实际图像的维度不匹配,则浏览器将需要重排并在下载图像后重新绘制。要防止回流,请在HTML <img>标记或CSS中指定所有图像的宽度和高度。

YSlow的

Do not scale images in HTML:

  

使用HTML缩放图像可能会导致下载大图像时浪费不必要的带宽。

Yahoo的详细信息!

网页设计者有时会使用HTML图像元素的width和height属性来设置图像尺寸。避免这样做,因为它可能导致图像大于所需的图像。

那么,要遵循哪一个?我应该用html指定图像尺寸吗?

1 个答案:

答案 0 :(得分:1)

缩放和指定图像尺寸是两回事。

<强>规范化:

您只需指定width和height属性之一。假设,如果指定宽度并且未指定高度属性,则图像按宽度成比例缩放,反之亦然。

您可以查看this了解更多详情。

指定图片尺寸:

这意味着你应该使用两个属性,即宽度和高度。

您还可以查看this了解更多详情。

那么谷歌建议什么呢?

指定图像尺寸:这意味着您应该在html中定义宽度和高度属性。

而且,雅虎建议什么?

不要在html中缩放图像:这意味着您不应只定义宽度和高度中的一个。

因此,当您在html中指定width和height属性时,两个建议都会被传递。

仅供参考,我正在添加这个:

指定图像尺寸也会影响SEO。因此,它是SEO优化的一个加分点。您可能已经在谷歌搜索中看到了更多选项来查找特定尺寸大小的特定图像。