Guide to Image in CSS to Base64 Data URI Encoding

Guide to image in CSS to Base64 Data URI encoding shows you how to change from background image CSS to data to reduce page loading time. It is important to read our previous guide on Base64 Encoding Schemes and Usage with HTML5 Simplified as we will not discuss about Base64 Data Encoding in this guide to image in CSS to Base64 Data URI encoding again. If you have problem with understanding URI and URL, you can read the linked article, however it is not mandatory to read in this context.

 

Guide to Image in CSS to Base64 Data URI Encoding : Introduction and Official Documents

 

Data URI’s as expected don not work in IE 5 IE6 and IE7, but are officially supported in IE 8. So in these case you need to add a conditional tag with special or rather regular CSS in the head like we use for HTML Shiv :

This is the only thing you practically important for IE. Official specification can be found here :

 
http://www.w3.org/TR/mwabp/#bp-conserve-css-images
 

 

Guide to Image in CSS to Base64 Data URI Encoding : Steps

 

This guide to image in CSS to Base64 Data URI encoding is made as easy as possible. Obviously, it is possible to use self hosted solution but we will use third party free tools, mostly web based for the work, one such example is our own tool :

https://thecustomizewindows.com/cloud-player/CSS-to-Base64-Data-URI/

 

Take that, the CSS was :

The css itself has no meaning. It is just an example. However, the image name is – this.png. So, we need to upload the this.png file through the above tool first. Understand this. Rather do it. For example, we received it :

In this case, we only need the background-image: url(“data:image/jpeg;base64 [omitted]”) part. Omitted because its huge. Actually I uploaded a huge image lazily to give an example. What ever it is, you actually will replace it :

You can omit the curly quotes, you can use tick marks ‘like this’. Due to Microsoft’s excellent added confusion in font families, at front end on browser the quotes, tick marks might look different. This is the whole thing.