~uglyduck/uglyduck.srht.site

ref: 494dcd504bd6ebb68b59e8a04057b0a087570d38 uglyduck.srht.site/_posts/2020-03-18-base64-all-the-things.md -rw-r--r-- 158.4 KiB
494dcd50 — Bradley Taunt tweaking overall design - still very much a WIP 8 months ago

#title: "Base64 All The Things! (Sometimes)" date: 2020-03-18 layout: post description: Learn why and how to convert and implement most web elements to base64 encodings. summary: Learn why and how to convert and implement most web elements to base64 encodings.

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:

<img src="/path/to/image.webp" alt="Cool image">

Into this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image">

See it in action

Just an image Click the placeholder to load in the real image
This image is pulled in with an HTTP request (direct link to image) Image rendered in base64 Click the placeholder to load in the real image
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.

  • 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.