Base64 Encoder

Base64 encoding turns binary data — an image, a PDF, any file — into a long string of printable characters. That string can be embedded directly in HTML, CSS, JSON, or markdown, with no need to host the file separately. For tiny images (icons, logos, decorative UI elements), this is a popular technique to eliminate the HTTP request entirely.

The tradeoff is size. Base64 encoding expands data by ~33% because every 3 bytes of binary becomes 4 characters of text. A 30 KB image becomes a 40 KB string in your HTML file. The HTTP request saved is replaced by a larger HTML download, so it's not always a net win. For small images used once or twice, embedding is faster overall; for larger images or images used many times across a site, hosting the file is better.

Data URLs add a MIME-type prefix (data:image/png;base64,...) that lets the browser interpret the string directly as an image source. Use data URLs when embedding in HTML img tags, CSS background-image, or JSON-LD image fields. Use plain Base64 when you need just the encoded string — for example, when sending an image to an API that expects Base64 in the request body.