Embedding images into your CSS is one of those things that might sound unfavourable but in fact gives you many benefits. First and foremost it can lower the number of requests your webpage needs to make, every connection to every resource requires a handshake, negotiation and then download. The more you have in one file, generally the better the performance. This is why some tools will give hints such as embedding the image into the CSS or using Sprites (which I will not cover in this article, and which I think are a horrible HACK in general).
Please bare in mind, it is recommended you only do this for very small images, maximum 2KB in size – don’t use this technique for large images as you have to remember that the browser is going to be needing that CSS file in order to render your pages, so if you have a enormous CSS file it is really going to have an opposite effect and will cause serious bottleneck to your web page load times.
So if you have things like buttons, small badges, small background images then you should seriously consider embedding them into the CSS to save on requests and resource load times.
So this is achievable by generating a BASE64 encoded string of the image file and then referencing it in CSS, much like when you embed an image into HTML IMG tags. We have a tool already which can take an image file and convert it to a BASE64 embeddable string which you can find below.
Let us know what you think of the tool.
How to embed image into CSS
The first thing you are going to want to do is convert your image into a BASE64 encoded string, the tool above can do this for you, and here is an example image I have done:
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEUAAAAdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHBsdHBsdHRsdHBsdHRsdHRsdHRsdHRsdHRsdHRsdHRsbLR8cKR4dHRsdHRsdHRsdHhsbLh8cJR0dHRsdHRsdHRsdHRsdGRoQkzkRjjgdHxwdHRsdHBscKh4RkTkQlzoeGBodHRsdHRsdHRsdGxoPnjwShDUdHRsdHRsdIRwRjjgPpT4dGxodHRsdHRsdGhodGxodHRsdHRsdHRsdHRsdGhodGxsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRv////7os7KAAAAgnRSTlMAACwUkJMVAgMg0P2sDjFtfIRxYGzA/vRALsjj7fxRSs/uo0/S97vi1deG5Ln1+1617/ngjxpi8wkzVVtHHjDRzhM+d2AZZXU02JE6TpdYf4ofJZV6Vpw/X68wb4CYsreTnUFBWg0POypBlTyNRxpORAplhHsFC4d8agEvagwRWGcm60v5hgAAAAFiS0dEg/y0z9IAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBRAONDUj+gG9AAAA40lEQVQY02NggAFGRiZmRgYkwMjIwsrGyAhmsXMwAgEnFzcPLyOIz8cvICgkLCIq1iQuwQjkS0pJy8g2gYGsHCODPKtCExwoKikzqKgi+GJq6hoMsk2aWtpQAR1WblUGXT19RgkDQ24xI2MTUzMxcwYudU5GRgtLK2sbW3ZGO0N7BlYHRydnF0dGRlc3dw9XTy8Gb2sfXz//gMCg4JDQsPAIDwZms8io6JjYuPiExKRknpRUhjR5pfSMzKxsn5zcvPywgkKgS73DiopLSsvKKyrDmMB+q6qukatlZKyrb2gEehYAric3QRp0bvoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMTZUMTQ6NTI6NTMrMDI6MDDFuhn/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTE2VDE0OjUyOjUzKzAyOjAwtOehQwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==
To embed this into CSS you would do this:
.myclass {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEUAAAAdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHBsdHBsdHRsdHBsdHRsdHRsdHRsdHRsdHRsdHRsdHRsbLR8cKR4dHRsdHRsdHRsdHhsbLh8cJR0dHRsdHRsdHRsdHRsdGRoQkzkRjjgdHxwdHRsdHBscKh4RkTkQlzoeGBodHRsdHRsdHRsdGxoPnjwShDUdHRsdHRsdIRwRjjgPpT4dGxodHRsdHRsdGhodGxodHRsdHRsdHRsdHRsdGhodGxsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRv////7os7KAAAAgnRSTlMAACwUkJMVAgMg0P2sDjFtfIRxYGzA/vRALsjj7fxRSs/uo0/S97vi1deG5Ln1+1617/ngjxpi8wkzVVtHHjDRzhM+d2AZZXU02JE6TpdYf4ofJZV6Vpw/X68wb4CYsreTnUFBWg0POypBlTyNRxpORAplhHsFC4d8agEvagwRWGcm60v5hgAAAAFiS0dEg/y0z9IAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBRAONDUj+gG9AAAA40lEQVQY02NggAFGRiZmRgYkwMjIwsrGyAhmsXMwAgEnFzcPLyOIz8cvICgkLCIq1iQuwQjkS0pJy8g2gYGsHCODPKtCExwoKikzqKgi+GJq6hoMsk2aWtpQAR1WblUGXT19RgkDQ24xI2MTUzMxcwYudU5GRgtLK2sbW3ZGO0N7BlYHRydnF0dGRlc3dw9XTy8Gb2sfXz//gMCg4JDQsPAIDwZms8io6JjYuPiExKRknpRUhjR5pfSMzKxsn5zcvPywgkKgS73DiopLSsvKKyrDmMB+q6qukatlZKyrb2gEehYAric3QRp0bvoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMTZUMTQ6NTI6NTMrMDI6MDDFuhn/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTE2VDE0OjUyOjUzKzAyOjAwtOehQwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==);
}
And thats it!