Skip to content

Image to Data URL (Base64)

Turn an image into a Base64 data URL for HTML/CSS or quick tests.

Files

About this tool

Encode an image as a Base64 data URL you can paste directly into HTML or CSS. This removes one network request because the image travels inside your markup.

Why use it

  • Inline small icons and avoid an extra HTTP request.
  • Embed images in emails or single-file prototypes.
  • Copy the ready-to-use data URI with one click.

Common use cases

  • Inline a tiny logo into a CSS background rule.
  • Ship a self-contained HTML demo with no external assets.
  • Store a small image inside a JSON config.

Tips

  • Only inline small images — Base64 adds about 33% to the byte size.
  • Large data URLs bloat your HTML and hurt caching; keep big images as files.
How to use
  1. Choose a file.
  2. Copy the generated string.
  3. Use in img src or CSS.
FAQ
What is a data URL?
A Base64 string that embeds the whole image inside HTML or CSS so it loads without a separate file request.
When should I use a data URL?
For tiny icons or inline emails where avoiding an extra network request is worth the larger text size.
Is my image uploaded to make the data URL?
No. The Base64 string is generated locally in your browser.
Why is the data URL larger than the file?
Base64 encoding adds about 33% overhead, so data URLs suit small images best.
Can I paste the result into CSS?
Yes, use it as the value of a background-image url() or an img src attribute.
Does it work for SVG and PNG?
Yes, any image type your browser can read can be turned into a data URL.

Tools

Converters

Guides

Comparisons