# Base64 All The Things! (Sometimes)
2020-03-18
*An extremely overlooked process for displaying fonts*, images, documents, spreadsheets, etc. on the web is the use of **base64 encoding**. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.
## What is base64 encoding?
It might be common knowledge, but I think breaking down exactly what base64 encoding is could be very helpful to beginner web developers:
> Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.
In simpler terms: it is a encoded format that can change an element like this:
~~~html
~~~
Into this:
~~~html
~~~
## See it in action
## Should I use base64?
That completely depends on the situation. For most regular day-to-day web development - probably not. While base64 is useful, it is slightly less per-formant than directly using a source file (though, one could argue that making the extra browser request is less per-formant as well).
But that doesn't mean there aren't a few edge cases.
* The speed of rendering the encoding out-performs the extra HTTP request
* You only have access to a single set of specific HTML files (no access to current font, CSS or image directories)
* Security issues that limit your ability to use external sources altogether
## How do I encode my files?
There are a ton of freely available encoders out in the wild web, but my personal go-to is base64converter.com. Simply upload your file and convert.
## Limitations
* Images converted to base64 will be 20-25% larger in size (making for poorer performance on mobile for image-heavy websites)
* Lacking any consistent use of CDN caching
* Larger encodings can make for messy project files (unless run at build time of course)
Though these limitations can be deal-breakers in certain situations, I find it extremely helpful for developers to keep base64 encoding in their back pockets for a rainy day.