What is the name of the technique where many small images are copied into one large image to get better compression and avoid loading many separate images int memory? And is this still useful in modern devices?
3
-
1That would be Sprite sheet. The biggest upside to using sprite sheet is that it reduces the amount of HTTP requests that your browser needs to make.– JoonasMay 19, 2013 at 18:11
-
2A sprite sheet is often used as it only loads one file. Also, it's easier to maintain. But I doubt it has much to do with image compression.– KMSTRMay 19, 2013 at 18:12
-
1With a clever layout, a sprite sheet can be optimized to reduce wasted pixels around non-rectangular sprites. This could result in significant savings and might be (loosely) considered a form of compression...– horatioJul 24, 2013 at 15:56
Add a comment
|
2 Answers
It's not about image compression but rather the number of HTTP-requests. Sprite sheets are a common developer technique nowadays. You can read an overview of the technique and its benefits here: http://css-tricks.com/css-sprites/
-
1Sprite sheets are rapidly becoming the old-school solution. Embedding "sprites" in your CSS via base-64 encoding is the more progressive technique now. A little bigger CSS download avoids the extra server request altogether. Jul 24, 2013 at 15:57
-
Combining your images into a sprite sheet does allow somewhat better compression, too, if they contain similar elements. In fact, you may want to run your finished sprite sheet through an efficient (but slow) compressor like PNGOUT to make most of this benefit. Jul 24, 2013 at 20:17
I'm not sure this directly answers your question, but since @AdamSchuld requested more detail ...
Sprite sheets are good
Sprite sheets have been around a long time and they are a wonderful tool. They can dramatically reduce the number of server requests for very small images. However, there is still a server request involved and it may not be necessary.
Data URIs are better (sometimes)
If the images in question are truly viable for a sprite sheet (ie, they're small) and your goal is page performance, base64 encoded images in the CSS may be a better answer. Using this technique, an image (usually a simple icon or image tile) is embedded directly in your CSS or HTML using a data URI.
In CSS it looks something like this:
background: url(data:image/gif;base64,Really/18asd926Long/451String265Here);
And in HTML:
<img src="data:image/gif;base64,Really/18asd926Long/451String265Here" />
There is a healthy discussion on SE that points out, among other things, that this approach is recommended for mobile. That should tell you something about the performance benefit where HTTP connections are a concern.
CSS-Tricks has a nice overview.
There are online converters that will spit your image out in base64 format.
