如何管理图片以减少页面负载？

Question

我要求在我的页面超过30张图片。

页面加载时间几乎是25秒。

如何减少加载时间。

有什么方法可以最小化图片大小并加快下载速度吗？

每张图片大小为25KB，每张图片耗时近5.5秒。

我必须在我的页面中显示所有的图像。

Answer 1

除了其他人所说的，你可以尝试使用CSS Image sprites。这将减少服务器请求的数量，从而减少页面的加载时间。

只要确保你不会犯使用CSS图像精灵的常见错误，

以错误的方式

.element1 { background:url('img.jpg') 10px 10px no-repeat; }
.element2 { background:url('img.jpg') 20px 20px no-repeat; }

<div class="element1"></div>
<div class="element2"></div>

这仍然会对同一镜像发出2个不同的服务器请求。

以正确的方式

.cssSprite {
    background:url('img.jpg');
    background-repeat: no-repeat;
}
.element1 { background-position: 10px 10px; }
.element2 { background-position: 20px 20px; }

<div class="cssSprite element1"></div>
<div class="cssSprite element2"></div>

这将仅创建一个到服务器的请求。

Answer 2

除了减小你的图像大小，还有一些技术可以帮助你更快地加载网页。请看这个：

10 Quick Tips For Making Your Large Graphics Load Faster

如果可能，您可以为您的资源使用单独的服务器，如图像、动画、脚本和样式表

Answer 3

为了减小图像大小和页面加载时间，您可以使用JPEGCompressor等软件或Gimp等开源软件对图像进行压缩。