Image to Base64 Converter

Drop a JPEG, PNG, WebP, GIF or SVG onto the converter and the browser turns it into a Base64-encoded data: URL without sending a single byte to a server. The encoded string carries the full image, which means it can live directly inside an HTML src= attribute, a CSS background-image declaration, a Markdown image reference, or a JSON payload anywhere a file path is not an option.

The most common use is embedding a small logo or icon in an HTML email, where external images are blocked by default. A second common case is loading states: a tiny blurred Base64 placeholder can ship inside the initial HTML while the full-resolution image loads, eliminating the blank-box flash. Both rely on the same conversion this tool produces. Once generated, the output works in every modern browser without any additional libraries.

Running Your First Conversion

1. Click the drop zone or drag an image file onto it. JPEG, PNG, WebP, GIF and SVG are accepted up to 8 MB.
2. Choose an Output format: Data URL for a complete data:image/…;base64,… string, Base64 string for the encoded payload without the prefix, or CSS background for a ready-to-paste background-image: url(…); declaration.
3. Click Copy next to the main output to copy the encoded string, or use the HTML snippet panel below it to copy a complete <img src="data:…" alt="filename" /> tag in one click — useful for dropping the image directly into a static HTML file without building the tag by hand.
4. The file details panel shows original size, encoded size and output character count. When the result exceeds 100 KB an advisory appears: images that large are usually better served from a URL than inlined, because the browser cannot cache a data: URL separately from the document that contains it.

What It Accepts

• Supported types: JPEG, PNG, WebP, GIF and SVG. The MIME type reported by the browser is preserved verbatim in the data: URL prefix, so data:image/svg+xml;base64,… and data:image/webp;base64,… are produced automatically without manual editing.
• Size limit is 8 MB. Above that the tool shows "File is X MB, which exceeds the 8 MB limit." Resize or compress the image first. A 500 KB PNG encodes to roughly 667 KB of Base64, while an 8 MB source yields approximately 10.7 MB of text, which most HTML parsers handle slowly and some email clients reject.
• Empty or corrupt file: triggers "Could not read the file — it may be corrupt or empty." Nothing is produced.
• Wrong extension: the MIME type is read from the file binary header, not its name. Renaming a PNG to .jpg still encodes it as image/png.

Size and the 8 MB Ceiling

Base64 encoding adds roughly 33% to the original file size: every 3 bytes become 4 ASCII characters. The encoded size and output character count are shown alongside the original file size so you can judge whether inlining is practical before copying. Images over 100 KB trigger an advisory. Base64-inlining large images often increases page weight more than a normal <img src="url"> request would, because the browser cannot cache a data: URL separately from the HTML document that contains it.