Call (877) SITE-OPT (748-3678)

Figure 9-15. Caching an inline image with CSS

Chapter 9 - Advanced Web Performance Optimization

Embedded in XHTML files, data URI images are not cached for repeated use, nor are they cached from page to page. One technique to enable caching is to embed background images in external CSS files. CSS is cached by browsers, and these images can be reused with a selector. For example:

ul {list-style:none;}
    ul > li {
    margin:0 0 .1em;
MxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) top left no-repeat;

Now the folder image is repeated for each instance of the li (or you could use a class or ID here as well):

    <li>Testing one</li>

Figure 9-15 shows results in the page in Firefox.

dhtml news flipper

Figure 9-15. Caching an inline image with CSS

And the live example below:

There is one issue with this approach. You must recalculate the Base64 data and edit the CSS file every time the image changes. The problem has a simple PHP solution:

<?php echo base64_encode(file_get_contents(" ../images/folder16.gif")) ?>

This code reads the image and converts it to Base64 automatically at the server. You pay for this editing convenience with some server-side processing.

Copyright © 2002-2018 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In