How to use images base64 encoded inline an img-tag

Published
by
karrock
on March 13, 2010
in HTML
. 2 Comments Tags: .

It´s feasible to put elements (like an image) in raw format (base 64 encoded) directly into an HTML-tag. I will show you an example with an img-tag.

First of all you need your image in a base64 encoded format. For this you can use the base64-decoder-encoder of motobit.com. Just choose your file to upload and afterwards hit “convert the source data”. The base64 encoded string will be shown in a textbox. For this example I use the external-link-image of wikipedia. And I´ll get back the following base64 encoded string:

iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEVmmcwzmcyZzP8A
ZswAZv////////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8k
mrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC

If you have this, you need to extend your normal img-tag with the information about an inline used image in base64-format. You put this information in the src-attribute. After the keyword “data:” you have to put the mime-type of the encoded image. We have to use “image/png”. If you put all together it looks like this:

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+P
AAAAFVBMVEVmmcwzmcyZzP8AZswAZv////////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREF
UGFcly0ESAEAEA0Ei6/9P3sEcVB8kmrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxD
VmAAAAAElFTkSuQmCC" border="0" alt="an image base64 encoded inline" />

This can be very useful if you e.g. want to give an image-tag or an html-code-snippet to a client or a colleague. So there is no need to copy or send the used image. It´s just enough to copy the html-code-snippet. Have fun … :)

No related posts.

2 Responses to “How to use images base64 encoded inline an img-tag”

Feed for this Entry Trackback Address
  1. 1 fajar
    March 15, 2011 at 05:02

    Hi There!

    Thanks for the tutorial. I tried this create email with inline images but it doesn’t work for gmail. Gmail insert wbr tags between the base64 string and it show up as string. Any idea?

  2. 2 karrock
    March 16, 2011 at 16:43

    Hi Fajar.

    Emails are a special thing, because it depends on the mail and on the email client the user use. You have to use HTML-Mails.
    But if a client like Gmail does not support this tag (maybe because of security reasons) it´s hard to make it run.

    I have no ideas, but I think this will not work. But one suggestion. Use a ad-mail you got from someone else (maybe amazon, ebay, …) and look how they integrate the images in the mails. I think there is a way to put the images at the end of the email and use them as reference in the html-code. But I have never tried this.

    Good luck and let us now how you got it running! :)

Leave a Reply

CAPTCHA Image
*