Speed up your web pages by embedding images in CSS.

Tweet

Share

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>

You might also like:

0 days ago

Joomla Mootools and jQuery Compatibility

In this series of post I will outline some common techniques to help Joomla extensions development

0 days ago

cedTag 2.5.3 for J2.5 Released

CedTag  has been updated to version 2.5.3 and correct a lot of bugs and contains some nice fe

1 days ago

cedThumbnails 2.5.5 for J2.5 Released

CedThumbnails has been updated to version 2.5.5 and contains 1 new features for both Joomla 1.7 an

1 days ago

cedSmugmug 2.5.2 for J2.5 Released

CedSmugmug  has been updated to version 2.5.2 and correct some bugs and contains some nice fe

19 days ago

cedTag 2.5.1 for J2.5 Released

CedTag  has been updated to version 2.5.1 and correct a lot of bugs and contains some nice featur

19 days ago

SecurityImages 6.0.3 for J2.5 Released

SecurityImages has been updated to version 6.0.3 and correct 1 bugs for both Joomla 1.7 and Joomla

40 days ago

CedTag BETA 2.5.0 for J2.5 Released

cedTag  has been released and it is still beta, it has been made available to gather feedback

40 days ago

CedThumbnails 2.5.3 for J2.5 Released

cedThumbnails  has been updated to version 2.5.3 correct 3 bugs and contains two new important

CedThumbnails