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.
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.
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
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.
Denapp CssImageInclude joins CSS files and the referenced image files. New corresponding CSS files will be created (a name attribute is appended to the original file name) 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:
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 'Theme.img.css':cssimageinclude.exe /target:"C:\Published\Theme.css"
/attribute:"img" /maxsize:3072
cssimageinclude.exe /target:"C:\Published"
/attribute:"img" /maxsize:3072
Download Denapp CssImageInclude.
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.