Image to Base64 Converter

Converting an image to Base64 turns the file into a long string of plain text that can be pasted straight into HTML, CSS, JSON or an email template, so the picture travels with the code instead of being loaded from a separate file. Our free converter turns PNG, JPG, GIF, WebP, SVG, ICO and AVIF images into a ready-to-use data URI, raw Base64, a CSS background rule or an HTML img tag, and shows exactly how much bigger the text is than the original file. It also works the other way: paste Base64 or a data URI and see the image, check its type and size, and download it.

How to use the Image to Base64

1. 1 Add an imageDrop a PNG, JPG, GIF, WebP, SVG, ICO or AVIF file up to 10 MB onto the tool, or choose it from your device. It is read in your browser.
2. 2 Check the size overheadCompare the original file size with the Base64 text size. The badge shows how much larger the encoded version is, usually about a third.
3. 3 Choose an outputPick a data URI for src attributes, raw Base64 for APIs and JSON, a CSS background rule, or a complete HTML img tag with width and height.
4. 4 Copy or downloadCopy the result to your clipboard, or download it as a text, CSS or HTML file if it is too long to paste comfortably.
5. 5 Decode Base64 back to an imageSwitch to Base64 to Image, paste a data URI or raw Base64, check the preview and details, and download the image file.

What Base64 is and why images get encoded

Base64 is a way of writing any binary data, such as an image file, using only 64 safe characters: the letters A to Z and a to z, the digits 0 to 9, plus and slash, with equals signs as padding at the end. Every three bytes of the original file become four characters of text. Because the result is ordinary text, it can sit inside places that only accept text, such as an HTML attribute, a CSS file, a JSON payload or an XML document.

A data URI wraps Base64 with a short header that tells the browser what kind of file it is, for example data:image/png;base64, followed by the encoded characters. Browsers treat a data URI like a normal image address, so you can put it anywhere you would put a URL to an image. The picture is then displayed without a separate download.

When inlining an image as Base64 makes sense

Inlining is useful when an image is tiny and a separate file would be more trouble than it is worth, or when there is nowhere to host a file at all. Typical good uses include:

• Small icons, bullets and decorative shapes in CSS, where each extra file would mean an extra request.
• Self-contained HTML files, such as reports, offline pages and prototypes, that must work when opened from a single file.
• JSON and API payloads that need to carry an image, such as a signature, avatar or scanned receipt.
• Placeholder images, such as a blurred low-resolution preview shown while the real photo loads.
• Test fixtures and code samples, where keeping everything in one file makes the example easier to share.

The cost: about a third bigger and no separate caching

Base64 is not compression. Because three bytes become four characters, the encoded text is roughly 33 percent larger than the original file, plus a few characters for the data URI header. The tool shows this overhead for every image so you can decide whether it is worth it. Gzip or Brotli compression on your web server recovers some of that extra size, but rarely all of it.

The bigger cost is caching. A normal image file is downloaded once and then reused from the browser cache on every page that shows it. An inlined image is part of the HTML or CSS file, so it is downloaded again whenever that file changes, and it makes the file larger to parse before anything can be displayed. Large images inlined in CSS can delay the whole page from rendering, which can harm Core Web Vitals such as Largest Contentful Paint.

As a rule of thumb, inline only small images, roughly a few kilobytes, and keep photographs, hero images and anything shown on several pages as normal files. The tool shows a reminder when an image is over 10 KB. Before inlining, make the image as small as possible: resize it to the size it is displayed, compress it, and consider WebP or, for simple graphics, SVG.

Base64 images in HTML email

Embedding images as data URIs in email is tempting because it avoids images being blocked until the reader clicks to download them. Support is patchy, however. Several popular email programs, including some versions of Outlook and Gmail, do not display data URI images, or strip them. Large inline images also make the message heavier and can affect how spam filters treat it.

For marketing and transactional email, hosted images linked by an absolute https URL remain the most reliable choice, with clear alt text for readers whose images are off. Data URIs are better kept for very small elements and for testing. If you are building an email signature, test it in the programs your contacts actually use before rolling it out.

Choosing the right output format

Data URI is the full string starting with data:image/...;base64, and is what you paste into an img src attribute, a CSS url() or a Markdown image. Raw Base64 is only the encoded characters without the header, which is what most APIs and JSON fields expect, together with a separate field for the file type.

CSS background gives you a ready-made rule with the data URI inside url(), plus the image's width and height in pixels and settings that stop it repeating. Rename the .image class to suit your stylesheet. HTML img produces a complete tag with width and height attributes, which help the browser reserve space and avoid layout shift, and a starting alt text based on the file name. Always replace that alt text with a proper description of the image, or leave it empty for purely decorative images.

For SVG files, a Base64 data URI works everywhere, but a URL-encoded SVG data URI is often a little smaller. Either way, simple SVG icons are among the best candidates for inlining because they are already small text files.

Decoding Base64 back to an image safely

The Base64 to Image tab accepts a full data URI, raw Base64, a CSS url() value or a src attribute value, and cleans up spaces and line breaks automatically. It also accepts the URL-safe variant of Base64 that uses minus and underscore instead of plus and slash, and adds missing padding. The file type is identified from the first bytes of the data itself, so it still works when the header is missing or wrong.

If the text is not valid Base64, is cut short or does not decode to an image, you get a clear message rather than a broken picture. Decoding happens entirely in your browser: the image is shown in a normal img element, which does not run any scripts inside SVG files, and nothing is sent to a server. That makes it a safe way to inspect an image found in a web page, API response or log file.

Examples you can copy

Data URI
  data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

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

HTML img
  <img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Phone icon">

Every 3 bytes -> 4 Base64 characters

1.5 KB icon     -> about 2 KB of text
12 KB logo      -> about 16 KB of text
300 KB photo    -> about 400 KB of text  (keep as a normal file)

Common mistakes to avoid

Frequently asked questions