What is a base64 data URL?

A base64 data URL is a way to embed binary data (like an image) directly inside text - HTML, CSS, JSON, or JavaScript. Instead of referencing an image with a URL, you encode the bytes as a base64 string prefixed with 'data:image/png;base64,' and inline the whole thing. Browsers, email clients, and most tools render the embedded image without making a separate network request.

When should I use base64-encoded images?

For very small images (under 2-3 KB) used in HTML or CSS where avoiding a separate HTTP request is worth it - icons, decorative graphics, single-pixel placeholders. For embedding images in JSON API payloads where a binary file can't be attached. For email signatures where external image hosts get blocked. For self-contained HTML files (offline docs, exports) where every asset must be inline.

When should I NOT use base64 images?

For large images (over ~10 KB). Base64 is roughly 33% larger than the original binary, can't be cached separately by the browser, blocks parallel downloads, and bloats your HTML/CSS file. Use a real URL or CDN. Also avoid base64 for any image used in multiple places - linking the same URL caches once; inlining base64 duplicates the bytes everywhere it appears.

What's the difference between including or excluding the data: prefix?

The data: prefix (data:image/png;base64,...) is required for HTML img src, CSS background-image, and anything the browser renders directly. For JSON payloads, custom storage, or APIs that handle the MIME type separately, the prefix is often stripped to keep just the raw base64 string. Toggle the switch on the tool to copy whichever form you need.

How big does the base64 string get?

Roughly 33% larger than the original file. A 12 KB PNG produces about a 16 KB base64 string. A 100 KB JPG becomes ~133 KB. For SVG, the increase is the same but SVGs are usually tiny to start with, so base64-encoding an SVG icon is one of the most common practical uses.

Is my image uploaded anywhere?

No. The encode runs via FileReader.readAsDataURL and the decode runs via the browser's Fetch API on a data URL - both operate entirely on your device. Open DevTools Network tab to confirm zero outbound traffic, or disconnect from the internet after the page loads.

Can I decode base64 back to an image file?

Yes. Toggle the tool to Decode mode, paste the base64 string (with or without the data: prefix), and download the resulting image. If the input is a full data URL, the file extension is taken from the MIME type; otherwise it falls back to .bin.

Can I base64-encode an iPhone HEIC photo?

Yes. Drop the .heic or .heif file - ImgShifter decodes it locally with a WebAssembly module first, then encodes the resulting JPG to base64. The data URL prefix becomes data:image/jpeg;base64,... which works in every browser and email client. Encoding the raw HEIC bytes would only work in HEIC-aware viewers (Safari, modern macOS), so the JPG round-trip is almost always what you want.

Browser only - 100% private

Image to Base64 Converter

Convert an image to a base64 data URL, or decode a base64 string back to an image file. Useful for inline CSS, JSON payloads, and email signatures.

Instant preview Privacy-first No signup

Drag, drop, paste, or browse

JPG, PNG, WEBP, GIF, AVIF, and HEIC up to 50 MB. Paste from clipboard with Ctrl+V.

Batch upload supported

Image ↔ Base64

Encode an image as a base64 data URL, or paste base64 to download an image.

Upload an image to encode as base64.

JPG, PNG, WEBP, GIF, AVIF, SVG, and iPhone HEIC accepted. HEIC is decoded locally to JPG before encoding.

Image to Base64 online with ImgShifter

Image to Base64 is two browser-only utilities in one: encode any image as a base64 data URL (with or without the data:image/...;base64, prefix), or paste an existing base64 string to download the decoded image. The encode reads your file with FileReader.readAsDataURL; the decode parses the data URL with the browser's Fetch API and saves the resulting Blob to your downloads folder. No server, no signup, no watermark.

Use base64 inline for small images (under ~3 KB) where avoiding a separate HTTP request is worth the ~33% size penalty: HTML img src, CSS background-image, JSON API payloads, email signatures, self-contained HTML exports. Avoid it for large images and anything used in multiple places - linked URLs cache once across the whole site, while inlined base64 duplicates the bytes everywhere. The data: prefix is required for direct browser rendering; toggle it off for storage backends that handle MIME types separately.

Both directions run entirely on your device. The encode never reaches a server; the decode is a pure Fetch on a data URL, which the browser handles synchronously in memory. Confirm in the Network tab or by going offline after the page loads.

Other ImgShifter tools people use alongside Image to Base64.

Browser only

Base64 to Image

Paste a base64 string or data URL and download the decoded image. Auto-detects PNG, JPG, GIF, WEBP, AVIF, HEIC, and SVG signatures with a live preview before download.

Browser only

Compress

Reduce image file size with a quality slider and instant before/after stats. Powered by jsquash MozJPEG, libwebp, and AVIF encoders.

Browser only

SVG Editor

Edit SVG source live in your browser. Recolor, tweak stroke widths, resize the viewBox, optimize, and export as SVG or PNG.

Browser only

PNG to JPG

Convert transparent PNG images into lightweight JPG files in your browser.

Frequently asked questions

Short answers for image workflows, privacy, and supported formats.

Image to Base64 Converter

Drag, drop, paste, or browse

Image to Base64 online with ImgShifter

Related tools

Base64 to Image

Compress

SVG Editor

PNG to JPG

Frequently asked questions

What is a base64 data URL?

When should I use base64-encoded images?

When should I NOT use base64 images?

What's the difference between including or excluding the data: prefix?

How big does the base64 string get?

Is my image uploaded anywhere?

Can I decode base64 back to an image file?

Can I base64-encode an iPhone HEIC photo?