Sprite VS较大的图像

Question

在我的网站上进行一些性能测试时，我注意到主页上的3个图像每个图像需要1秒才能加载。

这些图像是3张1000 x 1000高清图像，仅在主页上加载。

我正考虑将这些3变成精灵表，以减少网站的加载时间。

你认为这是个好主意吗？我知道精灵可以很好地处理小图像，但我从未尝试过3张1000px高清图像。

如果更好地使用精灵或只是单独加载它们？

我在网上发现了一些类似的问题，但未能得出结论。

Answer 1

好问题，精灵解决的问题主要是指有很多很小的图像。因此，不是向服务器发出100个请求，而是单个请求。

使用大图像时，您不会从这个概念中获益良多。此外，对于较大的图像，如果第一张图像被加载并且您可以将其呈现给用户并同时加载其他图像，则效果会更好。

第三种选择是渲染一些小的缩略图20x20像素的JPG文件（通常<10KB大小），然后将它们拉伸到与较大的相同的尺寸。这会导致一些模糊的图像，但可以理解图像上的内容。现在，当加载较大的图像时，您可以替换较小的图像。这需要额外的JavaScript执行。