Encode images as Base64 data URIs
Base64 is a way to take raw binary data (like an image file) and convert it into a safe, ASCII string that can be pasted directly into an HTML or CSS file.
This is useful when you want to embed tiny icons directly into your stylesheet to avoid triggering an extra HTTP network request to download a separate image file.
Computers store data in bytes (8 bits). However, the standard Base64 text characters (A-Z, a-z, 0-9, +, /) only provide 64 distinct values, which can only represent 6 bits of data per character.
To encode 8-bit binary data into 6-bit text characters, the algorithm has to take every 3 bytes of the original image (24 bits total) and split them into 4 Base64 characters (6 bits each).
Because 3 bytes of binary data become 4 bytes of text data, Base64 encoding mathematically increases the file size of your image by exactly 33%.
This is why you should only use Base64 for very small images (like logos or tiny placeholders). Using it for a 5MB photograph will bloat your HTML file to over 6.6MB, severely slowing down the initial page load time.
If you have a 300KB JPEG image and encode it to Base64, approximately how large will the resulting text string be?
