Embed Base64-Encoded Images Inline In HTML

Here is how you can embed an image in HTML inline. This is similar to how you embed an image in a HTML email message.

To create one you will need to encode you image file as base64 and then embed that base64-encoded image as follows…

<img src=”data:<MIMETYPE>;base64,<BASE64_ENCODED_IMAGE>”>

<img src=”data:image/png;base64,iVBORw0KGgoAAAANS… (see source for full base64 encoded image) …8bgAAAAASUVORK5CYII=”>

The up-side is that the image is stored with the HTML, so if you download a webpage’s HTML, it is packaged with the image files in one single file. That also means one single request to the server, and no separate request for the image file.

The down-side is that the image is base64 encoded, so it is much larger than it’s binary sibling. This makes the use of this rather limited.

Resources

• RFC2397 – The “data” URL scheme
• Wikipedia – Data URI scheme

Comment