Image to Base64 Converter

How to convert an image to Base64

1. 1
   Add your image

   Drag a PNG, JPG, GIF, WebP, SVG or ICO file onto the drop zone, click it to browse, or paste a copied image or screenshot with Ctrl+V (Cmd+V on a Mac). The file is read in your browser.

2. 2
   Check the preview and the numbers

   Confirm the preview shows the right image, then read the stats line: format, pixel dimensions, the original file size and the encoded size, so you can see the overhead before you paste it anywhere.

3. 3
   Choose the prefix

   Leave "Wrap as Data URI" on if the result goes into an img src or a CSS url(). Turn it off to see the bare Base64 string that APIs and JSON fields usually expect.

4. 4
   Copy the format you need

   Use the four copy buttons for the raw Base64, the full Data URI, a CSS background-image declaration, or an HTML img tag with the width and height already filled in.

5. 5
   Paste it and finish the markup

   Paste the snippet into your page, stylesheet or payload and reload to confirm it renders. For an img tag, replace the filename-based alt text with a real description of the image.

A worked example: a 16×16 SVG icon

The "Load example" button above loads this 113-byte SVG, a single blue dot:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="7" fill="#0284c7"/></svg>

The converter turns it into 152 characters of Base64. That is 35% larger, slightly above the usual 33%, because 113 bytes is not a multiple of three: the last group holds only two bytes, so it gets one = of padding.

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjciIGZpbGw9IiMwMjg0YzciLz48L3N2Zz4=

With "Wrap as Data URI" on, a 26-character prefix that names the MIME type is added, giving a 178-character string a browser can display directly:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjciIGZpbGw9IiMwMjg0YzciLz48L3N2Zz4=

When Base64 images are the right choice

Embedding an image as text saves one HTTP request and makes the image travel with whatever contains it. That pays off in a handful of specific situations:

• Tiny interface graphics needed for first paint. A checkmark, a spinner or a 1–2 KB logo mark used in critical CSS can render with the stylesheet instead of waiting on a second request.
• Blurred placeholders. A 20-pixel-wide, few-hundred-byte preview of a hero photo can be inlined and shown instantly while the full image downloads, which is the idea behind low-quality image placeholders.
• Self-contained files. A single HTML report, an exported dashboard or offline documentation that has to work when opened from disk, with no server to fetch images from.
• Text-only channels. JSON request bodies, AI vision APIs, environment variables and database text columns have no binary type, so the image has to become text to fit.
• Favicons on throwaway pages. A <link rel="icon"> with a Data URI stops the browser's automatic /favicon.ico request from returning a 404.

When not to use Base64 images

The same property that makes inlining useful, the image becoming part of another file, is what makes it expensive at scale. Avoid it in these cases:

• Anything over about 10 KB. You pay the ~33% size increase, and gzip or Brotli can't win much of it back because PNG, JPG and WebP data is already compressed, so its Base64 form looks like random text to the compressor.
• Your Largest Contentful Paint image. Inlining the hero image bloats the HTML document itself, so everything after it in the markup arrives later. You also give up responsive srcset sizes, fetchpriority and any CDN-side resizing or format conversion.
• Images in render-blocking CSS. The browser won't paint until the stylesheet has fully downloaded, so every inlined kilobyte in it delays first render on every page that uses that stylesheet.
• Images that repeat across pages. A normal image file is cached once and reused. An inlined one is downloaded again inside every page that embeds it, and changing it invalidates the cached copy of the whole HTML or CSS file it lives in.
• Below-the-fold images. loading="lazy" stops saving anything, because the bytes were already downloaded with the document.
• HTML email. Several major email clients, Gmail among them, don't display Data URI images. Use hosted images or attachments instead.

If you're inlining images as part of a speed project, check the result against the Page Speed Checklist, which covers the LCP, INP and CLS fixes that usually matter more than one saved request.

Code examples

Each snippet below uses the Base64 from the worked example, so you can paste any of them and see the blue dot render.

HTML <img>

Always keep width and height so the browser reserves the space before the image decodes. The HTML copy button fills them in from the image's real dimensions.

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjciIGZpbGw9IiMwMjg0YzciLz48L3N2Zz4=" width="16" height="16" alt="Blue status dot">

CSS background-image

Quote the URL. Base64 can contain +, / and =, which some CSS minifiers and parsers handle badly when the value is unquoted.

.status-dot {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjciIGZpbGw9IiMwMjg0YzciLz48L3N2Zz4=");
}

JSON payload

APIs usually want the raw string with the MIME type in its own field, not a full Data URI. Paste a payload like this into the JSON Formatter & Validator to catch a missing quote or comma before you send it.

{
  "filename": "frost-dot.svg",
  "media_type": "image/svg+xml",
  "data": "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjciIGZpbGw9IiMwMjg0YzciLz48L3N2Zz4="
}

JavaScript

In the browser, FileReader.readAsDataURL() returns the Data URI directly. In Node.js, read the file into a Buffer.

// Browser: from an <input type="file">
const file = document.querySelector('input[type="file"]').files[0];
const reader = new FileReader();
reader.onload = () => {
  const dataUri = reader.result;          // "data:image/png;base64,..."
  const base64 = dataUri.split(',')[1];   // raw Base64 only
};
reader.readAsDataURL(file);

// Node.js
const fs = require('fs');
const base64 = fs.readFileSync('logo.png').toString('base64');

PHP

mime_content_type() reads the file's signature rather than trusting its extension, so a mislabeled file still gets the right prefix.

<?php
$path = 'logo.png';
$mime = mime_content_type($path);                  // "image/png"
$base64 = base64_encode(file_get_contents($path));
$dataUri = "data:{$mime};base64,{$base64}";

To check how an inlined image actually renders before it goes into a template, paste the HTML snippet into the HTML Viewer & Live Renderer.

Supported image formats

BMP and AVIF files convert too. For the math behind the size increase, padding and the URL-safe alphabet, see the complete guide to Base64 encoding. To go the other way, you can decode Base64 back to an image with a preview, format detection and a one-click download.

Frequently asked questions