Nouplo

Image to base64

A picture you can paste into a stylesheet.

Drop files here

or click to choose from your deviceAccepted: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG, ICO

Up to 3 files per runUp to 20 MB per file10 runs per dayRemove limits with Pro✓ Works offline

Your files stay on your device

This tool runs entirely in your browser. Nothing is uploaded, nothing is stored, and you can even turn off your internet connection before you start.

How it works

  1. Add the picture. PNG, JPEG, GIF, WebP, AVIF, SVG, BMP and ICO all work.
  2. Choose what you want around it — a bare data URI, a CSS rule, or an img tag.
  3. Copy the result.
  4. Check the size note. Inlining saves a request, and stops being worth it sooner than people expect.

Frequently asked questions

Does it re-encode or compress the picture?
No. The file’s bytes are read and encoded as they are, so an optimised PNG stays optimised and an animated GIF stays animated. A tool that “helpfully” re-encoded would quietly change an icon’s colours.
How much larger does it get?
About a third. Base64 turns three bytes into four, plus the prefix. That is the trade for saving an HTTP request.
When is inlining actually worth it?
For something small that is needed immediately — an icon, a 1×1 spacer, a tiny logo in an email. Past a couple of kilobytes the extra bytes on every page load usually cost more than the request saved, and a cached file wins.
Can I inline an SVG this way?
You can, and often you should not: an SVG is text, so it can go straight into the HTML where CSS can style it. Base64 is for when it has to be a single opaque string.
Is anything uploaded?
No. It all happens in your browser.

Related tools

⇲ Compress image Make JPG, PNG and WebP files smaller for email, websites and messaging apps, right in your browser. ⇄ Convert image One converter for every common image format, including iPhone HEIC and SVG, without leaving your browser. ◰ Favicon generator One picture in; favicon.ico, apple-touch-icon, manifest icons and the tags to paste out. ◉ Colour picker from image Click the picture for a colour code; get its main colours as a palette.