RIFE : Blogs : Embedding images inside the source of a HTML page

Blogs : Archives

My friend JR pointed me to this trick which is detailed in RFC 2557

It turns out that by using a special data: URL scheme you are able to embed any mime data inside a HTML page, the format is as follows:

data:<mimetype>;base64,<data>

<mimetype> needs to be replaced by the mime-type of your data (image/png for instance) and
<data> is the base64 encoded string of the actual bytes of the file.

For instance, look at the source of the image below, or simply click on it and look at the URL in your browser's location bar.

This technique works in Firefox, Safari, Konqueror and Opera. I think it has great potential! Sadly I can't get it to work in Internet Explorer.
I already can imagine very useful applications for this: captcha images, image uploads in blog posts, ...

posted by Geert Bevin in Internet on Apr 11, 2005 10:55 PM : 40 comments [permalink]

Comments

Re: Embedding images inside the source of a HTML page

Maybe this is how Google Maps works?

posted by Anonymous on Apr 12, 2005 12:02 AM

Re: Embedding images inside the source of a HTML page

Spammers have been using this tactic for a long time to force your HTML mail reader to display images of ads and pr0n even if you have the "display offsite images" turned off. Personally, I think its potential for evil outweights the good uses, and I hope it gets phased out of browsers…

posted by Technodaddy on Apr 12, 2005 1:43 AM

Re: Embedding images inside the source of a HTML page

why phase it out? all that needs to be done is make the browser capable of disabling these embedded images along with the "offsite images"

posted by Anonymous on Apr 12, 2005 2:40 AM

Re: Embedding images inside the source of a HTML page

I haven't seen this used in spam yet ~~and I take a keen interest in spammer techniques, working on SpamAssassin. However, spammers are already using another technique to get around the "load remote images" block~~ by mailing a multipart MIME message that contains a text/html and an image/jpeg part with a Content-ID, they can use the RFC-2387 'cid' URL format which is supported in most MUAs to load the image without hitting the remote server. I suspect that's what Technodaddy is thinking of.

posted by Justin on Apr 12, 2005 2:42 AM

Re: Embedding images inside the source of a HTML page

btw I think that strike-out came from the use of "space dash dash space" in my text. Is that considered a way to input a strike span in this comment system?

posted by Justin on Apr 12, 2005 2:45 AM

Re: Embedding images inside the source of a HTML page

Interested, I might have to try that out, but don't know what applications it might have…

posted by trovster on Apr 12, 2005 3:01 AM

Re: Embedding images inside the source of a HTML page

You can also use a JavaScript var or function as the src, and return "x47x49x46x38x39x61x0f..." etc. Most browsers only support XBM (http://www.javaworld.com/jw-08-1996/jw-08-javascript-p3.html) with this method, though, and I read somewhere that XP SP2 removed even that from IE.

posted by Anonymous on Apr 12, 2005 3:58 AM

Re: Embedding images inside the source of a HTML page

Reminds me of the old .XBM image type file, which IE can still read. It's still a seperate file, but the file is an ASCII bitmap of a low-rez black and white icon.

posted by Anonymous on Apr 12, 2005 4:02 AM

Re: Embedding images inside the source of a HTML page

Hi Justin, the comments are simply parsed by Radeox, seems you discovered a macro I didn't know myself either

posted by Geert Bevin on Apr 12, 2005 7:00 AM

Re: Embedding images inside the source of a HTML page

IE has it's own MHTML stuff to embed images in a page as well. Don't know if any other browsers support it but I doubt it.

posted by Anonymous on Apr 12, 2005 10:41 AM

Re: Embedding images inside the source of a HTML page

Got an example of that?

posted by Geert Bevin on Apr 12, 2005 10:50 AM

Re: Embedding images inside the source of a HTML page

I was looking for a way to get soap attachments into html via XMLHTTPRequest. This looks like a potential solution to the problem. I think soap base64 encodes the attachments. If you can yank it out of the soap response, you could just plug it into this and have your images.

posted by Anonymous on Apr 12, 2005 4:25 PM

Re: Embedding images inside the source of a HTML page

At the top of the page, you link to the draft RFC. The official version is standards track RFC2397 and can be found at http://www.faqs.org/rfcs/rfc2397.html

posted by zimage on Apr 12, 2005 4:28 PM

Re: Embedding images inside the source of a HTML page

The problem is that is decreases web usability a small bit - it forces someone who doesn't want to see images to still download (or skip over) the bytes used to store the image. The size of the HTML page increases. One nice thing, though, is that it only generates one "hit" per page if all the images on the page are imbedded like that.

posted by Anonymous on Apr 12, 2005 4:33 PM

Re: Embedding images inside the source of a HTML page

I updated the URL of the draft RFC, thanks.

posted by Geert Bevin on Apr 12, 2005 4:39 PM

Re: Embedding images inside the source of a HTML page

Quoting anonymous: <<< Reminds me of the old .XBM image type file, which IE can still read. It's still a seperate file, but the file is an ASCII bitmap of a low-rez black and white icon.>>>

Actually, I just tried XBM on IE 6/SP2. Ironically it warns of a possibly security issue and then still displays nothing. Works fine in Firefox.

posted by Helge Moulding on Apr 12, 2005 5:56 PM

Re: Embedding images inside the source of a HTML page

Geert, you can see what IE's MHTML files look like by doing a save-as, and then choosing "Web Archive, single file (*.mht)"

Maybe you can use MHTML constructs in ordinary HTML files. That'd be kinda neat.

posted by Ben Donley on Apr 12, 2005 6:45 PM

Re: Embedding images inside the source of a HTML page

I think the chief use for this should be for when you tell a browser to save a page with images. It's a pretty elegant way to get that done, without creating yet another incompatible file format.

posted by Anonymous on Apr 13, 2005 6:46 AM

Re: Embedding images inside the source of a HTML page

Sorry Robert, I deleted your comment since it wrecked the formatting of the blog and didn't add anything new. I hope you don't take offense.

posted by Geert Bevin on Apr 13, 2005 4:15 PM

Re: Embedding images inside the source of a HTML page

This is different from allowing offsite images in email. Images served from a nefarious server can track your image request and validate your email address from a specialized request string. IMHO, this is the biggest problem with external Inline images in email. I don't see this as a problem, rather, it seems like it could be very useful.

posted by recursive on Apr 13, 2005 6:56 PM

Re: Embedding images inside the source of a HTML page

Using this technique, can you stuff images in CSS? I think one of the disadvantages of this is that you can't reuse an image without including it more than once.

posted by Anonymous on Apr 14, 2005 2:07 AM

Re: Embedding images inside the source of a HTML page

Or, you could make an HTML table of all the pixels, except it would take up a ton of space just for small pictures

heh .. there wouldn't even be a right-click save as option, or even a properties option.

Example: http://www.thehomeland.org/pixel

posted by Mike on Apr 14, 2005 3:08 AM

This technique used by spammers

Some of the reasons why mail readers and web browsers offer to disable remote images, is that they are often used as a spy. When the client loads the remote image, this means that the email or the web page is being read. If the image is something like "http://spammer.com/foo.cgi?reader=foo@bar.com", you can tell whether the address exists or not. That's why KMail and other mail clients suggest to disable loading of remote resources.

Considering that, embedded images like the one in this article are not a problem, since they don't need any remote access, thus no information is leaked away.

Of course, they still can be used as "visual pollution", like big pink aggressive text, but that's another thing.

posted by davux on May 18, 2005 8:44 PM

Re: Embedding images inside the source of a HTML page

>>Or, you could make an HTML table of all the pixels, except it would take up a ton of space just for small pictures heh .. there wouldn't even be a right-click save as option, or even a properties option.

hehe, you stole my idea if you mean file size by "space", you are wrong, you may encode it so that it will be even smaller than the original image(if it's BMP , anyway) and than display it with javascript.

but it uses too much RAM about 20 MB for 200/200 or something. but it's good anyway for small pics and good computers. I just wanna know does there exist any software that does this job(encodes image for inseting into html file)? I wanted to write such program for programming project competition.

does there exist any software that does this job(encodes image for inseting into html file)?

posted by Anonymous on Jun 10, 2005 7:23 PM

Re: Embedding images inside the source of a HTML page

posted by Anonymous on Jun 24, 2005 12:34 PM

I like your logo very much!

posted by Patrick on Aug 31, 2005 8:13 PM

Re: Embedding images inside the source of a HTML page

Thanks

posted by Geert Bevin on Aug 31, 2005 8:17 PM

Re: Embedding images inside the source of a HTML page

Image to HTML Converter can be found here, it uses tables to map every pixel!! of your image. Makes your image slow loading, but it gets the job done

http://neil.fraser.name/software/img2html/

-----
High Quality UK Hosting at http://www.Radiumhost.net

posted by Russell on Nov 30, 2005 12:00 PM

Re: Embedding images inside the source of a HTML page

here's a link to a site which converts images into base64 its much faster than the table method in the post above

http://www.motobit.com/util/base64-decoder-encoder.asp

cheers

posted by Tone on Apr 17, 2006 3:23 AM

Re: Embedding images inside the source of a HTML page

Hi all

I just worked on a image to html convertor it works Great for spall images or icon's and stuff but sucks for huge images
here is a link to my blog about it: http://www.dotnetjunkies.com/.../136830.aspx

Good luck and have fun

posted by Warnar boekkooi on Apr 17, 2006 6:16 PM

Re: Embedding images inside the source of a HTML page

Where do I get The base 64 converter?

posted by bashar on Aug 6, 2006 4:02 PM

Re: Embedding images inside the source of a HTML page

A good online base64 convertor can be found here. It has links to other convertors too.

http://www.motobit.com/util/base64-decoder-encoder.asp

posted by Sheepy on Dec 12, 2006 3:03 PM

Re: Embedding images inside the source of a HTML page

in php for converting to base 64 encoding

use

$data = base64_decode($data);

posted by Irfan on Dec 27, 2006 9:38 PM

a good software

I do like pictures, I alway convert pictures to formats that I want. So I know some software that can help you to convert your pictures to the formats you want, You can find this kind of software in http://www.qweas.com/download/graphics/image_converters/ You can have a try, the software is really amazing.

posted by Anonymous on Jan 10, 2007 7:21 AM

Re: Embedding images inside the source of a HTML page

I am trying very hard to extract an image that I have saved in an mhtml file on my computer. How can I find the image *by itself* on my computer? It shows up when I preview the mhtml file in Front Page, but I can't copy-and-paste it to get it by itself. PLEASE HELP! Thanks!

posted by Anonymous on Jun 15, 2007 11:17 AM

Embedding

Great comments. Thanks, I'll look forward to messing around with this. We are working on embedding isssues at http://www.triggit.com Its great fun

posted by zach coelius on Aug 18, 2007 12:05 AM

Re: Embedding images inside the source of a HTML page

I'm a beginner from south america.
I work at a country club that sends html email to its members (text and a single image). Many members use outlook express, if I embed the image

<body>
<p> text </p>
<img src="data:image/jpg;base64,...." alt="img">
</body>

woudl it display even when image blocking is activated?

posted by marco sano on Sep 7, 2007 9:47 PM

Re: Embedding images inside the source of a HTML page

Working on the picture-as-a-table technique mentioned in some of the comments, I have made a version that works on 100x100 pixel blocks on the source image and displays those in a table.

This way it is possible to embed(inline) images of arbitrary size into the html.
Example: http://cgi.di.uoa.gr/~rouvas/embedding/i.html
and documentation (with code): http://cgi.di.uoa.gr/~rouvas/embedding/

posted by rouvas on Jun 29, 2008 10:06 AM

Re: Embedding images inside the source of a HTML page

However, many of these systems can work with embedded images, media files and so can anyone give me an example of a simple PDF file embedded within a HTML page. ...

posted by adam on Sep 19, 2008 2:52 PM

Re: Embedding images inside the source of a HTML page

Does anyone know of any HTML file parsers that go through the file, detects <img> tags and loads/embeds external images into the HTML so that any HTML becomes self sustained?

Such a tool would be truely awesome!

posted by Anonymous on May 14, 2009 8:34 AM

[Delete all selected]