fragmente

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 …

Related posts:

1. Aptana IDE Webdevelopment