When should I use a data URL?

For small images like icons and logos, where saving a request matters. Base64 adds about 33% to the size, so it is not ideal for large images.

Which formats are supported?

Any file reported by the browser as an image can be encoded, including PNG, JPG, GIF, WebP and SVG. Encoding does not optimize or sanitize its contents.

Is my image uploaded?

No. The file is read locally with the browser's FileReader; nothing leaves your device.

Does Base64 make an image smaller?

No. Base64 normally increases the byte count by roughly one third before document compression. It can simplify delivery for tiny assets, but it is not an image-compression method.

Image Tools

Image to Base64 / Data URI

Convert an image into a Base64 data URL you can embed inline.

Free browser toolRuns in your browserNo sign-up

Developer embed encoder

Generate implementation-ready image data

Compare source and encoded size, then copy a data URL, raw Base64, CSS, HTML or a reusable text file.

Local processingReview before export

Drop an image here, or

Data URLs embed the image directly, avoiding an extra request. Best for small images; large files make the data URL very long.

Delivery: Text representations only; large assets are better served as normal cacheable files.

About the Image to Base64 / Data URI

A data URL embeds an image directly in your HTML or CSS as Base64 text, avoiding a separate network request.

This tool converts an image into a full data URL and raw Base64, plus ready-to-paste CSS and HTML snippets.

It displays dimensions, MIME type, source size, encoded size and actual overhead so you can decide whether embedding is sensible.

It is ideal for small icons and sprites; for large images a normal file is usually better.

Key features

Drag and drop or choose a file
Copy data URL, raw Base64, CSS or HTML
Download the generated data URL as text
Shows dimensions, MIME type, sizes and overhead
Large-file delivery warning
Local, private conversion

How to use

1Drop or choose an image.
2Review the encoded overhead and large-file warning.
3Choose data URL for an image source, raw Base64 for an API payload, or the generated CSS or HTML snippet for direct embedding.
4Copy the representation your implementation needs or download it as text.
5Copy the data URL or raw Base64 output for the intended application.

Examples

Inline an icon

Input: icon.png

Output: data:image/png;base64,iVBORw0KGgo…

The image becomes a data URL you can paste into src or CSS.

Frequently asked questions

When should I use a data URL?: For small images like icons and logos, where saving a request matters. Base64 adds about 33% to the size, so it is not ideal for large images.
Which formats are supported?: Any file reported by the browser as an image can be encoded, including PNG, JPG, GIF, WebP and SVG. Encoding does not optimize or sanitize its contents.
Is my image uploaded?: No. The file is read locally with the browser's FileReader; nothing leaves your device.
Does Base64 make an image smaller?: No. Base64 normally increases the byte count by roughly one third before document compression. It can simplify delivery for tiny assets, but it is not an image-compression method.

Open a related tool to prepare your files or refine the finished result.