Image ↔ Base64 Converter

Convert images to Base64 data URLs and decode Base64 back to images

Image to Base64

Drag & drop an image here

or click to select a file

Choose Image

Supports JPG, PNG, GIF, WebP, SVG (Max 5MB)

Base64 to Image

Base64 String

Image Base64 Guide

Learn how to use Base64 for images in web development.

What are Base64 Images?

Base64 images are embedded directly in HTML/CSS using data URLs. Instead of linking to external files, the image data is encoded as text and included in the code.

Format: data:image/[format];base64,[encoded data]

When to Use Base64 Images

Use Base64 for small icons, logos, or images that need to load instantly without HTTP requests. Avoid for large images as they increase page size and aren't cached separately.

Best for: Icons, small UI elements, critical above-the-fold images

Base64 Image Examples

HTML Usage

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="Red dot">

CSS Usage

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
}