Image to Base64

Features

• Six output formats including CSS and Markdown
• Size comparison showing the encoding overhead
• A clear verdict on whether inlining is worthwhile
• Live preview of the encoded result
• Works with any image format your browser can read

How to use it

1. Drop in the image you want to encode.
2. Choose the snippet format you need.
3. Check the verdict, small images are worth inlining, large ones are not.
4. Copy the result into your code.

When inlining an image is worth it

Base64 encoding represents binary data using 64 printable characters, storing 6 bits per character instead of 8. That means the encoded output is always about 33% larger than the original, plus a few bytes of padding. Nothing is compressed, you are trading size for the ability to embed the image directly in text.

The trade is worthwhile when the request overhead exceeds the size penalty. Each HTTP request carries latency, and on a high-latency connection a round trip can cost 100 milliseconds or more regardless of how small the file is. For an icon of a few hundred bytes, inlining removes that entirely. The usual guidance is to inline anything under roughly 2 to 4 KB.

Above that, inlining actively hurts. An inlined image cannot be cached separately from the document, so it is re-downloaded on every page load rather than served from cache. It bloats your HTML or CSS, which are typically render-blocking, delaying first paint. And it cannot be lazy-loaded or served in a different format to different browsers. HTTP/2 and HTTP/3 multiplex requests over a single connection, which has substantially reduced the cost of extra requests and correspondingly reduced the case for inlining at all.