How to Convert an Image to Base64 — Complete Guide

Converting images to Base64 strings lets you embed them directly in HTML, CSS, and JSON without needing separate image files or HTTP requests. This guide explains when to do this and how.

What is a Base64 Image?

A Base64 image is an image file encoded as a text string. Instead of referencing an external file, you embed the entire image data inline using a data URI format:

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

When to Use Base64 Images

Good use cases

• Small icons and logos — eliminates an extra HTTP request
• Email templates — some email clients block external images; Base64 embeds them
• API payloads — sending images as part of a JSON body
• Offline-first apps — embed assets so they work without internet

When NOT to use Base64

• Large images — Base64 is ~33% larger than the original binary. A 500KB image becomes ~670KB of text
• Images used on many pages — can't be cached separately by the browser
• Any image over ~10KB where performance matters

How to Use Base64 Images in HTML and CSS

<!-- In HTML img tag -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Logo" />

/* In CSS background */
.logo {
  background-image: url('data:image/svg+xml;base64,PHN2...');
  width: 32px;
  height: 32px;
}