Image inclusion in HTML With Data URLs

May 5, 2008 16:47 GMT  ·  By

Every element included in the Web has an address designated by an URI (Universal Resource Identifier). The URIs can be used in various ways inside the HTML code of a web page. For example, they can indicate a link to an external file, include a file or script into an existing document and more.

The data URI scheme allows you to include images in HTML documents without the need to mention an external file (a link to a certain image file). The inline images must be encoded in base64 and their ASCII representation will be decoded by the web browser (without a supplementary HTTP request) when the HTML page is requested by visitors.

Not all web browsers provide support for data URIs: while Firefox and Safari browsers are compatible with this standard, Internet Explorer will not render images included in HTML documents using the data URL scheme. It seems that in order to overcome this problem, a simple technique is available: the encoded image in base64 can be decoded by a server side script and then rendered by the Internet Explorer web browser.

Practically, the image source is contained in the equivalent ASCII code in base64, obtained with an adequate converter. There are many free or open source converters available over the Internet both as standalone desktop applications as well as server side scripts.

The following line of HTML code will allow you to implement an inline png image, but ASCII code must be replaced with the ASCII characters sequence given by the converter output (width and height values should be close to those corresponding to the original image):

code
The usage of inline images encoded in base64 is useful when you need to include multiple images in the same document because the number of concurrent connections is reduced and the network resources consumption will have a low level. By having a smaller number of http requests, the overall browser performance will be increased. In order to maximize the compatibility, a server side decoding solution should be used.