Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
1  
That 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. –  Joonas May 19 '13 at 18:11
2  
A 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. –  KMSTR May 19 '13 at 18:12
1  
With 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... –  horatio Jul 24 '13 at 15:56

2 Answers 2

up vote 4 down vote accepted

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/

share|improve this answer
1  
Sprite 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. –  plainclothes Jul 24 '13 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. –  Ilmari Karonen Jul 24 '13 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.