Any good alternatives to CSS sprites? [closed]

Solution 1:

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.

Solution 2:

In terms of an alternative, why not try an icon font? There are some good free ones here:

https://pictonic.co/free