How to Convert an Image to Base64 (and Back) for HTML, CSS and Email

Base64 is a way to write binary data, such as a picture, as plain text. Developers and email designers use it to embed small images straight into HTML, CSS or an email signature without hosting a separate file.

Quick answer

Choose a picture to get a data address (a data:image/...;base64, string) that you can paste into an <img src> or a CSS url(). Or paste a Base64 string to see the picture and download it.

When Base64 helps

• Tiny icons and logos inside a stylesheet, saving an extra request.
• Email signatures where linked images are often blocked.
• Single-file demos and documentation where everything must live in one file.
• Quick tests with APIs that accept pictures as text.

When it hurts

Base64 makes the data about 33 percent larger, and the browser cannot cache an embedded image separately. For anything over a few kilobytes, a normal image file is better for speed and for search engines.

How to use the tool

1. Open the tool and choose Image to Base64.
2. Pick your picture; keep it small (under 20 KB is a good habit).
3. Copy the full data address, or the Base64 text alone.
4. To go back, choose Base64 to image, paste the code and download the picture.

Example

<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

Tips

• Compress the image first so the string stays short.
• SVG is better pasted as text or encoded with URL encoding than with Base64.
• Never paste secrets or private pictures into online tools that upload data. This one works in your browser, so nothing leaves your device.