How to Embed Images in HTML Using Base64

What is Base64 Image Embedding?

Base64 image embedding is a technique to include images directly in HTML, CSS, or JSON using data URLs instead of external file references. The image binary data is converted to a Base64 string and embedded inline.

Data URL Format

data:[MIME-type];base64,[Base64-encoded-data]

Example:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

HTML Image Embedding

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

CSS Background Image

.logo {

  background-image: url('data:image/png;base64,iVBORw0KGg...');

  width: 100px;

  height: 100px;

}

Advantages of Base64 Embedding

• Reduced HTTP requests: Images load with HTML, no separate requests
• No CORS issues: Data is inline, no cross-origin concerns
• Offline availability: Works without external file access
• Email compatibility: Images display in email clients
• Single-file distribution: Everything in one HTML file

Disadvantages of Base64 Embedding

• 33% size increase: Base64 encoding adds ~33% to file size
• No caching: Images can't be cached separately
• Blocking render: Large embedded images delay page load
• No lazy loading: Can't defer image loading
• Maintenance difficulty: Harder to update embedded images

When to Use Base64 Embedding

Supported Image Formats

• PNG: data:image/png;base64,...
• JPEG: data:image/jpeg;base64,...
• GIF: data:image/gif;base64,...
• SVG: data:image/svg+xml;base64,... (or unencoded)
• WebP: data:image/webp;base64,...
• ICO: data:image/x-icon;base64,...

Performance Best Practices

JavaScript Example

// Convert File to Base64

function fileToBase64(file) {

  return new Promise((resolve, reject) => {

    const reader = new FileReader();

    reader.onload = () => resolve(reader.result);

    reader.onerror = reject;

    reader.readAsDataURL(file);

  });

}

Try Our Tools

Convert your images to Base64 data URLs instantly: