Image to Base64 / Data URI

Encode images to Base64 data URIs — and decode them back.

Convert any image (PNG, JPG, GIF, SVG, WebP, AVIF) into a Base64 data URI you can embed directly in HTML or CSS, with ready-to-paste <img> and background-image snippets — or paste a data URI to decode it back into a downloadable image. Shows the size overhead so you embed only what's worth inlining. Runs fully in your browser — nothing is uploaded.

How to use Image to Base64 / Data URI

  1. Choose a mode

    In this free online image to Base64 converter, choose Image to Base64 to encode a file, or Base64 to Image to decode a data URI back.

  2. Upload your image

    Drop or select a PNG, JPG, GIF, SVG, WebP or AVIF image, and it is read locally in your browser with no upload to any server.

  3. Review the stats

    See the original size, the Base64 payload size and the exact percentage overhead, so you can decide whether inlining the asset is worth it.

  4. Copy a snippet

    Copy the full Base64 data URI, a ready-to-paste img tag, or a CSS background-image rule, with one click for whichever you need.

  5. Decode a data URI

    Switch to decode and paste any data URI to instantly preview the embedded image and confirm its type and decoded file size.

  6. Download the image

    From a decoded data URI, download the original image as a real file with the correct extension, all processed in your browser.

Frequently asked questions

What is a Base64 data URI?

A data URI embeds a file's bytes directly inside a string like data:image/png;base64,…. For images it lets you inline the picture into your HTML or CSS instead of linking to a separate file, which removes one HTTP request — handy for tiny icons, email templates and single-file pages.

How do I use the encoded image?

Copy the data URI and drop it into an <img src="…"> tag or a CSS background-image: url("…"). This tool gives you all three snippets with one-click copy, so you can paste whichever you need.

When should I NOT use Base64?

Base64 inflates the data by about a third and can't be cached separately by the browser, so avoid it for large or frequently-reused images. It's best for small assets — icons, small logos, placeholders and SVGs.

Can I convert Base64 back to an image?

Yes. Switch to Base64 → Image, paste a full data URI, and you'll get a live preview plus a Download button that saves it as a real image file with the correct extension.

Are my images uploaded?

No. Encoding uses the browser's FileReader and decoding happens locally too — your images never leave your device. The tool is completely free with no limits.

How do I convert a PNG, JPG or SVG to a Base64 string?

Drop or upload your image — PNG, JPG, GIF, SVG, WebP or AVIF — and this image to Base64 converter instantly outputs the full Base64 data URI, ready to copy. The format is detected automatically, so the data: prefix already carries the correct MIME type.

Can I embed an SVG as a Base64 data URI in CSS?

Yes — encode the SVG here and paste the data URI into a CSS background-image: url("…"). Inlining small SVG icons as Base64 removes an extra HTTP request, which is handy for buttons, bullets and other tiny assets.

How do I decode a Base64 string back into an image file?

Switch to Base64 → Image, paste the full data URI (starting with data:image/…), and you'll see a live preview with a Download button that saves it as a real PNG, JPG or SVG with the correct extension.

Is there a size limit for encoding an image to Base64?

There's no hard limit, but remember Base64 makes the data about a third larger and can't be cached separately — so it's best for small assets like icons and logos. For big images, link to the file normally instead of inlining it.

Related tools — Media tools