Question

我在页面中请求了30多张图片。

页面加载时间差不多是25秒。

如何减少加载时间。

是否有任何方法可以最大限度地缩小图像尺寸并加快下载速度。

每张图片为25KB，每张图片大约需要5.5秒。

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

Answer 1

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

请确保您不会犯使用CSS Image sprite的常见错误，

错误的方式

.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等开源软件压缩图像。

如何管理图像以减少页面加载？

3 个答案: