From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- posts/base64-all-the-things.md | 63 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 posts/base64-all-the-things.md (limited to 'posts/base64-all-the-things.md') diff --git a/posts/base64-all-the-things.md b/posts/base64-all-the-things.md new file mode 100644 index 0000000..40641f7 --- /dev/null +++ b/posts/base64-all-the-things.md @@ -0,0 +1,63 @@ +# 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.

+ - Wikipedia +
+

In simpler terms: it is a encoded format that can change an element like this:

+ + + Cool image + + +Into this: + + + Cool image + + +

See it in action

+ +
+Just an image +
This image is pulled in with an HTTP request (direct link to image)
+
+ +
+Image rendered in base64 +
This image is an inline base64 encoding
+
+ + +

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.

+ + + +

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

+ + + +

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.

+ + -- cgit v1.2.3-54-g00ecf