# How to Convert an Image to Base64

> Convert images to Base64-encoded strings for embedding directly in HTML, CSS, or JSON without separate file requests.

- URL: https://www.browserutils.dev/how-to/convert-image-to-base64
- Published: 2026-04-29
- Updated: 2026-03-16

---

## Step 1: Upload your image

Drag and drop an image file or click to browse. Supported formats include PNG, JPEG, GIF, SVG, and WebP.

## Step 2: Choose the output format

Select whether you want a plain Base64 string or a complete data URI with the MIME type prefix, ready for use in an img tag or CSS background.

## Step 3: Preview the encoded result

See a preview of the image rendered from the Base64 string to verify the encoding is correct before copying.

## Step 4: Copy the Base64 string

Copy the encoded string to your clipboard. For HTML, use it in an img src attribute. For CSS, use it as a background-image url value.

There are situations where embedding an image directly into your HTML, CSS, or JSON payload makes more sense than serving it as a separate file. Small icons, email templates that need to work offline, and single-file HTML reports are common examples. The [image to Base64 converter](/tools/image-to-base64) handles the encoding so you can drop the result straight into your code.

## Understanding data URIs

A Base64-encoded image used in HTML or CSS takes the form of a **data URI**:

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

The `data:` scheme tells the browser to interpret the string as inline content rather than fetching a URL. The MIME type (`image/png`, `image/jpeg`, `image/svg+xml`) tells the browser how to decode the data. The Base64 payload is the binary image file encoded as ASCII text.

The key tradeoff is **network requests versus payload size**. Base64 encoding increases the data size by roughly 33% compared to the original binary file. However, it eliminates an HTTP request, which has its own overhead in terms of DNS lookup, TCP connection, and TLS handshake. For very small images (under 2-4 KB), the request overhead often costs more than the extra bytes, making inline Base64 a net win.

For larger images, external files served over HTTP/2 or HTTP/3 are almost always better. The browser can cache them independently, load them in parallel, and does not have to parse a massive Base64 string embedded in your HTML or CSS.

## Tips and best practices

- **Limit inline Base64 to small assets.** Icons, tiny logos, and simple graphics under a few kilobytes are good candidates. Photos and large illustrations should remain as separate files.
- **Use SVG when possible.** SVG images can be embedded directly in HTML without Base64 encoding. They are smaller, scalable, and can be styled with CSS. Only use Base64 for raster formats that cannot be replaced with SVG.
- **Be aware of CSP restrictions.** If your site uses a strict Content Security Policy, `data:` URIs for images must be explicitly allowed with `img-src data:`. Without this directive, inline images will be blocked.
- **Consider build-time inlining.** Tools like Webpack, Vite, and PostCSS can automatically inline images below a size threshold during the build process, so you do not have to manage Base64 strings manually in your source code.

## Common issues

- **The encoded string is enormous:** You likely encoded a large image. Check the original file size before encoding. If the Base64 string is more than a few hundred characters, the image is probably too large to inline efficiently.
- **Image does not render in email clients:** Some email clients strip `data:` URIs for security reasons. For HTML emails, consider using a hosted image URL with a CID attachment as a fallback.
- **Broken image in CSS `background-image`:** Make sure the data URI is wrapped in `url("data:image/png;base64,...")` with proper quoting. Missing quotes or an incorrect MIME type will cause the browser to fail silently.