Responsive CSS sprites with background-image prope

Question

I found very useful tool for creating the responsive sprite images. http://responsive-css.spritegen.com/

Unfortunately the sprites are generated as img tags and create own HTTP request. Is there any elegant way how to do responsive CSS sprites with background-image property?

Answer 1

Yes, use a data-url. The image-bits can be embededed directly in your stylesheet. You could also embed the data-url in the src property of an image tag.

In a stylesheet, it looks like this:

    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACAQMAAACnuvRZAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzA0LzE0Kb6O2wAAAAxJREFUCJljeMDwAAADhAHBgGgjpQAAAABJRU5ErkJggg==)

That's a data-url bg image for a 2x3 transparent png image (just for example -- it's small).

data-urls make sprites obsolete -- you can embed multiple data-urls instead of one sprite, and there are no extra http calls (in fact, it's one less).

You can easily generate one from an existing image. Here's an online tool: http://dataurl.net/#dataurlmaker