Converting small images to data-URLs is a great way to eliminate HTTP requests and decrease loading time for your pages. Using PHP‘s base64_encode() and base64_decode() functions, we have the power to convert images to data-URLs and vice-versa. This article explains how it all works, and shows some different ways of converting back and forth between original and encoded images.

Decoding Data URL Images

That’s sort of a “quick-n-dirty” technique but it works1. That code will output the image as a string of base64-encoded gibberish, which I will not utter here. When encoding the exact image provided above (feed-icon.gif), we get the following code:

So to give you an idea of the actual difference in size between the base64 code and the original image:

Original image size = 766 bytes

Encoded image size = 1046 bytes

In general, base64-encoded images are a bit larger than the original image. But that’s okay because (in most cases) saving an extra HTTP request is better for performance than a few extra kilobytes of code. And so, now that we’ve encoded the image, we can display it in our web pages like so:

Decoding Data URL Images

The easiest way to decode a base64-encoded image is to view the image in a browser and then just do a “Save as…” somewhere on your machine. Of course, you can also use PHP’s base64_decode function to convert encoded gibberish back into original shape. This works great for text content, but for images we need to include the proper header when displaying as web content: