[SOLVED] Any good alternatives to CSS sprites?

Issue

I’m working on an app that needs to load a lot of icons. At the moment I’m using <img> tags with the src‘s set to the right URLs. That triggers a lot of request. Even if caching is properly set up there are still a lot of HEAD requests.

I’m looking for a solution that will trigger only a minimum of requests (best would be 1) to receive all of the needed icons. But I don’t like the concept of spriting, since it’s harder to change/replace/add icons in this concept.

Are there any other solutions?

For example, would it be to slow to base64-encode all images to one file on the server, send them to the browser, split them with JavaScript and set base64 src’s to the img tags?

Does anyone test this or different approaches?

Solution

Inline the images in the CSS using the Base64 data-URIs.

background-image: url('data:image/png;base64,.......');

You can convert your images using a custom PHP/node.js/… script or use an online converter such as http://www.greywyvern.com/code/php/binary2base64

or
https://www.useotools.com/image-to-base64

This results in only one HTTP request being made (only the one for the CSS file) but you cannot control caching for each of the inlined resource individually. You need to set up caching HTTP headers for the CSS file.

You can have your server encode the icons on each request for the CSS file so that you don’t need to manually re-convert your icons every time you change them. Some simple caching for the conversion should be included on the server-side.

Answered By – J. K.

Answer Checked By – Marie Seifert (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *