Select Page

Speed up your web pages by embedding images in CSS.

Speed up your web pages by embedding images in CSS.

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 Sad smile 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>

About The Author

I worked with various Insurances companies across Switzerland on online applications handling billion premium volumes. I love to continuously spark my creativity in many different and challenging open-source projects fueled by my great passion for innovation and blockchain technology.In my technical role as a senior software engineer and Blockchain consultant, I help to define and implement innovative solutions in the scope of both blockchain and traditional products, solutions, and services. I can support the full spectrum of software development activities, starting from analyzing ideas and business cases and up to the production deployment of the solutions.I'm the Founder and CEO of Disruptr GmbH.

Categories