ToolsTray

Star a tool to keep it here.

Image to Base64 Converter

Convert an image to Base64 and copy it four ways: the data URI, a ready-made <img> tag, a background-image rule, or the bare payload. PNG, JPEG, GIF, WebP and SVG all encode.

Drag & drop or paste an image here, or

Data URI

data:image/…;base64,…

The form you choose, in full, as soon as an image is here.

Chooses which form the well above holds.

Written into the img tag; empty tells a screen reader the image is decorative.

The size it costs

—characters

Measured against 4 KiB, the size Vite inlines by default.

How to use

  1. Drop the image on the zone at the top, or press Choose file. A screenshot still on the clipboard works too: press Ctrl+V or Cmd+V anywhere on the page and the zone picks the image data straight off it, while text on the clipboard is ignored.
  2. Choose the Form the well should hold: the data URI for a src attribute or JSON, the img tag for a finished element, the CSS background line for a rule, or the raw payload for an API field. An SVG adds a fifth, percent-encoded in url().
  3. Type the Alt text the img tag should carry, or leave it empty for a decorative image, then press Copy, or copy any other form from its card.

About this tool

Converting an image to Base64 gives you a data URI, which is the whole picture written out as text so it can sit inside a stylesheet or an HTML file with nothing left to fetch. Drop a PNG, JPEG, GIF, WebP or SVG on the zone at the top and every form appears at once as a card with its own copy: the data URI on its own, an <img> element built around it, a background-image declaration, and the raw payload with the data: prefix cut off. The form you choose is shown in full in the well above the cards.

The drop zone doubles as a sanity check. Once a file lands you get a thumbnail of it plus its type, the file size and the pixel dimensions, which is usually enough to catch the moment you grabbed the 2400px original instead of the 48px icon you meant to inline. The type comes from the file's own first bytes rather than its name, so a PNG renamed photo.jpg still leaves here as data:image/png, and the page says what the name claimed.

The report beside the well measures the result against 4 KiB, the size Vite inlines by default. Base64 runs a third longer than what it encodes, so a 2 KB icon is a fair trade and a 180 KB photo is a quarter of a megabyte of text in every stylesheet that carries it; past the line the page says so and points at the Image Compressor.

A 48 × 48 favicon, inlined into the stylesheet

The icon is a 2,873-byte PNG. Drop it on the zone and the chips read PNG, 2.8 KB and 48 × 48 beside a thumbnail, which is the moment to notice whether you picked the icon or the 2400px artwork it was cut from. The four boxes fill together. Data URI is 3,854 characters long: 22 of them are the prefix, data:image/png;base64, with the other 3,832 forming the payload, ending in a single = pad because 2,873 is not a multiple of three. The <img> tag wraps that string in 21 more characters, the CSS rule in 26, and the bracketed figure beside Raw Base64 reads (~2.8 KB), the decoded size worked back from the payload length and its padding.

Paste the CSS box into the .logo rule and the icon paints with no request at all. Run the 214 KB team photo through the same zone for comparison and the payload alone is 292,184 characters, 285 KB of text sitting in a stylesheet that used to be 214 KB of image on disk. That is the trade in one number. The icon earns its place inline and the photo belongs in a file of its own.

Good to know

  • An inlined image cannot be cached on its own. It travels with every copy of the HTML or CSS that carries it and adds about a third to the byte count on the way, so the trade only pays off on small files needed straight away.
  • One image per visit. The zone holds a single file and a second drop replaces the first, so a set of twelve icons is twelve drops, each copied out before the next goes in.
  • Bytes no image signature names keep the type the file's name gives, and the page says it was taken from the name; the browser decides whether it can show them.

Frequently asked questions

How big is too big to inline?

Vite's default line is 4 KiB, and the report here measures against it. Below that, skipping a request tends to win. Above it you are paying the 33% Base64 overhead on every page load and giving up separate caching for the image. Compress or resize the file first and encode the smaller version, because the encoder only reads bytes and never touches the picture itself.

Should an SVG go through here at all?

Usually not as Base64. Raw <svg> markup pasted into the page is smaller and stays styleable with CSS, and when you do need it inside a url(), the fifth form percent-encodes only what a URL needs, which beats Base64 on size. Base64 earns its keep on raster formats, where there is no readable text form to paste.

What should the alt text say?

What the image means in its place on the page, in a sentence or less. A logo next to the company name, or a divider that only decorates, should keep an empty alt so a screen reader skips it; the field is written into the img tag with its quotes and ampersands escaped.

Can this turn a Base64 string back into a picture?

Not in this direction. There is no field here to paste a data URI into, only a file picker. For the trip back, the Base64 tool decodes a data URI and offers the bytes as a file named by their type.

Missing something in Image to Base64 Converter? Suggest a feature →

Tell someone who needs this.