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.
Top comments (0)