CSS Embedded Images

How does it work?

According to Wikipedia, "the 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." That means that rather than having a URL telling the browser where to find the image you actually have the image data right there on the page so the browser does not have to make an extra request to get it. This particular module is only concerned with images referenced in CSS, so for an example let's look at a declaration in Garland's CSS:

ul li.expanded {
  background: transparent url(images/menu-expanded.gif) no-repeat 1px .35em;
}

When we embed the image into the CSS, it becomes:

ul li.expanded {
  background: transparent url(data:image/gif;base64,
  R0lGODlhCgAKAMQUAM/Q0vT09Ojr7s7Q0dLU1f7+/u/z9+Dj5tfX1+Dg4MrKyu
  fq7tfZ27m5uba2tsLCwvv7+7W1tbS0tP////P3+wAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAAKAAoAAAU0ICWOZGkCkaRKEU
  AtTzHNU/Es1JDQUzKIggZkBmkIRgTEDEEgGRyBgMNQYigUDBPlcCCFAAA7) no-repeat 1px .35em;
}

The actual process is a bit more involved than that, but this is the general concept. By default, embedded images are placed in a separate CSS file to allow for parallel rendering of other site styles while the relatively large image data is being downloaded.

This processing is only done when Drupal's CSS optimization feature is enabled under Administer > Site configuration > Performance.

Compatibility

• Firefox 2+ / Gecko
• Safari
• Google Chrome
• Opera 7.2+
• Internet Explorer 6+ (maximum length of 32 KB; IE 6 and 7 fall back to unmodified CSS)
• Konqueror and derivatives

This module provides fallbacks to the unmodified CSS for IE 6 and 7. MHTML support was broken by a Microsoft security update and is no longer a part of this module.