General

There are many approaches to improve the performance of websites. One possibility is to reduce the amount of HTTP-Requests needed to display a page.
While loading a page, HTTP-Requests are done for each resource. That means, every additional loaded file (Images, CSS, JavaScript) needs an request to the server. This problem can be softened by the use of Output Caching to improve the delivery of pages. But the count of server requests is not affected by doing that.

Bundle files

There is only one possibility to reduce server requests.
In one request we have to bundle many requests.
That means in one transferred file, many files must be contained. One technique to do this are so named CSS-Sprites. The idee is to join several images of same format at known pixel positions in one image file. Later in the browser, only the needed part of this large image is shown. Unfortunately the work with sprites is complex and very wasteful.

DATA-URI

A similarly way provides DATA-URI. DATA-URI means, include a Resource that is referenced by URI instead the URI. Simply expressed it is the insertion of i.e. image files in a HTML, JavaScript or CSS file.

When including the image data they must be Base64 encoded. As a result of this the image data will increase one third in size of the source file. This disadvantage can be compensated by compressing the destination file. To avoid that the resulting file is transferred in every request, losing the advantages it should be cached on the client.So a CSS file will be the best way to include images and it is even a simple process to do this.

It is to notice that the proper size for included images is restricted by webbrowsers and DATA-URI is not supported by every browser. Except IE 7 and older versions DATA-URI is supported by nearly all current browsers.For the maximum size limit of DATA-URIs exists no official statement. The from RFC demanded support for a size up to 1 KB is wide outbidden by browsers. As a maximum 4 KB should be reliable value. So far we know this is accepted by all browsers.When a size increase of one third takes effect (during base64 encoding), a maximum size of 3 KB for source files should be assumed.

Use

Denapp CssImageInclude joins CSS files and the referenced image files. New corresponding CSS files will be created (the original file name is prefixed by a defined string) so that source files are not overwritten. When a client requests for the file you can determine the browser type and deliver the corresponding file version. The DATA-URI scheme needs to insert the mime type of the included file. Denapp CssImageInclude recognizes mime types by the following file extensions:

• .bmp
• .gif
• .ico
• .jpe, .jpeg, .jpg
• .png
• .tif, .tiff

Following is an example for a CSS snippet:

CSS source data

.imageBox
{
width: 100px;
height: 100px;
background-image: url(images/image.png);
}

CSS inline image data

.imageBox
{
width: 100px;
height: 100px;
background-image: url(data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9h
AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5
ccllPAAAAFRJREFUeNpi/P//PwMlgHHoG8AAMgAbdnV1
TSBGHRMeg+ejG4INMBFwHUFDmIjwIl5DmIgMJ3tKDFiw
Z8+eRHINwKsZb/S4uLjMJ0Yd42heYAAIMAAfs3pWzwM4
cgAAAABJRU5ErkJggg==);
}

Examples for command line

The following example includes the in the 'Theme.css' file in 'C:\Published' directory referenced image files up to 3 KB size in the new created file 'optTheme.css':

cssimageinclude.exe /target:"C:\Published\Theme.css" /prefix:"opt"
/maxsize:3072

The following example includes the in all CSS files in 'C:\Published' and subdirectoriesreferenced image files up to 3 KB size in the new created corresponding files with prefix "opt":

cssimageinclude.exe /target:"C:\Published" /prefix:"opt"
/maxsize:3072

(3 KB filesize maximum and prefix "opt" are default values which you can omit)

Download Denapp CssImageInclude.

Conclusion

DATA-URI is a good solution, for websites with many small images. The achieved performance gain is not a revolution, but it is one of many pieces for a better efficiency and the small effort always justifies the usage.