PHP Script To Encode & Decode Data URLs

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.

Decoding Data URL Images

So we start with a small image named, say, “feed-icon.gif”:

We then convert to data-URL format by encoding with base64_encode()¹:

<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>

This will output the image as a string of base64-encoded gibberish, which I will not utter here. It begins and ends with these characters:

R0lGODlhEAAQAPcAAP+JAP+LAP+vWf ... ceZECFAtPbhAkijCBVUAAOw==

And just keeps going for about 4KB-worth of code, which is actually larger than the original image. But that’s okay because saving an extra HTTP request is better for performance than a few extra kilobytes of code. Now that we’ve encoded the image, we can display it in our web pages like so:

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

¹ That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method usingfopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Then to display in your web page, use something like this:

<img src="data:image/gif;base64,<?php echo $img_string; ?>">

Decoding Data URL Images

The easiest way to decode a base64-encoded image is to 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:

<?php header("Content-type: image/gif");

echo base64_decode($img_string); ?>

Like & Share