When should I inline an image as Base64?

For small assets where the round trip costs more than the bytes — icons, a 1px gradient, an SVG in a CSS background. Above roughly 5KB the 33% size penalty outweighs the saved request, and inlining also means the image can never be cached separately from the file it lives in.

Why is my Base64 string bigger than the file?

Base64 encodes three bytes as four ASCII characters, so the output is always about 33% larger than the input. That is inherent to the encoding, not something a tool can optimise away.

Can I decode a data URI back to a file?

Yes. Paste the full string — with or without the `data:image/png;base64,` prefix — and you get the image back as a downloadable file.

Image to Base64 Converter

Convert an image to a Base64 data URI you can paste directly into HTML or CSS, or paste a data URI back to get the image file. Encoding happens in your browser. Note that Base64 makes a file roughly 33% larger — it saves a request, not bytes.

Runs in your browser — nothing is uploaded

Questions

When should I inline an image as Base64?: For small assets where the round trip costs more than the bytes — icons, a 1px gradient, an SVG in a CSS background. Above roughly 5KB the 33% size penalty outweighs the saved request, and inlining also means the image can never be cached separately from the file it lives in.
Why is my Base64 string bigger than the file?: Base64 encodes three bytes as four ASCII characters, so the output is always about 33% larger than the input. That is inherent to the encoding, not something a tool can optimise away.
Can I decode a data URI back to a file?: Yes. Paste the full string — with or without the `data:image/png;base64,` prefix — and you get the image back as a downloadable file.

Image to Base64 Converter

Questions

What people use next