Home General CSS background image data: base64?

CSS background image data: base64?

Published on September 9, 2010 by in General

What the heck is all that Gobbledygook in the CSS?

So you have noticed that bit of css that says something like this in the CSS source-code and you have no idea what it could be?
url(“data:image/gif;base64,R0lGODlfMAMEAIABAKysrObm5iH5BAEAAAEALAAAAAAwAwQAAAJOhI+py30Bo5y02ouz3rz7D4biSJbmiabqyrbuC8fyTKPOjedHzff+DwwKh8Si8YhMKku6pvOxjEqn1Kr1is1qt7ynV8cNi8fksvmMTiMLAD4=”) no-repeat scroll 50% 0 transparent

It is a technique called Data URLs and using PHP – or your favourite server-side script – you can generate these nifty little things.

An example of how to generate it in PHP:

.myClassName {
background: url(data:image/gif;base64,<?php echo base64_encode(file_get_contents(“../images/folder16.gif”)) ?>) top left no-repeat;

What you need to know over and above:
You will need to have your CSS file(s) saved as in the PHP extension ( e.g. myCSSFile.php ).
This allows the server to process the PHP code contained in the CSS, so in a way you have a dynamic CSS file creator.

What’s so good about Data URLs?
They aren’t all that weird after all, they actually help conserve bandwidth due to less HTTP requests. This brings us to the next step you need to know!

Caching problems!
The problem with this approach is that you will need to recalculate the string everytime you change the image, otherwise browsers tend to cache what they remember seeing and use that instead!

Tags: , , , ,
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
© Copyright © 2016 · Web Development London UK · All rights reserved
By using the site and/or making use of any of our services you agree to our Terms and Conditions