Image to Base64

Q: What is a data URL?

A way to put a file's bytes inside a link. It starts with data:, the file type such as image/png, and ;base64,, followed by the Base64 text. Browsers show it exactly as if the image had been loaded from a separate file.

Turn an image into a Base64 data URL you can paste straight into HTML, CSS, Markdown or JSON.

Your files never leave your device

Drop an image here

Choose an image

PNG, JPEG, WebP, GIF, BMP, AVIF or SVG. Or drag it anywhere on this page.

Opened on this device. Nothing is uploaded.

One image at a time, up to 10 MB. PNG, JPEG, WebP, GIF, BMP, AVIF and SVG.

How to convert an image to Base64

Choose an image, or drag it onto the page.
Pick the form you need: data URL, plain Base64, CSS, an HTML img tag or Markdown.
Press Copy, or download the text as a file.

Embedding images as text

HTML, CSS, JSON, Markdown and email bodies are text, but images are binary. Base64 bridges the two by writing the image's bytes with 64 safe characters, so the whole picture can sit inside a stylesheet rule, an img tag or a configuration file without a separate download.

This tool reads the file in your browser, checks its real type from the first bytes, and builds the snippet you choose around the encoded text. The image itself is not changed: decoding the Base64 gives back the exact original file.

Tips

Shrink the image first with Compress image or Resize image; every byte saved is a third more saved in Base64.
For simple icons, an SVG is often smaller than any PNG, even as Base64.
To decode Base64 back into a file, or encode any other file, use Base64 encode and decode.

Questions

What is a data URL?

A way to put a file's bytes inside a link. It starts with data:, the file type such as image/png, and ;base64,, followed by the Base64 text. Browsers show it exactly as if the image had been loaded from a separate file.

Why is the Base64 bigger than the image?

Base64 spells every 3 bytes as 4 text characters, so the text is about 33 percent larger than the file. Web servers that compress text win some of that back, but an inlined image is still larger than the same image served on its own.

When should I inline an image?

For small things: icons, tiny backgrounds and placeholders under a few kilobytes, or when a single self-contained HTML file or email is required. Large images are better as separate files, because a data URL cannot be cached on its own and is downloaded again with every page or stylesheet that contains it. The tool warns you above 100 KB.

How is the file type decided?

From the bytes in the file, not its name, so a PNG saved with a .jpg extension still gets image/png. SVG files are recognised from their text and labelled image/svg+xml.

Is my image uploaded?

No. The image is read and encoded in your browser, on your device.