Data URI [CSS] Sprites

FAQ

What is it?: DURIS (Data URI [CSS] Sprites) is a new method to manage website's background images. It's aimed to replace classical CSS Sprites.

Why is it better than CSS Sprites?

Now with the new technological approach you can combine final file with all images that:

allows you to apply any corrections to your make-up painlessly;
allows you to minimize number of requests for design-related data that is used on the webpage;
uses text (non graphic) format of image data presentation;
allows you to create fully semantic HTML/CSS-code (w/o any non-semantic constructions for design purposes);
solves all problems with scaling for background images;
combines images of different types and axes of repetition.

How does it work?: For all modern browsers a separate CSS file with background images with the help of data:URI is created. This file can be called on deferred window.onload and loaded with other images (or even after them). The second CSS file is created especially for IE6/7, and it's called via conditional comments. This file contains all background images encoded with mhtml.

How does the service Data URI Sprites work?: It analyzes HTML code of entered URL for website (or separate webpage), finds all CSS files (and embedded styles within style), finds all background images from these files and merges CSS code into one (optional). Then all rules related to background images are removed from the main file and this file is optimized with YUI Compressor (optional). Background images are encoded with base64 and added to 2 files: for all modern browsers (b64.css) and for IE (< 8 version) (mhtml.css). Then all additional files are inserted before the end of HTML file, and into the head call to optimized main CSS file replaces the original one(s). Then an archive with all required files is formed and ready to download.

What does option "Compress CSS" mean?: With an option "Compress CSS" all source CSS files will be optimized with YUI Compressor. This allows you to decrease overall size of CSS files up to 20–30%.

What does option "Merge CSS" mean?: "Merge CSS" option allows you to combine all CSS files into one (out.css).

What does option "Add Gzip" mean?: "Add Gzip" option added to the archive with results .gz versions of final CSS files. This can be used with static archives (with Apache or nginx you can use files .gz to serve compressed versions of your files).

What does option "MD5 Name" mean?: "MD5 Name" option adds for every CSS file name unique MD5 hash that is matches all used background images. This allows you not to replace existing files that have not been changed.

What does option "Insert to footer / header" mean?: Generated HTML/JavaScript code can be placed to the header (head) of the document on to the footer (before </body>).

What does option "Path relative / absolute" mean?: You can choose how CSS files will be inserted to HTML file — with relative or absolute paths.

What does option "Limit size of images 10k / no limits" mean?: Browsers have some limits for data:URI / mhtml maximum file size. Also large amount of base64 encoded data included into CSS file will increase its size. So usually background images included into CSS file are now greater than 10 Kb. If you are sure about disabling such restriction you can choose no limits option.