多个图片vs spritesheet [英] Multiple Images vs spritesheet

问题描述

简单问题。

与使用多个图片相比，对网站元素使用大的sprites是否更好？

我的意思是，做额外的CSS图像处理大图像和裁剪它）补偿更少的HTTP图像请求？

Is it better to use large spritesheets for site elements than using multiple images? I mean,do the additional CSS image manipulation (background positioning a large image and cropping it) compensate for the fewer HTTP image requests?

推荐答案

到主机的并发HTTP / 1连接数限制为大约6.假设等待时间为100ms，则贴上的精灵中的大约60个图像将需要至少一整秒的下载（可能更多，因为HTTP请求和答案需要生成和解析）。

The number of concurrent HTTP/1 connections to a host is limited to about 6. Assuming a latency of 100ms, the about 60 images in the posted sprite would take at least a whole second to download (probably more, since HTTP requests and answers need to be generated and parsed).

由于sprite图像的大小是与单个精灵和图像处理一样快速（我估计所有60个图像一起低于<100毫秒），使用精灵节省亚马逊约900毫秒的加载时间，明显的影响 - 这是理论上，没有

Since the size of the sprite image is about the same as the individual sprites and image processing is blazingly fast (I'd estimate well below <100 ms for all 60 images together), using sprites saves amazon about 900ms of load time, a noticeable impact - and that's in theory, without accounting for the huge overhead of having to serve 60x the number of requests they would have to otherwise.

总而言之，使用精灵可用于徽标和通过HTTP / 1的小图片。

In summary, use sprites for logos and small images over HTTP/1.

HTTP / 2设计为不再需要解决方法。最重要的是，可以通过同一TCP连接同时提供多个请求。此外，头压缩设计为压缩诸如 User-Agent 或接受之类的冗余头。

HTTP/2 is designed so that workarounds are no longer needed. Most importantly, multiple requests can be served concurrently over the same TCP connection. Additionally, header compression is designed to compress redundant headers such as User-Agent or Accept.

这篇关于多个图片vs spritesheet的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！