Why is a Base64 image about 33% larger than the file?

Base64 writes every 3 bytes as 4 printable characters, so a 30 KB image becomes roughly 40 KB of text, plus the data: prefix. Compression such as gzip on the web server narrows the gap somewhat, but an inline image cannot be cached separately from the page or stylesheet that contains it, so inlining usually suits only small icons of a few KB rather than photos or large illustrations.

Should an SVG Data URI use URL encoding or Base64?

URL encoding is usually shorter, because it escapes only a few characters such as #, % and <, while Base64 always adds about 33%. This page uses URL encoding for SVG by default and swaps double quotes for single quotes, so the result fits directly inside a CSS url("…") value. Untick the option to switch to Base64 only when the target environment explicitly requires it.

What if pasted Base64 is reported as not an image?

First check that the text is complete: it may contain only A–Z, a–z, 0–9, + and /, plus at most 2 trailing = signs. This page identifies the format from the file header, for example the 8-byte signature that starts every PNG or the FF D8 FF bytes that start every JPEG. Truncated data, or content that is really a PDF or another kind of file, is reported as unrecognized.

Image ↔ Base64

Turn images into Base64, Data URIs, CSS or HTML snippets, and decode Base64 back into a downloadable image

Computed in your browser

Drop an image above to get a Data URI and other snippets; paste Base64 below to decode it automatically, preview and download.

Image → Base64

Choose or drop an image You can also paste an image from the clipboard. Images are processed in this browser and never uploaded. Common image formats plus SVG and ICO, up to 5 MB.

Output style

URL-encode SVG (shorter)

Base64 → Image

Paste a Data URI or Base64

Example

Input

Decode box: a Data URI for a 16×16 PNG (data:image/png;base64,iVBORw0KGgo…, 94 bytes)

Example result

PNG · 94 B · 16×16, previewed and downloadable as image.png; the encode box also turns a 160×100 sample into a Data URI

The 94 bytes encode to 128 Base64 characters, plus the 22-character data:image/png;base64, prefix.

Technical details & limits

Encoding uses the browser's FileReader to produce standard Base64: every 3 bytes become 4 characters, about 33% larger. URL encoding for SVG escapes only the characters a Data URI requires and swaps double quotes for single quotes. Decoding accepts a data: prefix, plain Base64, URL-safe characters (- and _) and missing = padding. PNG, JPEG, GIF, WebP, BMP, ICO, AVIF and SVG are recognized from the file header, with a warning when the declared type differs. Encoding is limited to 5 MB input and decoding to 20 million characters.

About this tool

Convert PNG, JPG, WebP, GIF, SVG, ICO and other images to Base64 or a Data URI, with ready-made CSS background-image, HTML <img> or Markdown snippets; SVG can use shorter URL encoding. In reverse, paste a Data URI or plain Base64, let the tool detect the real format from the file header, preview the dimensions and download the image. Everything runs locally; neither images nor text are uploaded.

How to use

To encode: drop, choose or paste an image and pick an output style.
Copy or download the generated text; tick URL encoding for shorter SVG output.
To decode: paste a Data URI or Base64 below, check the format and size, then download.

Input & output

Input: Encode: one image up to 5 MB, including SVG and ICO. Decode: a Data URI or Base64 text up to 20 million characters.
Output: Data URI, plain Base64, CSS, HTML or Markdown text; decoding returns the original image file.
Limits: Images are not compressed or resized; decoding only accepts content recognized as an image, not PDFs or other files.

Notes

Inline images enlarge HTML or CSS and cannot be cached separately, so they suit very small icons. Compress larger images first.

FAQ

Why is a Base64 image about 33% larger than the file?: Base64 writes every 3 bytes as 4 printable characters, so a 30 KB image becomes roughly 40 KB of text, plus the data: prefix. Compression such as gzip on the web server narrows the gap somewhat, but an inline image cannot be cached separately from the page or stylesheet that contains it, so inlining usually suits only small icons of a few KB rather than photos or large illustrations.
Should an SVG Data URI use URL encoding or Base64?: URL encoding is usually shorter, because it escapes only a few characters such as #, % and <, while Base64 always adds about 33%. This page uses URL encoding for SVG by default and swaps double quotes for single quotes, so the result fits directly inside a CSS url("…") value. Untick the option to switch to Base64 only when the target environment explicitly requires it.
What if pasted Base64 is reported as not an image?: First check that the text is complete: it may contain only A–Z, a–z, 0–9, + and /, plus at most 2 trailing = signs. This page identifies the format from the file header, for example the 8-byte signature that starts every PNG or the FF D8 FF bytes that start every JPEG. Truncated data, or content that is really a PDF or another kind of file, is reported as unrecognized.

Related tools

Image ↔ Base64 · Turn images into Base64, Data URIs, CSS or HTML snippets, and decode Base64 back into a downloadable image — Image ↔ Base64 — Tool illustration · dayeku.com