Embedding image in HTML

04/01/2010

This week I had to customize the ‘Access Denied’ page of the proxy. This page was a little bit ugly and I wanted to do something more friendly, fun and beautiful.

But the problem was that to customize this page the proxy settings just have a textarea field. It means that I couldn’t upload the HTML, CSS file nor images.

So the best solution that I founded was to embed the image in the HTML. I just have read about this technique but I’d never did it before.

I’ll describe the steps that I did.

Designing the page

First of all I designed the new ‘Access Denied’ page. I designed it using Photoshop.

PSD to HTML

After I’d designed the page I converted it to HTML.

I did it using my editor. I used the slice image technique due to by doing it I just needed only one image.

So I created a style class named .image and set its background with the image url. After that I put this class in each element of my page that had a image than I just changed the background position to each one.

Converting image to base64

In order to embed the image I’d to convert it from binary to base64 string.

There are many ways to do it. I used a PHP function.

The PHP function that I used was:

<?php echo base64_encode(file_get_contents("myimage.png")) ?>

So this function returns a huge string.

Putting image string into CSS

I got the string that the PHP function returned and pasted it into my style class .image, it means I replaced the image url by the base64 string.

.images{background:url(data:image/gif;base64,THE_HUGE_STRING_HERE);}

That is it

That is it. After this simples steps I copied and pasted the HTML into the textarea field of the proxy settings. Now I have my ‘Access Denied’ page is customized.

You can see the page here: HTML file – Access Denied – Imagem embeded.

Comments

Ruan Carlos
02/04/2010 08:05:57

Very cool man, Old, I saw it a long time ago, but never implemented. It’s great, thx for remember.

Well, you block my net =/ argg.
Tweets that mention Embedding image in HTML -- Topsy.com
02/04/2010 18:57:48

[...] This post was mentioned on Twitter by pererinha. pererinha said: Embedding image in HTML http://danielcamargo.com/blog/embedding-image-in-html/ [...]
Harold
05/04/2010 11:02:47

This trick also works well for embedding images in email HTML. Use an inline stylesheet too, so no remote requests are needed in order for the email to be displayed correctly.
pererinha
05/04/2010 11:10:19

Sure, it is a very good idea to use it HTML emails.

Thanks for your tip

=)
Derrick
05/04/2010 12:51:52

This is very cool!

However, what are the bandwidth implications of transferring BASE64 vs binary data?

However, it will likely be gzip compressed, and it will save another HTTP request.
pererinha
05/04/2010 13:15:39

By using the base64 you’ll minimize the HTTP requests. According to Yahoo it is a good practice to speeding your website.

I think the bandwidth is the same as if it was a image instead a base64 string.
PHPGangsta
06/04/2010 05:46:30

A base64 encoded string/image adds extra ~36% of traffic.
pererinha
06/04/2010 05:58:52

Thanks for this information!
about @font-face and how to embed font in css
06/04/2010 15:00:50

[...] There is a technique that allows you to embed the font in a CSS file. It is almost the same idea of embed the image in HTML file. [...]
Tuomas Hietanen
07/04/2010 06:24:16

Which versions of Internet Explorer does support this?
pererinha
07/04/2010 06:39:54

I tested this in version 8 of IE and it works very well. Unfortunately I my computer just has the version 8 installed so I couldn’t test it in other versions.

Daniel Camargo