# Image to Base64

> Turn a small image into a Base64 data URL you can paste into HTML or CSS.

URL: https://uttir.com/image-to-base64
Categories: image-tools, encoding-tools
Privacy: Your image is encoded locally in your browser and never uploaded.

## About

A Base64 data URL embeds an image directly in HTML or CSS, avoiding an extra request. This tool encodes images up to 2 MB and shows the resulting string with its character count so you can judge whether embedding is sensible.

For anything larger, linking a real file is almost always the better choice — Base64 also adds ~33% size overhead.

## How to use

1. **Choose a small image** — Under 2 MB is recommended.
2. **Copy the data URL** — Paste it into a src attribute or CSS url().

## Examples

### Embedding in HTML

The data URL goes straight into the src attribute.

Output:

```
<img src="data:image/png;base64,iVBORw0KGgo…" alt="">
```

## FAQ

### When should I use a data URL?

For tiny, frequently-used assets like icons where avoiding an extra request wins. For real photos, serve a file instead.

### Does the data URL work everywhere?

Yes. Data URLs are supported by every modern browser in HTML <img src>, CSS background-image, and JS. They are also useful in CSS preprocessors and design tools.

### Can I encode SVGs the same way?

Yes, but it is rarely useful. An inline SVG is usually smaller than the same image as a data URL, and it scales without quality loss. Encode raster images (PNG, JPG, WebP) as data URLs; embed SVGs as text.

## Related tools

- [Base64 Encoder](https://uttir.com/base64-encoder) — Encode any text — including emoji and non-Latin scripts — into standard Base64.
- [Favicon Generator](https://uttir.com/favicon-generator) — Generate favicon PNGs at 16, 32, 48, and 180 px from any image.

---

For the full HTML page with the live tool, visit https://uttir.com/image-to-base64.
This file is the markdown rendering at https://uttir.com/image-to-base64.md. See https://uttir.com/llms.txt for a site-wide summary.