SmartWebTools / SMART LITTLE TOOLS FOR EVERYDAY TASKS
SmartWebTools / Document & Image Tool

Image to Base64

Convert an image file into a Base64 data URI, or paste one back in to preview and download the image it represents.

SN IB-27

Image β†’ Base64

Click to choose an image

Base64 β†’ Image

Advertisement

What a data URI is

A Base64 data URI encodes an entire image as text, prefixed with its MIME type β€” for example data:image/png;base64,... β€” so it can be embedded directly inside CSS, HTML, or JSON without a separate file request. The trade-off is size: Base64 text is roughly a third larger than the original binary file.

Common uses

  • Embedding a small icon or logo directly inside a CSS file or HTML email
  • Extracting and saving an image from a data URI found in a browser's dev tools or an API response
  • Passing an image through a system (like some form submissions) that only accepts text fields

Frequently asked questions

When should I use a Base64 image instead of a regular image file?

Base64-embedding suits very small images (icons, tiny logos) where avoiding an extra HTTP request outweighs the ~33% larger file size β€” for anything bigger than a few KB, a regular linked image file is usually more efficient.

Why is my Base64 string so long?

Base64 encodes every 3 bytes of the image as 4 text characters, so even a modest-sized image produces a very long string β€” this is normal and expected, not a sign of an error.

How do I turn a Base64 string back into a downloadable image file?

Paste the full data URI (starting with data:image/...;base64,...) into the second box on this page, or paste just the raw Base64 and select the correct image type, then click "Preview & enable download."

Can I use a Base64 image directly in HTML?

Yes β€” set it as the src attribute of an tag, like , and the browser will render it without a separate image file request.

Advertisement