Image file

Data URL

Image Base64 conversion guidance

Converting a small icon or test image to a data URL lets you inline it in code. It saves a request, but the result is about 33% larger and cannot be cached separately, so it suits only genuinely tiny images. In the other direction, decoding a data URL back to a file shows you what you were sent.

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.

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.

A data URL is about 33% larger

Base64 turns three bytes into four characters, so the result grows by roughly a third. For tiny icons, saving a request wins; for large images, a cacheable file is faster.

Inlining into CSS defeats caching

A data URL inside CSS makes the image part of the stylesheet. Changing one image invalidates the whole file, and the browser cannot cache the image separately. Do not inline images that change often.

Data URLs ruin logs and diffs

A single line of tens of thousands of characters makes git diffs unreadable and code review impractical. In an error log it drowns out everything else. Inline only genuinely tiny images.

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.

Tools that pair well