
Data URI scheme is a URI scheme that provides a way to include data in line in web pages as if they were external resources. [WikiPedia]
Why you may want to start embedding images in CSS ?
- It reduce the number of http requests: instead of 1+N HTTP requests (1 for aggregated CSS file and N for images) you'll get 1+1 requests (1 for aggregated CSS file and one for CSS file with all images), which gives you faster page loading and lower server load.
- CSS is cached by browsers and these images can be reused with a CSS selector/class (<li> are obvious candidate if they use images)
- Attention Internet Explorer 5 to Internet Explorer 7 do not support inline images!
NOTA: Drupal has a module “CSS Embedded Images” to automatize the inclusion of external images in CSS, while Joomla has nothing
something that could be done in Joomla platform, in an extension like JFinalizer….or in the Gantry framework!
I did start looking at the code of “CSS Embedded Images” and I am trying to make it a class for Joomla 2.5
Compatibility
- Google Chrome
- Firefox 2+ / Gecko
- Opera 7.2+
- Safari
- Konqueror and derivatives
You can create data URL with
<?php echo base64_encode(file_get_contents("http://www.acme.com/images/myimage.png")) ?>
or by using one of the many online generator
(X)HTML Image Embedding example
<img alt="Embedded Image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS Image Embedding Example
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
XML Image Embedding Example
<image>
<title>An Image</title>
<link>http://www.your.domain</link>
<url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...</url>
</image>