What is the difference between Data URI and raw Base64?

A data URI is `data:image/png;base64,…` and can go straight into an `img` `src` or CSS `url()`. Raw Base64 is only the encoded bytes after the comma—useful when an API or config expects Base64 without the `data:` prefix.

Should I inline large images in email or HTML?

Usually no. Base64 increases size by about one third, and many email clients cap total message size. Prefer linked/hosted images for photos; reserve inlining for tiny icons or critical above-the-fold assets.

Is the image uploaded to a server?

No. The file is read with the browser FileReader API and never leaves your device.

How is this different from the Base64 encode/decode tool?

This page converts image files to data URIs or raw Base64. The text Base64 tool encodes UTF-8 strings for APIs and Basic Auth—not binary image files.

Utill.net

Image to Base64

Data URI Encoder

Convert PNG, JPEG, GIF, SVG, or WebP into a Base64 data URI or raw Base64 with preview and copy. Free, browser-only, up to 10 MB.

This conversion runs only in your browser — nothing is uploaded.

Drag & drop an image, or browse below

PNG, JPEG, GIF, SVG, WebP · max 10 MB

Browse files

For UTF-8 text Base64 (not image files), use Base64 Encoder & Decoder

What is this tool?

This image to Base64 converter reads a local image with the browser FileReader API and produces either a full data URI (data:image/…;base64,…) or raw Base64 (payload only). Preview confirms the file before you copy.

Inlining is convenient for tiny icons, self-contained demos, and test fixtures. Base64 increases size by roughly one third and bypasses normal URL caching, so large photos belong on a CDN or static host—not inside HTML or email bodies.

Max file size is 10 MB. Prefer optimized assets under a few hundred KB when you must inline.

Common use cases

Build an img src or CSS background-image: url(…) without a separate asset request
Embed a small logo in an HTML email or signature (watch total message size)
Produce Base64 fixtures for unit tests or Storybook without committing binary files

How to use

Drag an image onto the drop zone or browse (PNG, JPEG, GIF, SVG, WebP · max 10 MB).
Confirm the preview and MIME / file-size chips.
Choose Data URI or Raw Base64, then Copy.
Use Sample for a 1×1 PNG smoke test; Clear resets the workspace.

Examples

Use	Shape	Notes
HTML image	`<img src="data:image/png;base64,…" alt="">`	Data URI tab; keep icons tiny.
CSS background	`background-image: url("data:image/svg+xml;base64,…")`	Same tab; SVG often compresses well.
API / config field	Raw Base64 only (no `data:` prefix)	Raw tab after upload.
Oversized photo in email	Prefer linked URL instead of Base64	Edge: many clients reject or clip large MIME parts.

Practical pitfalls

Email size: Base64 plus MIME headers can push messages past Gmail/Outlook limits; host photos and inline only micro-icons.
Large data URIs block the main thread while reading and inflate DOM/CSS; the UI warns above ~500 KB.
This tool is for image files. UTF-8 text Base64 (APIs, Basic Auth) belongs on the text Base64 encoder—not here.

References

Last reviewed: 2026-07-27

Frequently asked questions

What is the difference between Data URI and raw Base64?: A data URI is `data:image/png;base64,…` and can go straight into an `img` `src` or CSS `url()`. Raw Base64 is only the encoded bytes after the comma—useful when an API or config expects Base64 without the `data:` prefix.
Should I inline large images in email or HTML?: Usually no. Base64 increases size by about one third, and many email clients cap total message size. Prefer linked/hosted images for photos; reserve inlining for tiny icons or critical above-the-fold assets.
Is the image uploaded to a server?: No. The file is read with the browser FileReader API and never leaves your device.
How is this different from the Base64 encode/decode tool?: This page converts image files to data URIs or raw Base64. The text Base64 tool encodes UTF-8 strings for APIs and Basic Auth—not binary image files.