Image to Base64: How to Embed Images as Data URIs (and When Not To)

The short answer

To embed an image as Base64, convert the file into a data URI such as data:image/png;base64,iVBORw0KGgo... and use it wherever you would put an image URL: in an HTML src, a CSS url() or a JSON field. The Image to Base64 tool converts any image in your browser and gives you four ready-to-copy versions.

Embedding is best for small images (icons, tiny logos, email signatures, single-file demos). Base64 text is about 33% larger than the original file and cannot be cached separately, so large photos should stay as normal image files.

What a data URI is

A data URI puts the file's contents directly inside the URL instead of pointing to a location. The format is:

data:[media type][;base64],[data]

• data: is the scheme.
• The media type tells the browser what the data is, such as image/png, image/jpeg, image/svg+xml or image/webp.
• ;base64 says the data is Base64-encoded.
• After the comma comes the encoded file.

Base64 represents binary data using 64 safe text characters (A–Z, a–z, 0–9, + and /), with = used as padding at the end. Every 3 bytes of the file become 4 characters of text, which is where the 33% increase comes from.

Converting an image

Open Image to Base64.

Click Choose image and select a JPG, PNG, GIF, SVG or WebP file.

The tool reads the file in your browser and shows four outputs, each with a Copy button (listed below).

Click Convert another image to start again.

The four outputs:

• Data URL (for HTML img src): the full data:image/...;base64,... string.
• Base64 string only: just the encoded data, without the data: prefix. Use this for APIs and JSON fields that ask for raw Base64.
• CSS background-image: a complete declaration you can paste into a stylesheet.
• HTML img tag: an image element with the data URL as its source and the file name as its alt text.

The preview boxes show only the first 200 characters of each output so the page stays fast. The Copy button copies the full string. The file is read with the browser's FileReader and is not uploaded.

Tip: replace the auto-generated alt text (the file name) with a real description before you publish the HTML tag. Screen readers read alt text aloud, and "logo-final-v2.png" is not helpful.

How big will the Base64 be?

The encoded length is 4 × ⌈file size ÷ 3⌉ characters. Some examples:

Original file	Base64 length	Increase
3,000 bytes (about 2.9 KB)	4,000 characters	33%
7 KB (7,168 bytes)	9,560 characters	33%
50 KB (51,200 bytes)	68,268 characters	33%

Gzip or Brotli compression on your server claws back part of the increase for text files like HTML and CSS, but the embedded image still adds weight to every page that includes it.

When Base64 embedding makes sense

• Tiny icons and UI images (a few KB or less), where saving a separate request matters more than the size increase.
• HTML email signatures and templates, where linked images may be blocked by default. Support for data URIs varies between email clients, so test in the clients your recipients use.
• Single-file HTML such as reports, demos or offline pages that must work without any other files.
• APIs and JSON that accept images as Base64 strings, for example when uploading an image through a JSON endpoint.
• Canvas and testing: placeholder images in unit tests or code samples.

When to keep a normal image file

• Photos and large images. A 200 KB photo becomes about 267 KB of text inside your HTML or CSS. The browser must download it before it can finish reading that file, which can delay rendering.
• Images used on many pages. A separate file is cached once and reused. An embedded copy is downloaded again inside every page or stylesheet that contains it.
• Images that change often. Every change means editing the code instead of replacing a file.

A reasonable rule of thumb: embed images under a few kilobytes, and use files for everything else. Before embedding, shrink the image with Compress Image or Resize Image, because every byte saved is a byte and a third saved in Base64.

SVG: you may not need Base64 at all

SVG is already text. You can paste SVG markup directly into HTML, or use it in CSS as a URL-encoded data URI, which is often smaller than the Base64 version. Base64 still works for SVG and avoids escaping problems, so it is the simplest option if you do not want to deal with encoding.

Security and browser notes

• Modern browsers block top-level navigation to data: URLs, so a data URI pasted into the address bar or used as a link target may not open. Embedding it as an image source is fine.
• If you accept Base64 images from users (for example in an API), validate the media type and decoded size on the server. Do not trust the data:image/... prefix alone.
• Long data URIs make code hard to read and diff. Keep them in a separate CSS file or a constant rather than inline in templates.

Decoding Base64 back to an image

If you have a Base64 string and need the file, paste the full data URI into an img tag in a test page and save the image, or decode it with a script. For general text and file encoding and decoding, use the Base64 Encoder/Decoder.

Common mistakes

• Missing the prefix. HTML needs the full data URI. Raw Base64 alone in src will not display.
• Wrong media type. A JPEG labelled image/png usually still displays, but some strict parsers reject it. Use the type the tool detects.
• Line breaks inside the string. Some editors wrap long lines. Keep the string on one line.
• Embedding a large hero image and wondering why the page got slower.