Base64 Encode Images

Sometimes, Base64 encoding images can be a very smart move, for instance to reduce the number of (small) images that need to be loaded on a page. You can simply embed a base64 encoded image into your HTML or CSS using a so called Data URI.

Base64 Encode Your Image

Use the tool below to easily encode your image, or base64 decode an image here.

Using this tool you can base64 encode your own image:

Cut into 64 char chunks for "readability"

---

How To Embed a Base64 Encoded Image

For HTML, it works like this:

<img src="data:image/jpeg;base64,<imgdata>" alt="alt text" />

For CSS, it could for instance look like this:

background-image:url(data:image/png;base64,<imgdata>);

The first bit after the data: there is the MIME type, there are a couple of options for the mime type:

• image/jpeg for .jpg and .jpeg files
• image/png for .png files
• image/gif fir .gif files

Browser Compatibility

It's important to note that Internet Explorer up until version 7 lacks support for base64 encoded data URI's. Using conditional comments, one could work around that by offering a "normal" download for IE users. Also, IE8 limits data URI's to 32 KB.

Other Notes about Base64 Encoded Images

Some things to keep in mind when using Base64 data URI's:

• You should be aware that serving Base64 Encoded images in HTMl prevents the browser from caching the image, this is not true if the image is in your CSS though, of course.
• Make sure that you have GZIP enabled on your server, as that saves a large amount of bandwidth for the output.
• For readability, a Base64 encoded string / image may contain whitespace, Base 64 NL's tools therefore has the option to add a carriage return every 64 chars.