Data: CSS Sprites URIs - A Modern Approach to CSS Sprite Generation

The torment with the standard approach of using CSS sprites, namely the difficulties of modernization and, in some cases, the difficulties of optimal layout, made me look for an alternative option for optimizing image loading. Once again, reading a habra article, I came across an interesting approach for implementing sprites using data: URI. In the course of discussions and conclusions, the weaknesses and strengths of this approach were identified. One of the significant drawbacks of the new approach is the complexity of assembling the final CSS. However, when using data: URI, there is the possibility of automating the process. Accordingly, it was decided to create software for the automatic assembly of data: URI sprites.

Data: URI CSS Sprites

A new approach to generating CSS sprites based on data: URI decided to call Data URI Sprites - . The name is a bit unusual - but unique and well remembered. As it turned out, once upon a time there lived a vase painter named Duris .

What is it

First of all, it is a fully automatic analysis and assembly of CSS sprites based on data: URI.
Some characteristics of DURIS operation:
1) loading and parsing of all internal (style) and external (link) styles
2) allocation of background-image to a separate external style
3) loading and coding in base64 of all images that are found in styles
4) optimization of rules with repeated background-image in styles
5) removal of CSS rules with images that are absent on the server (eliminates unnecessary unnecessary requests)
6) special data connection: URI of sprites for all browsers and separately for IE6, IE7 Vista (for more details in FAQ
7), another.

“Why do I need this?”

The modern approach to creating CSS sprites
- allows you to painlessly make adjustments to images and layout;
- makes it possible to minimize the number of requests to the server to obtain information that relates to the design of the page;
- allows you to use fully semantic layout;
- fixes scaling issues for background images;
- combines images of different types and repetition axes.
- everything is created in automatic mode;

IE and others

During the development of the implementation of data: URI sprites, the most common CSS rules were analyzed. Also, everyone’s favorite IE browser was taken into account. Who does not yet know IE does not support data: URI technology up to version 8. However, for him there is an alternative option for implementing sprites - based on MHTML technology. That is, in other words, at the moment we have a full range of solutions for all modern browsers (99% percent of all browsers used). But as always, a fly in the ointment throws up Microsoft. During testing, a bug was found in MHTML technology in Vista IE7 - namely, the IE7 browser in Vista refuses to display images when caching an MHTML file (due to poorly documented security problems when using MHTML in Vista IE7). If you make the file non-cacheable, then everything works as it should, but in the case of caching, background images are not displayed. In general, Microsoft still made it so that "The chain has broken . " In other words, at the moment, for the IE7 browser in Vista, the DURIS implementation does not work exactly as it was originally intended. The IE7 Vista verification algorithm is introduced in the connection of styles, and in case of such, background pictures are connected in a standard way. Statistics show that users who use IE7 under Vista are about 5% percent. In any case, we already know that Data: URI technology will be normally implemented in IE8. Although, frankly, there are big doubts that the developers of IE will again program something wrong.

Main advantages

We single out the two most important advantages of using the modern approach to generating CSS sprites:
1) all background images placed in an additional stylesheet are loaded in one connection to the server - this circumstance reduces the load on the server and speeds up the display of background images.
2) the assembly of the final CSS sprite file is automatic - this allows you to painlessly upgrade images.

What do we have

Today we have a stable beta version of DURIS, which works out all CSS files that it feeds to it. Specific rules such as filter: AlphaImageLoader,! Important are also worked out. I am sure that there are still unaccounted moments / cases that, I hope, with the help of a respected community of readers, we will jointly determine. All that is required is to check your / any site and see what happens as a result. Determine if there are processing errors? Does the result satisfy? Or maybe there is an idea to improve the methodology / algorithm?

What will we have

The DURIS kernel is developed in the Java language and is self-sufficient (i.e. it does not depend on the site). It is assumed that after receiving the release candidate, the kernel source code will be posted in the public domain under the OpenSource license. The kernel works from the command line like YUICompressor works. This will allow you to conveniently integrate the automatic generation of CSS sprites into your projects. Those who program in Java, if desired, will be able to directly call the methods of the DURIS kernel.


The developed method / algorithm for automatic generation of CSS sprites based on data: URI is unique in its kind and has no world analogues. This once again proves that the Slavic people are also able to invent innovations, and not just good / bad bikes.
A FAQ is posted on the site , which details what and how it works. If something is not clearly described, ask questions in the comments.

Starring Ruslan Sinitsky, Nikolai Matsievsky ( sunnybear )