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:





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:

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: