Dev Tools, 7 tools

Converters, 4 tools

Text Tools, 5 tools

Color Tools, 2 tools

Generators, 3 tools

Image Tools, 4 tools

PDF Tools, 6 tools

Calculators, 4 tools

Open tools · 0

About

Image to Base64

Drop a picture and it comes back as one line of Base64, already wrapped as a data: URI with its type, data:image/png;base64, followed by the picture itself. Copy that, or the ready line for a stylesheet or an <img> tag, and the picture travels inside the code with no separate file to host.

What it does

  • The type in the data: URI comes from the file, or from its first bytes when the file does not say.
  • A data: URI is written in the standard alphabet, padded and on one line, as browsers expect, whatever the other settings say.
  • Copy as CSS gives a background-image line, and Copy as <img> a tag with the picture inside it.
  • The Base64 is a third larger than the picture: a 12 KB icon becomes about 16 KB of text.
  • Fonts work the same way: a WOFF2 file becomes a data:font/woff2 URI for an @font-face rule.
  • The picture is shown beside the result, so you can see it is the right one.

How to use it

  1. Drop the picture on the window.
  2. Leave Data URI ticked for HTML or CSS, or untick it for plain Base64.
  3. Copy the line you need: the URI, the CSS, or the <img>.

What it does not do

  • Pictures in email: Gmail and Outlook do not show data: URI images, so an email’s pictures belong in attachments or links.
  • Shorter URIs for SVG: an SVG can go into a data: URI as URL-encoded text, often smaller than Base64, but this writes Base64 for every file.

Questions

When should I put an image in a data URI?

For small things used once, such as an icon or a tiny background, where saving a request is worth more than the third it adds. A large picture belongs in its own file, which the browser can cache and load alongside the page.

Does a data URI work in every browser?

Yes, in every current browser, in img tags, CSS backgrounds and fonts. A site with a strict Content Security Policy has to allow data: for images, or the picture is blocked.

How do I turn the Base64 back into a picture?

Paste it into the Base64 box: the decoder reads the data: part, recognises the PNG or JPEG from its first bytes, and offers the file to download.

Everything here runs in your browser. Nothing you type, paste or open is uploaded, and there is no account and no queue. How that works.

Often used with

More in Converters

  • Unit Converter: Convert length, weight, temperature, volume, area, speed, data size and nine more quantities, both ways, with the formula.
  • CSV Viewer & Editor: Open a CSV, Excel or JSON file as a table, tidy it (spaces, duplicates, garbled letters, dates and numbers) and save it as CSV, .xlsx or JSON.
  • JSON, YAML, XML & TOML: Convert between JSON, YAML, XML and TOML, keeping comments, key order and numbers exactly as written, and told what each format cannot carry.

All toolsAbout utilbrewPrivacy