New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

PHP Tip: Encode & Decode Data URLs

[ RSS Feed Icon ] 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

So we start with a small image named, say, feed-icon.gif: [ RSS Feed Icon ]

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

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

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:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURUdwTOF9MPiYNPaUM79PD85gEv///8xZD8tbDs5gEvqcNfGLMO6FLvmbNet/LfOPMuVyKfufNuFoJ9xeI+2BLul7K+h5K99jJvCHMPWRM++IMPKOMed2K/SRMu+PRuRtKfvLnOZ3Kvzjzv/58/3q2/idQNx1J/rEj/S9mfWdS+NyNvvAg/fDmvqzafvcwfvWtfqjQv3w5vamWu+0l/KnbPuvXfWYPvqnT/Gvgu6bY/7z5uiDPOmJOvq5dvrQqOWKX8DLUw8AAAAKdFJOUwD///8Qv/9Qoc8Rrb9jAAABxklEQVQ4y3WT6XaCQAxGB1BERMTi2topRQHBDa1L1S7v/1b9kpFqezC/4Nw7kwUihBC1eqyVRFyvCYqKpUn39bXXdd2O4zw2Gk+tZ8PQ9WaUalYFgvVx9rwS3rTt6MPC/Zp7j7fbkVYTdQkuj0dZwm09rYrYxfmpiQi/Nv+5sY+FRvWxgFgn+z982NIgIH8hmOY4+cMbEKi+uXmNyeGGDyBc6t8my+KSzyt3IFz7289OSpn98g4Jt/0lY2UU3IVAfG6uw2BD9R8mbHxeeBcCnVdFhgvUn4dcR6p4jwTcX3SxzFEfG6HiIwiUPyh6PO3adsRZtsw9CFRfugguTY53urHhoTJn4TL/w5e6Ixq2OOM78RcI1++z4B5XrYakh5D4A4Sb77djYztw+IozOAnM8yRI8ra94FacjuQc4CTweSp8kuvGioh0u/S+BO+TAD5TAzaGKR/t8h+0BieB8qs5BJgvHV31Rlt6B/dJoPrVDZj/XNV/pPes75PA9a9Uf6r+iedlJHz7PlLEEf8/u2TD309OEejvDZH5fhaLenrz/6j5U/+UHyGrWJzoPs+wOFi96C4/W2p5030J72dSLS/Ws1q+/lVa/x9fdEIH1QvZAwAAAABJRU5ErkJggg==

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:

<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")); ?>");

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:

<?php header("Content-type: image/gif");
echo base64_decode($img_string); ?>

Notes

1 Here is another encoding method using fopen() 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; ?>">

Now go thee forth and encode all of thy small-ish images.

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
BBQ Pro: The fastest firewall to protect your WordPress.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.