Alternatives to CSS sprites

Question

Creating and maintaining CSS sprites is a lot of work. Both creating the sprites and creating the coordinates in the CSS are a burden. Front end technologies such as SASS/Compass spriting helps but requires a build step in the frontend. Are there any alternatives for spriting that still only require one HTTP call without the hassle?

For instance: it would be rather nice to have some sort of zip format that would contain all the images that you'd like to combine into one call but that do not require you to determine coordinates. You'd simply point to the image in the zip and use that. Is there something like this in the works?

edit: The zip idea above was actually a spec in the making. Read about it here: http://limi.net/articles/resource-packages. They decided to drop the spec in favour for the SPDY protocol and HTTP pipelining. So I guess there's work being done, but on the protocol level so it can remain backwards compatible.

I've just made [this very simple data-URI converter](http://jsbin.com/tomale/1/), which might be helpful for converting your files. I've also included that link in my answer below. — Joeytje50, May 24 '14 at 17:13

Anton Bessonov · Answer 1 · 2014-05-24T17:10:43.100

One of the alternative is the data uri scheme. You can embded images direct in html or css. But it need also be maintained. See also limitations. Examples stolen from wikipedia:

html:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

css:

ul.checklist li.complete {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

If you don't will mess your "normal" css with data uris, then you can create a dedicated css-file only with images. One of disadvantages is, of course, traffic. Encoded data need more space als binary data.

To reduce traffic you can deliver this files gzipped. Some webservers have extensions.

Joeytje50 · Answer 2 · 2014-05-24T17:19:16.967

You could simply convert each of the icons to a data-URI and use those instead. There's loads of data-URI converters out there to which you could upload your icon, but I've also made my own, extremely simple data-URI converter here, which just requires you to select a file and it gives you the data-URI back right away. You could then add the sprite as a background image using this:

#red-dot {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
    width:5px;
    height:5px;
}

(that data URI was taken from wikipedia.)

The benefit in using data-URIs is that they don't require an extra request from your browser, so they won't slow down pageloads (which is the exact same effect sprites have), because all the data is already loaded right when you load the stylesheet. This is currently the most conventional way to include small icons, other than using CSS sprites. I personally prefer data-URIs, mostly because of the maintenance problems with CSS sprites you described in your question.

with we'll loose the benefit of caching. here's the article for performance https://stackoverflow.com/questions/1574961/how-much-faster-is-it-to-use-inline-base64-images-for-a-web-site-than-just-linki — w3debugger, Jan 23 '20 at 07:56

score 1 · Answer 3 · edited May 24 '14 at 17:08

Another solution can be to use SVG where all image are set in the same area with an id to set each part as display:none or display:block/whatever. an example on hover :

#plate, svg:hover #cup {
    opacity:1;
    transition:1s;
}
svg:hover #plate, #cup {
    opacity:0;
    transition:1s;
}
path {
    fill:green
}
path:hover {
    fill:yellow;
}

the advantage is that it can be resized without loose of quality, can receive transition and color changed.

Alternatives to CSS sprites

3 Answers3