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

我正在尝试优化我的图像搜索引擎优化.

Page Speed currently only detects image dimensions that are specified
via the image attributes.

根据上面的行我应该使用图像标签中的宽度和高度属性来提高页面速度.但我也必须响应网站,例如我有一个具有以下宽度和高度的图像.

屏幕尺寸960像素

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

那么我将如何在小屏幕上调整图像大小？

屏幕尺寸480像素

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

如果我添加一个id或类来调整小屏幕上的大小,它将是正确的方式？

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

请指导我,我错了或任何其他建议.在图像标签中,网站速度还需要宽度和高度属性吗？

解决方法

通过HTML代码更改图像尺寸不会减小图像大小,也不会提高加载速度.如果要为不同的屏幕分辨率加载不同的图像大小,则必须使用ajax加载不同的图像(基于屏幕大小)或其他第三方图像处理程序以及 aspJpeg(对于Windows服务器)或 WideImage(对于Linux)或查找更多通过搜索PHP图像操作来动态调整图像大小.

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