A way of writing the file's contents directly into the place that would normally hold a link to it. `src="data:image/png;base64,iVBOR…"` carries the whole image, so the browser has nothing further to fetch.

When should I inline an image instead of linking to it?

When it is small — a few kilobytes at most — and appears on nearly every page. Below that threshold the saved request is worth the size. Above it, you are making a render-blocking file bigger and giving up separate caching for it.

Why is the Base64 bigger than the original file?

Base64 represents three bytes using four ASCII characters, so the result is about 33% larger, plus a short scheme prefix. That overhead is the price of storing binary data somewhere only text is allowed.

Does inlining images make a site faster?

For a handful of tiny assets, yes. Past that it makes things worse: the containing file grows, cannot be cached independently, and holds up rendering until it has fully arrived. Modern HTTP/2 and HTTP/3 also made the extra-request argument far weaker than it was.

Is my image uploaded anywhere?

No. It is read and encoded by your browser, which matters here because the images people inline are usually logos and interface assets from work that is not public yet.

Image to Base64

Turn an image into a data URI, ready to paste into CSS, HTML or Markdown.

ImageRuns in your browserFree, no signup

About the Image to Base64

A data URI puts the image inside the document that references it, so the browser needs no second request to fetch it. For a small icon that appears on every page, that is a real saving: the image arrives with the stylesheet and paints immediately, instead of costing a round trip.

It stops being a saving quickly. Base64 grows the data by about a third, an inlined image cannot be cached separately from the file containing it, and it blocks that file until the whole thing has downloaded. A 200 KB photograph inlined into a stylesheet is 270 KB of render-blocking CSS that every visitor re-downloads whenever anything else in that stylesheet changes. The size verdict shown alongside the result says plainly which side of that line your image is on.

SVG is the format where this usually makes sense — small, and inlining sidesteps the same-origin restrictions that stop an external SVG being styled by the page. Photographs almost never belong here.

The encoding happens in your browser. Nothing is uploaded, which matters more than usual for this tool: the images people inline are often logos and assets from work that has not shipped yet.

How it works

Drop in the image.
Pick the form you need — raw Base64, a data URI, or a ready-made CSS, HTML or Markdown snippet.
Copy it. The file is never uploaded.

Frequently asked questions

What is a data URI?: A way of writing the file's contents directly into the place that would normally hold a link to it. `src="data:image/png;base64,iVBOR…"` carries the whole image, so the browser has nothing further to fetch.
When should I inline an image instead of linking to it?: When it is small — a few kilobytes at most — and appears on nearly every page. Below that threshold the saved request is worth the size. Above it, you are making a render-blocking file bigger and giving up separate caching for it.
Why is the Base64 bigger than the original file?: Base64 represents three bytes using four ASCII characters, so the result is about 33% larger, plus a short scheme prefix. That overhead is the price of storing binary data somewhere only text is allowed.
Does inlining images make a site faster?: For a handful of tiny assets, yes. Past that it makes things worse: the containing file grows, cannot be cached independently, and holds up rendering until it has fully arrived. Modern HTTP/2 and HTTP/3 also made the extra-request argument far weaker than it was.
Is my image uploaded anywhere?: No. It is read and encoded by your browser, which matters here because the images people inline are usually logos and interface assets from work that is not public yet.

Privacy

Everything happens locally. Your files are read by your own browser, processed on your device, and never uploaded — closing the tab is all it takes to erase them.

Related tools

Convert Image

Convert between PNG, JPG, WEBP and SVG — in batches, without uploading.

Compress Image

Cut image file size dramatically with barely any visible quality loss.

EXIF Viewer and Remover

See the hidden data in a photo — including GPS coordinates — and strip it without re-encoding.

Favicon Generator

Turn a logo or a letter into every favicon size, plus the ICO, manifest and HTML.

Remove Background

Cut a solid or near-solid background out of an image and export a transparent PNG.

Social Media Image Resizer

Crop one image to every platform size at once — Instagram, X, LinkedIn, YouTube and the rest.