Image & Photo

Image to Base64 Converter

Drop in a JPG, PNG, WebP, GIF, or SVG to get a Base64 data URL with copy-paste snippets for CSS, HTML, and Markdown — or paste a Base64 string to decode it back to a downloadable image.

Drop your image here

or click to browse — JPG, PNG, WebP, GIF, SVG, BMP, ICO, AVIF up to 10 MB.

Private by design. Images are encoded and decoded entirely in your browser using FileReader and URL decoding. Nothing is uploaded.

What is Base64 image encoding?

Base64 is a way of representing binary data — like an image — using only printable ASCII characters. The data URL form (a string starting with data:image/png;base64,...) lets you paste an entire image directly into HTML, CSS, JSON, Markdown, an email signature, or a server response, with no separate file required. Encoding is lossless: decoding the Base64 yields the exact same bytes that went in. The tradeoff is size — Base64 takes about 33% more characters than the underlying binary, so a 100 KB PNG becomes roughly 134 KB of Base64 text. That makes it ideal for tiny icons, inline SVGs, and one-off snippets, and a poor choice for big hero images. This tool encodes any image you drop in and decodes any Base64 string back to a downloadable image, with the work done entirely in your browser.

How to convert an image to Base64

1
Pick a direction
Use Image → Base64 to encode an image you have on disk. Use Base64 → Image to decode a string you've copied from a data URL, an API response, or a CSS file.
2
Drop in your image
For encoding, drag a JPG, PNG, WebP, GIF, SVG, BMP, ICO, or AVIF onto the upload area or click to pick from your device. The image previews at the top of the result card.
3
Copy the snippet you need
Five paste-ready snippets are generated: the full data URL, the raw Base64 (no prefix), CSS background-image, HTML <img> tag, and Markdown image. Click Copy on the one you want.
4
Or paste a Base64 string to decode
Switch to Base64 → Image, paste either a full data URL or the raw Base64 portion. The tool auto-pads short strings and assumes PNG when the prefix is missing — click Decode to preview.
5
Download the decoded image
Once decoded, the preview card shows the image dimensions and an estimated file size. Click Download to save the original bytes back to disk with the correct extension.

How Base64 image encoding works

1. The browser's FileReader.readAsDataURL() reads the image file as binary.
2. It groups the bytes into chunks of 3 (24 bits) and re-encodes each chunk as 4 ASCII characters.
3. The 64-character alphabet is A-Z, a-z, 0-9, plus '+' and '/' (with '=' for padding).
4. The output is prefixed with 'data:<mime>;base64,' to make it a usable data URL.
5. Decoding reverses every step: strip the prefix, normalize URL-safe variants, pad to a multiple of 4.
6. The decoded bytes are wrapped in a Blob and exposed via createObjectURL — or just used as the data URL directly.

The 33% size overhead is built into the math: 3 bytes of binary become 4 bytes of ASCII, a ratio of 4/3. That's a hard floor — there's no compressed Base64 variant in widespread use. The MIME prefix in a data URL isn't optional decoration: browsers, Markdown renderers, and email clients use it to decide how to render the bytes. If you paste raw Base64 with no 'data:image/...' prefix, this tool defaults to PNG, which is a safe guess for screenshots and icons but can produce a corrupted preview if the source was actually JPG. Best practice is to keep the full data URL format whenever you copy or paste.

Reference: MDN — Data URLs

Common Base64 image jobs

Use case	Best snippet to copy
Inline a tiny icon directly in CSS	Copy the CSS background-image snippet. Eliminates an HTTP request for icons under ~5 KB. Works well for spinners, checkmarks, sprite-style icons.
Embed an image in a JSON or REST API response	Copy the Data URL snippet. The receiver can drop it straight into <img src> or a CSS background. Common for chat apps, screenshots, and avatar uploads.
Paste a screenshot into a Markdown blog post or GitHub issue	Copy the Markdown image snippet. Renders inline without uploading to a CDN. Some Markdown renderers (GitHub) reject very large data URLs — keep it small.
Decode a Base64 string from an email or API into a usable file	Switch to Base64 → Image, paste the string, hit Decode, then Download. Works for raw Base64 too — defaults to PNG when the MIME is missing.

When to use Base64 images

Inline tiny icons or spinners directly in CSS to skip an HTTP round-trip.
Embed images in a single self-contained HTML file (offline docs, a CV, a diagram export).
Send images through a JSON-only channel — REST API, chat protocol, webhook payload.
Paste a screenshot inline in a GitHub issue, Notion page, or Markdown blog draft.
Decode a Base64 image you received from an API or email into a downloadable file.
Generate a placeholder data URL for a CSS-only loading skeleton.
Audit or inspect the contents of a data URL someone gave you before saving the file.

Related tools

Background Remover

Cut out the subject from any photo with on-device AI — no upload required.

Image Compressor

Shrink JPG, PNG, or WebP files in your browser with an interactive quality slider.

Photo Editor

Adjust, filter, rotate and crop photos in the browser — no uploads, no watermark.

Meme Maker

Compose memes and screenshot collages with real layers — paste, drag, crop, caption, export.

Frequently asked questions

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

When the image is small (under about 5 KB), used in a single place, and saving an HTTP request matters more than caching. Tiny icons, inline SVGs, and one-off email signatures are perfect. Hero images, photos, and reusable assets should stay as separate files — the browser can cache them, and Base64 inflates total page size by about 33%.

Why is the Base64 string bigger than the original image?

Base64 uses 4 ASCII characters to represent every 3 bytes of binary, so the output is always about 33% larger than the underlying file. That's a hard mathematical floor, not a quirk of this tool. If size matters, optimize the image first (the Image Compressor is good for this) before encoding.

Are my images uploaded anywhere?

No. Encoding uses the browser's FileReader API and decoding uses native string manipulation — both run entirely in your tab. You can verify in the network tab that no image bytes leave the page after it loads.

Why does my decoded image look corrupted?

The most common cause is a missing or wrong MIME prefix on a raw Base64 string — this tool guesses PNG when no prefix is present, which corrupts a JPG or WebP. Paste the full data URL whenever possible. Other causes: the string was truncated in transit, or it was URL-encoded and not URL-decoded before pasting.

What MIME types can the decoder produce?

Whatever MIME the data URL declares: image/png, image/jpeg, image/webp, image/gif, image/svg+xml, image/bmp, image/x-icon, or image/avif. The download uses the right extension automatically. For raw Base64 with no prefix, the tool defaults to PNG, which is the safest guess for screenshots and icons.

Is there a maximum image size?

10 MB per file. Beyond that, Base64 strings become unwieldy in the browser and most consumers (Markdown renderers, JSON parsers, browsers' data-URL limits) refuse them. If you need to embed something bigger, you almost certainly want a real file URL.

What's the difference between this and the Base64 Encoder tool?

The Base64 Encoder works with arbitrary text input — useful for Basic Auth headers, JSON-encoded credentials, and other developer tasks. This tool is image-specific: it produces full data URLs with the correct MIME prefix and the paste-ready snippets you actually want when embedding an image.

Last updated 2026-04-29

What is Base64 image encoding?

How to convert an image to Base64

Pick a direction

Use Image → Base64 to encode an image you have on disk. Use Base64 → Image to decode a string you've copied from a data URL, an API response, or a CSS file.

Drop in your image

For encoding, drag a JPG, PNG, WebP, GIF, SVG, BMP, ICO, or AVIF onto the upload area or click to pick from your device. The image previews at the top of the result card.

Copy the snippet you need

Five paste-ready snippets are generated: the full data URL, the raw Base64 (no prefix), CSS background-image, HTML <img> tag, and Markdown image. Click Copy on the one you want.

Or paste a Base64 string to decode

Switch to Base64 → Image, paste either a full data URL or the raw Base64 portion. The tool auto-pads short strings and assumes PNG when the prefix is missing — click Decode to preview.

Download the decoded image

Once decoded, the preview card shows the image dimensions and an estimated file size. Click Download to save the original bytes back to disk with the correct extension.

How Base64 image encoding works

1. The browser's FileReader.readAsDataURL() reads the image file as binary.
2. It groups the bytes into chunks of 3 (24 bits) and re-encodes each chunk as 4 ASCII characters.
3. The 64-character alphabet is A-Z, a-z, 0-9, plus '+' and '/' (with '=' for padding).
4. The output is prefixed with 'data:<mime>;base64,' to make it a usable data URL.
5. Decoding reverses every step: strip the prefix, normalize URL-safe variants, pad to a multiple of 4.
6. The decoded bytes are wrapped in a Blob and exposed via createObjectURL — or just used as the data URL directly.

Common Base64 image jobs

Use case	Best snippet to copy
Inline a tiny icon directly in CSS	Copy the CSS background-image snippet. Eliminates an HTTP request for icons under ~5 KB. Works well for spinners, checkmarks, sprite-style icons.
Embed an image in a JSON or REST API response	Copy the Data URL snippet. The receiver can drop it straight into <img src> or a CSS background. Common for chat apps, screenshots, and avatar uploads.
Paste a screenshot into a Markdown blog post or GitHub issue	Copy the Markdown image snippet. Renders inline without uploading to a CDN. Some Markdown renderers (GitHub) reject very large data URLs — keep it small.
Decode a Base64 string from an email or API into a usable file	Switch to Base64 → Image, paste the string, hit Decode, then Download. Works for raw Base64 too — defaults to PNG when the MIME is missing.

When to use Base64 images

Inline tiny icons or spinners directly in CSS to skip an HTTP round-trip.

Embed images in a single self-contained HTML file (offline docs, a CV, a diagram export).

Send images through a JSON-only channel — REST API, chat protocol, webhook payload.

Paste a screenshot inline in a GitHub issue, Notion page, or Markdown blog draft.

Decode a Base64 image you received from an API or email into a downloadable file.

Generate a placeholder data URL for a CSS-only loading skeleton.

Audit or inspect the contents of a data URL someone gave you before saving the file.