What is Base64 Encoding?
Base64 encoding converts binary data like images into a text-based representation. The result is a long string of letters, numbers, and a few special characters that can be used anywhere only text is allowed.
As a data URI, you can embed a Base64-encoded image directly in HTML or CSS without needing a separate image file. It looks like this: data:image/png;base64,... followed by the encoded string. The browser decodes the string and displays the image.
Formidex encodes and decodes Base64 entirely in the browser. You can upload an image and receive the Base64 string to copy, or paste a Base64 string and get the image as a download.
How does Base64 Encoding work?
Base64 takes three bytes of source data at a time and converts them into four printable ASCII characters. It uses an alphabet of 64 characters: A to Z, a to z, 0 to 9, plus, and slash. This re-encoding is lossless and always reversible.
The downside: Base64-encoded data is approximately 33 percent larger than the original file. A 100 KB image becomes about 133 KB as a Base64 string. This is why the method is best suited for small images like icons and placeholders.
Tips for best results
Use Base64 embedding only for small images. Icons, placeholder graphics, and tiny UI elements under 10 KB benefit from it since one HTTP request is saved. For larger images, the 33 percent size increase outweighs the benefit.
Data URIs are not cached separately by the browser. If the same image is used across multiple pages, it must be loaded again with each page visit. For reused images, normal image files are the better choice.
In email signatures and newsletters, data URIs are particularly useful since many email clients block externally linked images. An embedded Base64 image is displayed directly.
Common use cases
Inline images in HTML and CSS: embed small icons and background graphics directly in source code to reduce HTTP requests and improve loading times when dealing with many small images.
Email signatures: embed logos and icons in email signatures as Base64 so they always display regardless of external servers. Many email clients show external images only after user confirmation.
Data export and API integration: some APIs expect image data as Base64 strings rather than file uploads. Encoding enables transmitting images as part of JSON messages without using multipart forms.