Question

我试图为SEO优化我的图片。

Page Speed当前仅检测指定的图像尺寸通过图像属性。

根据上述内容，我应该在图片代码中使用width和height属性来提高网页速度。但我也必须对网站做出响应，例如我有一个宽度和高度如下的图像。

屏幕尺寸960像素

<img src="" width="250" height="250" />

然后我将如何调整小屏幕上的图像尺寸？

屏幕尺寸480像素

<img src="" width="250" height="250" />

如果我在小屏幕上添加一个用于调整大小的id或类，那么它是否正确？

.reduceSize{
   width:150px;
   height:150px;
}

请指导我错误或任何其他建议。图像标签中的宽度和高度属性也是站点速度所必需的吗？

Answer 1

通过HTML代码更改图像尺寸不会缩小图像尺寸，也不会提高加载速度。如果要为不同的屏幕分辨率加载不同的图像大小，则必须使用ajax加载不同的图像（基于屏幕大小）或其他第三方图像处理程序以及aspJpeg（对于Windows服务器）或{{3 （对于linux）或通过搜索 php图像操作来动态调整图像大小来查找更多内容。

在加载正确的图像之前，您可能需要额外的编码来确定屏幕尺寸。

Answer 2

您可以添加两个不同的<img>代码。一个用于移动设备，一个用于大屏幕。

<img class="hide-in-mobile" src="" width="250" height="250" />

在移动设备的css媒体查询中添加

.hide-in-mobile
{
 display:none;
}

和

<img class="show-in-mobile" src="" width="150" height="150" />

用于大屏幕的媒体查询

.show-in-mobile
{
 display:none;
}

Answer 3

宽度和高度属性对于网站速度非常重要。您可以设置图像的自然宽度/高度，然后使用CSS在Media中控制img大小。正如你在问题中所说的那样。

<img class="reduceSize" src="" width="250" height="250" />

@media all and (max-width:960px ) {
.reduceSize{
   width:350px;
   height:350px;
}

}

@media all and (max-width:480px ) {
.reduceSize{
   width:150px;
   height:150px;
}

}

Answer 4

图像优化的另一个想法是使用渐进式jpeg。这是一篇关于

的文章

http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html?m=1

另一篇文章：

https://optimus.io/support/progressive-jpeg/

指定图像尺寸以提高网站速度

4 个答案: