What is Base64?
Base64 is an encoding scheme that represents binary data using 64 ASCII characters. The most well-known use is the "data URI", in which an image is converted to Base64 and embedded directly in HTML or CSS. The benefit is fewer HTTP requests, but the drawback is roughly a 33% size increase.
When to use it
Base64 is useful when embedding small icons or logos directly in CSS, sending binary files via email, or including images inside JSON API responses. Base64 text encoding is also used in the structure of JWTs (JSON Web Tokens).
Practical Limitations
Base64 inflates data by about 33%, so applying it to large images can significantly slow page rendering. Generally, direct CSS embedding should be limited to small icons or logos under 5 KB. Base64-encoded images also benefit less from browser caching, since the entire data must be re-downloaded whenever the CSS or HTML file is updated. Some email clients treat Base64 images as attachments rather than displaying them inline.
Trade-offs
There is always a trade-off between reducing HTTP requests and increasing file size. With HTTP/2 widely deployed, the cost of fetching many small files in parallel has dropped dramatically, so the benefit of Base64 embedding is no longer as great as it once was. In environments with strict Content Security Policy (CSP), data URIs may also be blocked, so balance against your security policy. Decoding memory usage on mobile devices is also non-trivial.
Common Q&A
Q: My decoded Base64 shows garbled characters. Verify that the input was Base64 of a UTF-8 encoded string. Forcing binary data to decode as text will produce garbled output. Q: My data URI is so long it breaks the CSS. Some CSS minifiers and build tools may incorrectly truncate long strings. Check the Base64 limit in your build configuration. This tool processes everything in the browser, so there is no risk of data being uploaded to a server.
Trends
Base64 spread in the 1990s with MIME email attachments, and in the 2010s data URIs became popular as an alternative to CSS sprites. Today, with HTTP/2 multiplexing and high-efficiency formats like WebP and AVIF, Base64's primary uses are shifting toward JWTs and binary-data encoding in API communication. In front-end development, configuring Webpack or Vite to auto-Base64 small images below a certain size threshold is a common practice.