Blog Objective

This is a blog that attempts to make life easier by noting down the author's accrued knowledge and experiences.
The author has dealt with several IT projects (in Java EE and .NET) and is a specialist in system development.

19 April 2012

How to embed images in a HTML page without ActiveX

We have this requirement to ensure that the saved (X)HTML is completely self-contained.
This means that displayed images need to be embedded. Ideally, no additional plugin (e.g. ActiveX, Applet, Flash, etc.) is required.

Therefore, instead of using a img tag with the src attribute that refers to an remote image, the src attribute could actually embed the entire image that is encoded using Base64.

The magic is to use the data URI scheme.

E.g. <img src="data:image/png;base64, <Base 64 encoded data>">

This is supported in Gecko-based (Firefox) and WebKit-based (Android, Safari, Chrome) browsers. Trident-based (IE 8 and 9) are also supported.

No comments: