Using Base64 encoded image

#webdev

The window.onload event does not occur until resources are fully loaded. And often images are the biggest part of resources.

The total resource loading time consists of:

waiting for a server response,
data loading time,
byte analysis,
byte conversion to an object.

Encoding an image in Base64 format converts binary data into ASCII string format. Loosely speaking, we can convert an image to text using this process. This allows us to inline images as text on the page and get rid of the steps: "waiting for a server response" and "data loading time".

I use this technique for small images that are used as logos, icons or background images for buttons, panels and etc.

Downsides of the inline images

Converting images to base64 results in a 30% increase in size.
Size of HTML page increases.

How to convert

The easiest way is to use online converters. For example base64-image

How to use

You can set the string as the value of the src property or as css background.

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →