Menu
"Simple" question.
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?
383
Benefit of sprite sheet Is that It loads data once only so the loading spike is only at the beginning while an individual sprite animation would require loading dynamically, spikes at each frame.
Sprite sheets increase the performance of your game and reduce the loading and startup time. The game uses a few big image instead of hundreds of small images. This also allows sprite batching — the rendering system draws the sprites with a few draw calls instead of sending isolated commands for each sprite.
Generally, most modern computers allow for at least 4096x4096 textures, but if you want to be really safe, you can limit yourself to 2048x2048.
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).
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.
In summary, 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 served concurrently over the same TCP connection. Additionally, header compression is designed to compress redundant headers such as User-Agent or Accept.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
