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

我正试图优化我的图片以获得搜索引擎优化。指定图片尺寸以提高网站速度

页面速度当前仅检测通过图像属性指定的图像尺寸。

根据上述线我应该使用在图像标签width和height属性用于提高速度。但我也必须响应该网站，例如我有一个具有以下宽度和高度的图像。

屏幕尺寸960像素

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

那怎么我会调整在小屏幕上的图像尺寸是多少？

屏幕尺寸480像素

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

如果我添加用于调整小屏幕上的大小将是正确的做法或不是id或class？

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

请指导我我错了或有任何其他建议。另外在图片标签宽度和高度属性是必要的现场速度？

来源

2016-02-10 Mr. Developer

@GauravRai我已经使用媒体查询，我需要建议的图像优化 –

通过html代码更改图像尺寸不会减小图像大小，并且不会提高加载速度。如果要为不同的屏幕分辨率加载不同的图像大小，则必须使用ajax加载不同的图像（基于屏幕大小）或其他第三方图像处理程序以及aspJpeg（用于Windows服务器）或WideImage（用于Linux）或查找更多通过搜索php图像处理动态调整图像大小。

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

来源

2016-02-10 06:41:26

这就是我想问的确切的，但我是我使用'php'而不是'asp'。那么有没有其他的解决方案，而不是使用任何特定的API？ –

请再次检查答案。 –

正确，更改图像尺寸不会缩小图像大小，但它可以提高浏览器渲染速度，这会导致页面加载时间。 [来源]（http://stackoverflow.com/a/32218280/1141264） – DickieBoy

可能是你可以添加两个不同的<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; 
}

来源

2016-02-10 06:39:49

自然地，[使用媒体查询] （https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）也是必需的。 – Wex

不起作用。只要浏览器点击

宽度和高度属性对网站速度很重要。您可以设置图像的自然宽度/高度，然后使用媒体中的CSS控制您的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; 
} 

}

来源

2016-02-10 06:41:51 Pedram

图像优化的另一个想法是使用渐进式jpeg。以下是有关

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

的一篇文章的另一篇文章：

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

来源

2016-02-10 07:11:04