Image to Base64 Converter

How to use the Image to Base64

1. Drop or choose an image. Optionally resize it or convert it to WebP, PNG or JPEG first.
2. Copy the output as a raw data URI, an HTML <img> tag, a CSS background or plain Base64.
3. To decode, switch to Base64 to Image, paste the string and download the image.

Image to Base64 features

• Encode JPG, PNG, WebP, GIF, SVG and other images to Base64
• Outputs: data URI, HTML img tag, CSS background, raw Base64, JSON or Markdown
• Optional resize and conversion to WebP, PNG or JPEG before encoding
• Encoded size shown, with a warning above 1 MB
• Decode Base64 or data URIs back to a downloadable image
• Copy or download the result as .txt; nothing is uploaded

Convert images to Base64 and back

This converter turns an image into a Base64 string or a data URI that you can paste directly into HTML, CSS, JSON, Markdown or an email template, with no separate image file to host. It works in reverse too: paste a Base64 string or a data:image URI and get the original image back as a file you can download. Everything happens in your browser, so the image is never uploaded.

Before encoding, you can resize the image and convert it to WebP, PNG or JPEG with a quality setting, which often makes the resulting string dramatically shorter.

What is a Base64 data URI?

Base64 is a way of writing binary data, like the bytes of an image, using only 64 ordinary text characters (A–Z, a–z, 0–9, + and /). A data URI wraps that text with a short header that tells the browser what kind of file it is:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…

Browsers treat a data URI just like a normal image URL, so you can use it anywhere an image address is expected.

Output formats

Copy the result with one click or download it as a text file.

When to embed images as Base64

Inlining an image saves the browser a separate request, but it also makes the data about a third larger and stops the image from being cached on its own. That makes Base64 a good fit for some jobs and a poor fit for others:

• Good for: small icons and logos (a few KB), CSS backgrounds and patterns, single-file HTML pages and reports, HTML email signatures, test fixtures, and sending images through JSON APIs.
• Not ideal for: photos and large graphics. A 500 KB photo becomes roughly 670 KB of text that has to be downloaded with every page that includes it. Serve those as normal files and compress them with the Image Compressor instead.

The converter shows the encoded size and warns you when a data URI is over 1 MB.

Make the Base64 string smaller

• Resize first. If an icon is displayed at 64 px, there is no need to encode a 1024 px original. Set a maximum width before encoding.
• Use WebP. WebP is usually much smaller than PNG or JPEG at the same quality, and every modern browser supports it.
• Lower the quality. For photos, 75–85% quality is rarely distinguishable from the original.
• Consider SVG. For simple vector icons, an SVG file is often smaller than any Base64 bitmap.

Re-encoding with any of these options also strips metadata such as the GPS location from photos. Choose Keep original file if you need the exact original bytes.

Decode Base64 to an image

Switch to Base64 to image, paste a string from an API response, a database, a CSS file or an email source, and the image appears with its type, dimensions and size. Download it as a normal file with the correct extension. Both full data URIs and raw Base64 strings are accepted.

Related tools

Need a set of favicons rather than a single inline icon? Use the Favicon Generator. To change an image's format without encoding it, use the Image Converter.

Image to Base64: frequently asked questions