Code: IE workarounds data URI

Chapter 9 - Advanced Web Performance Optimization

PHP makes insertion of the Base64 equivalent of an image easy:

ul {list-style:none;}
ul > li {
    margin:0 0 .1em;
    background: url(data:image/gif;base64,<?php echo base64_encode(file_get_
    contents("../images/folder16.gif")) ?>) top left no-repeat;
    height:14px;
    text-indent:1.5em;
}
</style>

Now when your server parses the CSS file, it will automatically encode the binary image file into Base64 and send the encoded inline image data directly within the CSS file.

Next you need to add browser sniffing to deliver the image for Internet Explorer and the inline image for all others. You could do this within the CSS file with PHP or with conditional comments, like so:

<!–[if gte IE 5]>
    <link type="text/css" rel="stylesheet" href="ie.css">
<![endif]-->
<!--[if !(IE)]>
    <link type="text/css" rel="stylesheet" url="notie.css">
<![endif]-->

where the ie.css would have a normal image reference:

ul > li {
    margin:0 0 .1em;
    background: url("/images/folder16.gif") top left no-repeat;
...

For more information on this technique, see http://en.wikipedia.org/wiki/Data:_URI_scheme.