An image in a URL

Lifehacker has a post on sticking an image inside a URL.

I posted the following image using the data in the img url. I had to disable the rich text editor to do it, but it works for me.


If you don’t see it then that means you are probably using Internet Explorer. It may be that they just never got around to adding it or they thought it was a useless feature. It supports something similar in its use of mhtml so the ability is there but not the desire.

There are some good reasons:
In the old days of slow connections for everyone it was good to break up pages into small pieces. If you wrote your html right then the page would load and render quickly. After that the images would come in and fill everything out. Netscape would not render tables until it knew the sizes for everything or it would guess and then have to render again if there was an error. The trick was to get the top part of the page to load quickly and then while that content was being read you had time for the lower portions to fill out.

The other reason is that this trick uses base64 encoding. Base 64 (aka. quadrosexagesimal) uses A-Z, a-z, and 0-9 along with + and / to express binary data in ascii. While it does allow data to be carried in a different manner it is not efficient. It can take up as much as 33% more space to store something as Base64 than as pure binary data.

The encoding is used in email attachments, but even there it is better to just link to images rather than to include them.
I have also used this to encode a full page with graphics into 1 php file. It just takes some creativity and understanding of the header() and base64_decode() functions.

Anyway, if you are interested in trying out the data in a URL trick you can generate one yourself here: Data URL Maker.

0 Responses to “An image in a URL”


  1. No Comments

Leave a Reply