Multiple images and sprites

Question

"Simple question.

Is it better to use large sprites for site elements than to use multiple images? I mean that additional image manipulations in CSS (background positioning of a large image and cropping) compensate for a smaller number of HTTP image requests?

Answer 1

the number of simultaneous HTTP / 1 connections with the host is limited to about 6. Assuming a latency of 100 ms, about 60 images in the published sprite will take at least a second to load (possibly more, since HTTP requests and responses must be generated and analyzed).

Since the size of the sprite image is about the same as the individual sprites, and the image processing is incredibly fast (I would estimate well below 100 ms for all 60 images together), using sprites saves the Amazon about 900 ms load time, a noticeable effect - and this is theoretically , without taking into account the huge overhead associated with serving the 60 times the number of requests that they might otherwise have.

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

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

Answer 2

As a rule, it is better to use sprites that contain many small images.

Each image creates an additional HTTP request and takes time. Especially with HTTP 1.0, every new request should wait for a previous response.

As for very large images - this mainly depends on the ratio of time required to transfer one set image to the overhead in time coming from the HTTP protocol. If the overhead is small and you feel that such large images can slow down your application - you can use several images, if relevant - use css sprites.

Answer 3

Yes, for any reasonable image size, it will be faster.

Drawing a part of a larger image is no slower than drawing a whole smaller image. This is not like the browser draws the entire image and removes parts that are not displayed, but only draws part of the displayed image. It simply copies pixels from memory, and this is very small if the pixels are close to each other in memory or scattered across a large image.

A larger image takes longer to load a small image, so smaller images will start to display faster, but a large image loads much faster than all small images together. Even if you need to wait a little longer until the images start showing up, all the images appear at the same time, and not appear one at a time.

Answer 4

Of course, this is better. The browser will only perform a file request, compared to many requests for more files.

Use sprites for many small images that tend to repeat in your design (icons for ex). For large photographs, this is not a good idea, in the case of a photo gallery.