Image to Base64 – Convert an Image to a Data URI

How to convert an image to Base64

1. Choose an image.
2. Choose the output:
   • Data URI — the full data:image/…;base64,… string.
   • Base64 only — just the encoded characters.
   • HTML img — a ready <img> tag.
   • CSS — a background-image declaration.
3. Copy the result and paste it into your code.

Examples

HTML:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="">

CSS:

.icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }

JSON:

{ "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..." }

When Base64 makes sense — and when it doesn’t

Good for:

• Icons and images under about 2–10 KB.
• Single-file HTML documents and offline reports.
• HTML email templates where linked images are blocked.
• APIs that accept images as JSON fields.
• Small loading placeholders.

Not good for:

• Photos and large images — the page becomes heavy and can’t cache them.
• Images used on many pages — a normal file is cached once and reused.

Optimise first

Because Base64 adds a third to the size, shrink the image first. Use the image compressor for photos, convert SVG logos with SVG to PNG at the exact size you need, or keep simple icons as SVG, which is often smaller even after encoding.

Size limits to keep in mind

Some systems limit the length of text fields, URLs or JSON payloads. A 50 KB image becomes about 67 KB of Base64 text — too long for many form fields and some APIs. Browsers handle data URIs of several megabytes, but large ones slow down page rendering and make HTML files hard to edit. As a rule, keep inline images under 10 KB and link to anything bigger.

Data URIs in email

Many email clients, including Gmail, don’t display images embedded as data URIs in the HTML body. For newsletters, linked images hosted on a server or attached images referenced by content ID are more reliable. Data URIs work well in HTML files you open locally, in documents generated by apps, and in many in-app messages.

SVG icons

For simple SVG icons in CSS, you can also use a URL-encoded SVG instead of Base64, which is often shorter. Base64 works for every format, which makes it the safest general choice.

Copying long strings

Base64 strings for even small images run to thousands of characters. Use the Copy button rather than selecting the text by hand, which can miss characters at the start or end. If the image doesn’t show after pasting, check that the whole string was copied, including the data:image prefix.

How it works

Your browser’s FileReader reads the file and encodes it as a data URL. Nothing is re-compressed, so the image is exactly the same as the original. For text rather than images, use the Base64 encoder, which handles UTF-8 text.