多个图像与spritesheet

Question

“简单”的问题。

对于网站元素使用大型spritesheets比使用多个图像更好吗？ 我的意思是，进行额外的CSS图像处理（背景定位大图像并裁剪它）可以补偿更少的HTTP图像请求吗？

Answer 1

number of concurrent HTTP/1 connections to a host限制在6左右。假设延迟时间为100毫秒，发布精灵中的大约60张图片至少需要一秒钟下载（可能更多，因为HTTP请求和答案需要是生成并解析）。

由于精灵图像的大小与各个精灵的大小相同，并且图像处理非常快（我估计所有60个图像一起远低于<100 ms），使用精灵可以节省大约900毫秒的负载时间，一个明显的影响 - 这在理论上，没有考虑到必须服务60倍的巨大开销，否则他们将不得不提供这些请求。

总之，使用精灵用于HTTP / 1上的徽标和小图片。

HTTP / 2的设计使得不再需要解决方法。最重要的是，可以在同一TCP连接上同时提供多个请求。此外，标头压缩旨在压缩冗余标头，例如User-Agent或Accept。

Answer 2

通常使用精灵很多小图片会更好。

每个图片都会创建额外的http请求，这需要时间。特别是对于HTTP 1.0，每个新请求都需要等待先前的响应。

对于非常大的图片 - 它主要取决于将一组图像传输到来自HTTP协议的时间开销所需的时间比率。如果开销不大并且你觉得这么大的图像可能会减慢你的应用程序 - 你可以使用多个图像，如果相关的话 - 使用css sprites。

Answer 3

是的，对于任何合理的图像尺寸，它会更快。

绘制较大图像的一部分并不比绘制整个较小的图像慢。它不像浏览器绘制整个图像并删除未显示的部分，它只是绘制正在显示的图像部分。它只是从内存中复制像素，如果像素在内存中靠近在一起或在较大的图像中分开，则重要的是。

较大的图像需要较长时间来加载小图像，因此较小的图像会开始更快地显示，但是大图像加载的速度比所有小图像快得多。即使您需要等待一段时间才能开始显示图像，所有图像会立即显示，而不是一次弹出一个。

Answer 4

当然，它更好。与许多请求更多文件相比，浏览器只会对文件发出请求。

对于许多在您的设计中重复的小图像使用精灵（图标为ex）。对于大型照片，如果是照片库，这不是一个好主意。