Navigation

RSS 2.0 New Entries Syndication Feed Atom 0.3 New Entries Syndication Feed

Show blog menu v

 

General

Use it

Documentation

Support

Sibling projects

RIFE powered

Valid XHTML 1.0 Transitional

Valid CSS!

Blogs : Archives

< Continuations != continuations   ThoughtWorker Obie Fernandez points to RIFE >
Embedding images inside the source of a HTML page

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.

RIFE Logo

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?

FB

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…
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"
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.
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?
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…
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.
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.
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 ;)
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.
Re: Embedding images inside the source of a HTML page
Got an example of that?
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.
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
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.
Re: Embedding images inside the source of a HTML page
I updated the URL of the draft RFC, thanks.
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.

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.

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.
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.
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.
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.
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 :p heh .. there wouldn't even be a right-click save as option, or even a properties option.

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

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.

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)?

Re: Embedding images inside the source of a HTML page
:D
M.
I like your logo very much! 8)
Re: Embedding images inside the source of a HTML page
Thanks :-)
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
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
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
Re: Embedding images inside the source of a HTML page
Where do I get The base 64 converter?
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
Re: Embedding images inside the source of a HTML page
in php for converting to base 64 encoding

use


$data = base64_decode($data);

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.
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! :)
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
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?

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/
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. ...
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!

Add a new comment

Comments on this blog entry have been closed.

< Continuations != continuations   ThoughtWorker Obie Fernandez points to RIFE >
 
 
 
Google
rifers.org web