From e417a818e207a6cca6e2f3c471611673ab836a62 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Sat, 25 May 2024 16:14:03 -0400 Subject: Initial commit for Jekyll testing and conversion, updated --- _posts/2020-03-18-base64-all-the-things.md | 66 ++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 _posts/2020-03-18-base64-all-the-things.md (limited to '_posts/2020-03-18-base64-all-the-things.md') diff --git a/_posts/2020-03-18-base64-all-the-things.md b/_posts/2020-03-18-base64-all-the-things.md new file mode 100644 index 0000000..1c88f21 --- /dev/null +++ b/_posts/2020-03-18-base64-all-the-things.md @@ -0,0 +1,66 @@ +--- +layout: post +title: "Base64 All The Things! (Sometimes)" +date: 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