Image to Data URI Converter

Encode a PNG, JPG, SVG, or WebP as a base64 data URI you can paste straight into a CSS background or an img src. One less HTTP request.

Upload a file to get started. Processing runs entirely in your browser.

How to use

  1. Drop a PNG, JPG, SVG or WebP.
  2. Copy the generated data URI.
  3. Paste it into a CSS background or an img src.

Frequently asked questions

When is a data URI worth it?

For small assets: icons, a 1x1 spacer, a tiny background pattern. It saves a request, which matters most on a page that would otherwise fetch a dozen of them.

Why does the string get so long?

Base64 encodes three bytes into four characters, so the text is about a third larger than the file. A 40 KB image becomes roughly 54 KB of markup.

Does it hurt caching?

Yes, which is the main cost. An inlined image is re-downloaded with the page every time instead of being cached on its own, so it is the wrong choice above a few kilobytes.

Can I inline an SVG this way?

You can, though for SVG a URL-encoded data URI is smaller than base64, and pasting the SVG markup straight into the HTML is usually smaller still.

Last updated

Powered by maratool