Get the Original Image from a Data URL

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Try Mailchimp today. MailChimp Tracking Pixel

Someone wrote in asking how they might get the “original image” when all they had was the data URL version of the image. I’m not exactly sure how you get into that situation, but hey, I woke up in a trunk more than once.

You can absolutely get the original back, by exploiting the wonderful powers of the browser.

Here is the data they have:

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLTItMmgyNHYyNEgtMnoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTAgMjBDNC40OCAyMCAwIDE1LjUyIDAgMTBTNC40OCAwIDEwIDBzMTAgNC40OCAxMCAxMC00LjQ4IDEwLTEwIDEwem0xLTE1SDl2MmgyVjV6bTAgNEg5djZoMlY5eiIgZmlsbD0iIzE2ODJGOCIvPjwvc3ZnPgo=

Plop that sucker in an <img> tag and open in the browser and you’ll see it render:

Now you can drag it out of the browser into your local file system:

And that file will be the original:

👔