: Better image compression by combining images? 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

@Phylliss782

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.

Vote Up Vote Down

@Yeniel278

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: css-tricks.com/css-sprites/

Vote Up Vote Down