Web Development

Using Base 64 Encoded Images

To be honest when I first heard about Base64 encoded images I cringed. I thought this won’t end well. However, after some quick reads I found it to be the exact opposite and took less effort than I could ever have imagined. The syntax is as follows using just a regular image tag:

Obviously, you need to know the image type (gif, jpeg, png, etc.) but it will render as usual without any decoding that one would expect with Base64. The browser will take care of it for you. Here is an example of the Google logo:

And renders:

The advantage of storing your images in this format may not be clearly obvious, but one way it is useful is when wanting to store images in a database rather than a file on a server. By keeping the image in the database you can generate the image anytime you want and you don’t have the dependency on having to know where the file is located in the directory. This also plays to the advantage of easier application migration where you only have to move the database rather than the whole database and the image directories.