Image file

Data URL

Image Base64 conversion guidance

Move small icons, test images, and data URLs between files and strings for CSS, HTML, and API samples.

Create data URLs

Convert small PNG, JPG, WEBP, or SVG files into data URLs for sample HTML or temporary test code.

Restore from strings

Decode a received Base64 image string in the browser to inspect what it actually contains.

No external upload

Image reading and conversion happen in the browser; the file or Base64 string is not uploaded by this tool.

How to use it

Select an image file to generate a data URL.

Check string length and MIME type before placing the value in HTML, CSS, or JSON samples.

When decoding, distinguish between a full data URL and raw Base64 text.

For production use, consider file size and caching before embedding images as data URLs.

Real input and output

A small icon as a data URL

Input

icon.png (1.2 KB)

Output

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

Paste it straight into CSS or HTML and the image renders with no extra request.

Errors you will hit

The file gets bigger

Base64 adds roughly 33% to the original size. Embedding images larger than a few dozen KB bloats the HTML or CSS and slows first render. Reserve it for small icons.

Browser caching stops working

A data URL lives inside the document, so it cannot be cached as a separate image. Keep images reused across pages as normal files.

Things to check

Base64 increases size

Base64 is usually longer than the original binary file. Large data URLs can make HTML and CSS heavy.

Check the MIME type

A prefix such as data:image/png;base64 should match the actual image format to avoid unexpected browser or API behavior.

Tools that pair well