Com desar una imatge com a variable JavaScript i després mostrar-la en una etiqueta <img>

Storing an image (or any other content type) in JavaScript (or CSS) is done by specifying a special URI scheme for data. Basically what you do is to create a normal JavaScript String object using a specific format, where you specify the content type, character encoding and the data encoded as a base64 string.

A simple example would be:

Resulting in one HTML page with an embedded image.

Viewing the page with Firefox with the YSlow plugin.

Obviously converting raw binary data to a base64 format will increase the data size. To compare the sizes I extracted the JavaScript image variable to an own JavaScript file on the disk, and then compared the original image file against the newly created JavaScript file.

The original image is around 25.5 KB large while the base64 version is around 34 KB. The data size was increased with around 33.3%.

Encoding other various files I got the following results:

Based on these figures a typical base64 encoding increases the data size with around one third (36%) of the file size. However, this size can of course later be decreased by using GZIP compression.However, this size can of course later be decreased by using GZIP compression.

According to several sources, the Data URI scheme are only supported in modern browsers, really starting from Internet Explorer 8 and forward (Internet Explorer 7 does support it, but with some heavy constraints).

As an experiment uploaded my test page and used Browsershot to give me a screen shot of the page from 65 different browsers on various operating systems.

65 different combinations of browsers and operating systems.

As displayed above, it works on Firefox 3.6+, Chrome 9.0+, Safari 3.2.3+, Opera 9.54+ and Internet Explorer 8+. But not in Internet Explorer 6 or 7. However, there is an alternative solution available for those browsers as well.