How it works
- 01
Drop an image
PNG, JPG, SVG, WebP, GIF, AVIF or ICO. The bytes are copied as they are, so transparency and animation survive.
- 02
Pick the shape
A full data URI, the bare Base64, or a CSS url(). Add quotes and line wrapping if your file needs them.
- 03
Paste it in
Copy the value, or the ready-made CSS, HTML, JSX or Markdown snippet below it.
When inlining is worth it
Every inlined image saves one request. That mattered more before HTTP/2, which fetches many files down one connection. The clear wins now are small assets that would otherwise hold up first paint. An icon in critical CSS is one.
Above about 4 kB, inlining usually costs more than it saves. Base64 is a third larger than the file, and the browser cannot cache it apart from the document that holds it. Email is a poor fit too, because some major clients, Gmail among them, do not show data URI images.
- Formats
- PNG, JPG, SVG, WebP, GIF, AVIF and ICO.
- Output
- Data URI, bare Base64, or CSS url(), with optional quotes.
- Snippets
- CSS, HTML, JSX and Markdown, each quoted the way it needs.
- Size
- Base64 is a third bigger than the file. Ceiling is 10 MB.
What the type comes from
The media type is read from the first bytes of the file, not from its name. A PNG renamed to .jpg still encodes as image/png, because that is what a browser will find when it decodes the data URI.
A PNG also says in the same header whether it has an alpha channel, so the tool can report that without decoding the picture. Other formats do not, and the tool says nothing instead of guessing.