Image to Base64 Converter

Convert images to Base64 data URIs online. Supports PNG, JPG, GIF, SVG. Free image encoder.

Upload Image

Drag & drop an image or browse

PNG, JPG, GIF, SVG, WebP

Base64 Output

CSS Background Snippet

About Image to Base64

Convert images to Base64-encoded data URIs for embedding directly in HTML, CSS, or JavaScript. Useful for small icons, email templates, and reducing HTTP requests.

Video Tutorial

2:30

Video coming soon — full transcript available below

Chapters

Full transcript searchable

0:00

What Base64 image encoding is and when to use it

Welcome to this Image to Base64 tutorial. Normally, images are referenced in HTML and CSS as file paths or URLs, which require a separate HTTP request to download. Base64 image encoding converts the image binary data into a text string that can be embedded directly into HTML, CSS, or JSON. The result is called a data URI. Benefits: eliminates HTTP requests for small images, works in email HTML (which cannot reference external URLs), works offline or in restricted network environments, and simplifies single-file HTML.

0:28

Upload an image and get the Base64 string

Open the Image to Base64 converter on ToolPilot.dev. Click the upload area or drag and drop an image file. Supported formats include PNG, JPEG, GIF, WebP, and SVG. The tool reads the image entirely in your browser using the FileReader API. The Base64-encoded string appears in the output area. For a typical 10KB PNG, the Base64 string will be about 13KB of text.

1:00

Copy as CSS background-image

Click 'Copy as CSS' to get the output formatted for use as a CSS background image — background-image with a data URI value containing the MIME type, base64 label, and the encoded string. This is ready to paste directly into your stylesheet. Your browser knows to render it as an image based on the MIME type included in the data URI.

1:28

Copy as HTML img tag

Click 'Copy as HTML' to get a complete img tag with the src attribute set to the data URI. This works in any HTML document and email clients that don't support external image loading. The image renders without any network request — the data is right there in the HTML.

1:55

Size considerations and best practices

Base64 increases image size by approximately 33 percent. For large images, this overhead is significant and will slow page rendering. Best practice: use Base64 encoding only for small images under 5KB — icons, tiny logos, background patterns. For larger images, use a CDN or optimize with WebP format. SVG files are particularly well-suited for Base64 embedding because their text-based nature compresses well.

2:20

Wrap-up

The Image to Base64 converter on ToolPilot.dev processes images entirely in your browser — the image data never leaves your device. This is especially important for logos, UI mockups, or any proprietary imagery. The tool supports all common web image formats and provides CSS and HTML output formats for direct use. Visit ToolPilot.dev for this and 19 other free developer tools.

Transcript covers all 6 chapters (2:30 total).

Frequently Asked Questions

What does the Image to Base64 converter do?

The Image to Base64 Converter reads an image file (PNG, JPG, GIF, SVG, WebP) from your computer and encodes it as a Base64 data URI string that can be embedded directly in HTML, CSS, or JSON without a separate image file.

What is a Base64 data URI?

A data URI is a URL-like string that embeds file data directly: data:image/png;base64,iVBORw0KGgo... This data URI can be used as the src attribute of an <img> tag or as a CSS background-image value.

When should I use Base64 images?

Use Base64 images for: small icons and logos embedded in CSS to reduce HTTP requests, critical above-the-fold images for faster rendering, email HTML where external images are blocked, and SVG sprites in JavaScript applications.

What is the downside of Base64 encoding images?

Base64 encoding increases image data size by approximately 33%. Embedded images cannot be cached separately by the browser. For large images, this is a net performance loss — only embed images smaller than 2-5KB as Base64.

What image formats are supported?

The Image to Base64 Converter supports PNG, JPG/JPEG, GIF, SVG, and WebP files. The tool automatically generates the correct MIME type in the data URI (data:image/png, data:image/jpeg, etc.).

How do I use a Base64 image in HTML?

<img src="data:image/png;base64,YOUR_BASE64_STRING" alt="My image" />. Replace YOUR_BASE64_STRING with the output from the converter.

How do I use a Base64 image in CSS?

.element { background-image: url('data:image/png;base64,YOUR_BASE64_STRING'); } This embeds the image directly in your stylesheet.

Is the image uploaded to your server?

No. The Image to Base64 Converter uses the FileReader API to read the image entirely in your browser. No file is ever uploaded to any server, making it safe for confidential or proprietary images.

How do I decode a Base64 string back to an image?

To convert a Base64 string back to an image file, use a programming language: in Python: import base64; data = base64.b64decode(b64string); open('image.png', 'wb').write(data).

Code Examples

Ready-to-use implementations in popular programming languages. Copy, paste, and run.

Convert Image to Base64 in JavaScript

// Convert file input to Base64 (browser)
function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Usage with file input
// const input = document.querySelector('input[type=file]');
// const base64 = await imageToBase64(input.files[0]);
// document.querySelector('img').src = base64;

Convert Image to Base64 in Python

import base64

# Encode image file to Base64
with open('photo.png', 'rb') as f:
    img_base64 = base64.b64encode(f.read()).decode()

# Create data URL for HTML embedding
data_url = f'data:image/png;base64,{img_base64}'

# Decode Base64 back to image file
img_data = base64.b64decode(img_base64)
with open('output.png', 'wb') as f:
    f.write(img_data)

Convert Image to Base64 in Go

package main

import (
	"encoding/base64"
	"fmt"
	"os"
)

func main() {
	data, _ := os.ReadFile("photo.png")
	encoded := base64.StdEncoding.EncodeToString(data)
	fmt.Printf("data:image/png;base64,%s...\n",
		encoded[:50])
}

Convert Image to Base64 in Bash

# Encode image to Base64
base64 photo.png > photo_b64.txt

# Create data URL
echo "data:image/png;base64,$(base64 photo.png)"

# Decode Base64 back to image
base64 -d photo_b64.txt > restored.png

Related Workflow Guides

🖼 Embed Images Inline with Base64 Encoding → 📧 Build HTML Emails: Embed Images → Encode HTML → Minify CSS → ⚡ Optimize Web Assets: Image Base64 → Encode → URL-Safe →

Compare with alternatives

Toolpilot vs Base64-Image.de Toolpilot vs Base64Encoder.io