Skip to content
TinySolve

Image to Base64

Turn an image into a data URI you can paste straight into CSS or HTML.

Runs in your browser — your files are never uploaded

Drop an image here

or

Up to 5 MB. Larger images produce enormous strings that slow a page down rather than speeding it up.

About the Image to Base64

A Base64 data URI puts the image itself inside the markup, so the browser needs no separate request to fetch it. For a small icon that is a genuine win — one fewer round trip, and the image appears at the same moment as the page that uses it.

For anything larger it is usually a mistake, and this tool shows you why rather than leaving you to find out. Base64 makes the data about a third larger, and an inlined image cannot be cached separately: every time the page or stylesheet changes, the entire image is downloaded again. A 200 KB photograph inlined into a stylesheet makes that stylesheet 270 KB and blocks rendering until it arrives.

The rough rule is a few kilobytes. Below that, inlining saves more than it costs. Above it, a normal image file loads faster and caches properly.

Four output shapes are offered: the raw Base64, a complete data URI, a CSS background rule and an HTML image tag — so you can paste the one you actually need rather than assembling it yourself.

The encoding happens in your browser and nothing is uploaded.

How to use the Image to Base64

  1. Add an image

    Up to 5 MB, though anything above a few kilobytes is usually better left as a normal file.

  2. Check the overhead

    The encoded size and the percentage increase are shown, so you can judge whether inlining is worth it.

  3. Pick the output you need

    Raw Base64, a data URI, a CSS background rule, or a complete HTML image tag.

  4. Copy it

    One click puts it on your clipboard, ready to paste into your stylesheet or markup.

Frequently asked questions

When should I inline an image as Base64?
For small icons and decorative graphics of a few kilobytes, where saving a network request outweighs the size penalty. Above roughly five kilobytes a normal image file almost always performs better.
Why does the Base64 make my file bigger?
Base64 represents three bytes using four characters, so the data grows by about a third. That is the unavoidable cost of expressing binary data as text.
Does an inlined image get cached?
Not separately. It is part of whatever file contains it, so every change to that stylesheet or page forces the image to be downloaded again. A normal image file is cached on its own and reused across pages.
Does this work in email?
Inconsistently. Gmail and several other clients block data URIs in images, so an inlined image often does not display. Hosted images with absolute URLs are the reliable approach for email.
Is my image uploaded?
No. It is read and encoded in your browser, so nothing is transmitted at any point.

You may also need

Base64 Encoder

Encode text to Base64, including emoji and every alphabet, with a URL-safe option.

Developer Tools

Image Compressor

Make JPG, PNG and WebP files smaller without a visible drop in quality.

Image Tools

JPG to WebP

Convert JPG and PNG images to WebP and make them meaningfully smaller for the web.

Image Tools

Image Metadata Remover

See exactly what your photo reveals — including where it was taken — then strip it.

Image Tools