1

I am clear about the benefits of using CSS sprites instead of too many individual requests of small images. What I would like to know is if a specific layout of a big image is faster than the other. For example, imagine that I have 6 pictures of soccer players. I want to use CSS sprites. Which of the following four versions would be the fastest in terms of obtaining the maximum possible benefit of using CSS sprites?

** Version 1 **

enter image description here

** Version 2 **

enter image description here

** Version 3 **

enter image description here

** Version 4 **

enter image description here

Jaime Montoya
  • 6,915
  • 14
  • 67
  • 103

1 Answers1

2

I have tested this a while ago, the differences are negligible performance wise. So you can do what suits you best.

The size difference of the files is minimal, and the background offset in css doesnt matter in speed. If you want performance, make sure you cache them properly and gzip it.

I recommend you test it based on your prefered styling for responsiveness, as that tends to get a little wonky.

Martijn
  • 15,791
  • 4
  • 36
  • 68
  • Cool. I will use Version 2 to do it as it appears in the example at [https://www.tutorialrepublic.com/css-tutorial/css-sprites.php](https://www.tutorialrepublic.com/css-tutorial/css-sprites.php). – Jaime Montoya Nov 07 '18 at 15:35
  • I was reading at [https://stackoverflow.com/questions/11289369/why-png-size-doesnt-change-after-using-http-gzip-compression](https://stackoverflow.com/questions/11289369/why-png-size-doesnt-change-after-using-http-gzip-compression) this: "There is no need to use GZIP (or equivalent) as it will just add processing for the decompression of images client side." – Jaime Montoya Nov 07 '18 at 21:35
  • If you use minimized jpgs it hasnt much of a benefit. But for css/html/js it'll help. – Martijn Nov 08 '18 at 08:10
  • 1
    For CSS/HTML/JS I am using minification, not Gzipping. That is something interesting for me to try. Thank you! – Jaime Montoya Nov 08 '18 at 15:02