Saturday, December 20, 2014

Embed Images Directly into HTML

In HTML, images are defined with the <img> tag.

<img src="url" alt="some_text">

The src attribute defines the url (web address) of the image.
The alt attribute specifies an alternate text for the image, if it cannot be displayed.
If you want to show an image, you write something similar to this in your HTML :

<img src="html5_sticker.png" alt="HTML5 Sticker">

But, sometimes you may want to show an image on your webpage but you don't want to link an external image file. In that case, you can directly embed your image into the HTML without having to link to an external file.

The idea behind it is that the browser interprets the image file in encoded format. So why not we directly put the encoded data in the src attribute of <img> tag. One of the advantages of embedding the image directly into the HTML is Portability.

There are so many online Base64 Image encoder available on the web. Just google it and you can get a list of online converters.

Base64 Image is one such tool which I have used sometimes.

Following is the image tag with src attribute as base64 encoded stream instead of external url/location.

<img src="data:image/png;base64,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"/>

This looks quite ugly. But, check the HTML5 logo below - browser's interpretation for the base64 encoded stream.

No comments :

Post a Comment