🔐
← Back to Guides

How to Convert Images to Base64 Data URLs

· Tags: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

What Is a Base64 Image Data URL?

A Base64 image data URL embeds the entire image file directly in a web document as a text string, eliminating the need for a separate HTTP request to load the image. Instead of the browser fetching an external file, the image data is already present in the HTML or CSS.

The format looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

Breaking it down:

  • data: — the data URI scheme prefix
  • image/png — the MIME type of the embedded image
  • ;base64 — indicates Base64 encoding
  • ,iVBORw0... — the actual Base64-encoded image data

Why Convert Images to Base64?

Embedding images as Base64 is useful in several scenarios:

Reduce HTTP Requests

Each external image file requires a separate HTTP request. Base64 data URLs eliminate these requests, which can improve page load time — especially on high-latency connections or for pages with many small assets.

Self-Contained Documents

Base64 images make your HTML files fully portable. An email template with Base64 images works even when the recipient's email client blocks external resources. Similarly, an HTML document with embedded images can be shared as a single file without worrying about broken image paths.

Performance-Critical Pages

For above-the-fold hero images and critical UI elements, eliminating the extra round trip can improve metrics like Largest Contentful Paint (LCP). However, this only benefits small images — for large images, inlining is counterproductive.

Works Offline

When an image is embedded as a data URL, it works without network access. This is valuable for offline web applications and progressive web apps (PWAs).

How to Convert an Image to Base64

Method 1: Using an Online Tool (Easiest)

The quickest way to convert an image to Base64 is to use a dedicated online tool. Upload or drag and drop your image into our free online Base64 encoder, and you will get the complete data URL ready to paste into your code.

Method 2: Using JavaScript in the Browser

The FileReader API provides a straightforward way to convert user-selected images to Base64:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

Method 3: Using the Canvas API

If you need to resize, crop, or compress an image before converting it to Base64, the Canvas API is the way to go:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

Method 4: Using Node.js

On the server side, use the fs module with Buffer to convert image files to Base64:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

Method 5: Using the Command Line

On Linux and macOS, you can use the built-in base64 command:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

How to Use Base64 Images in HTML

Directly in an <img> tag:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

How to Use Base64 Images in CSS

As a background image:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

Performance Considerations and Best Practices

When Base64 Images Help

  • Small icons and UI elements under 10 KB
  • Critical above-the-fold images that block rendering
  • Sprites and SVG icons used across a page
  • Email templates where external images are often blocked
  • Offline-first web apps and self-contained documents

When Base64 Images Hurt

  • Large photos or high-resolution images (100 KB+) — the Base64 overhead and parsing delay hurt performance
  • Images that change frequently — invalidating browser cache for a large HTML payload is wasteful
  • Images shared across many pages — external files benefit from shared browser caching
  • CDN-served images — CDNs optimize file delivery better than inlined data

The 10 KB Rule of Thumb

A widely cited guideline: if an image is under 10 KB, consider inlining it as Base64. If it is larger, serve it as a separate file. This balances the overhead of HTTP requests against the overhead of Base64-encoded data in your HTML.

However, the optimal threshold depends on your specific situation:

  • HTTP/2 multiplexing reduces the penalty of multiple requests, making external files more attractive
  • On slow connections, eliminating requests can be valuable even for larger images
  • For critical rendering path resources, inline even larger images if it means one less round trip

Compression Consideration

If you are converting JPEG or PNG images to Base64, consider using WebP instead. WebP provides superior compression at the same quality level, resulting in smaller Base64 strings. Many online tools let you re-encode images before converting them to Base64.

Convert Your Images to Base64

Ready to embed images directly in your code? Use our free online Base64 encoder and decoder to upload images and get complete data URLs for HTML, CSS, and JavaScript — no installation required.