---
title: Image to Base64 Converter — Data URI, HTML & CSS Output
url: https://varstatt.com/toolkit/img2b64
description: Convert images to Base64 data URIs, HTML img tags, and CSS background-image properties. Reverse mode included. All client-side.
section: Developer Toolkit (https://varstatt.com/toolkit)
tags: encoding
related: Base64 (https://varstatt.com/toolkit/base64), Image to B64 (https://varstatt.com/toolkit/img2b64), Placeholder (https://varstatt.com/toolkit/placeholder)
---
# Image to Base64

Convert images to Base64 data URIs, HTML img tags, and CSS background-image properties. Reverse mode included. All client-side.

## How It Works

1. **Upload an image** — Drag-and-drop or select PNG, JPEG, WebP, GIF, or SVG files.
2. **Choose output format** — Get raw Base64, data URI, HTML <img> tag, or CSS background-image property.
3. **Copy or reverse** — Copy any output format. Use reverse mode to paste a Base64 string and get the image back.

## FAQ

### When should I use Base64 images?

For small icons, logos, or inline images to reduce HTTP requests. Avoid for large images — the 33% size increase outweighs the benefit.

### What's a data URI?

A data URI embeds file data directly in HTML/CSS: data:image/png;base64,.... It eliminates the need for a separate image file.

### Is there a size limit?

No hard limit, but browsers may struggle with Base64 strings from images larger than ~10MB. For encoding plain text or non-image files, use the general [Base64 encoder](https://varstatt.com/toolkit/base64).

## Usage

This tool runs entirely in the browser — visit the URL above to use it.

## Related Tools

- [Base64](https://varstatt.com/toolkit/base64)
- [Image to B64](https://varstatt.com/toolkit/img2b64)
- [Placeholder](https://varstatt.com/toolkit/placeholder)