How to Convert an Image to Base64 (for CSS & HTML)

The quickest way to embed an image directly in your CSS or HTML — no separate file, no extra network request — is to convert it to a Base64 data URI. Drop your file into the Image to Base64 tool and it hands you a string you can paste straight into a stylesheet or an <img> tag.

What a data URI looks like

A data URI packs the whole image into a single text string:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

It has three parts: the data: scheme, the MIME type (image/png, image/jpeg, image/svg+xml), and the Base64-encoded bytes after the comma. The browser decodes that text back into pixels — no HTTP request needed, because the image is the string. (Base64 is encoding, not encryption; anyone can decode it. See Is Base64 Encryption? for why that distinction matters.)

Convert and use it

1. Open the Image to Base64 tool and upload your image.
2. Copy the generated data:... string.
3. Paste it where a URL would go:

/* CSS */
.icon { background-image: url("data:image/png;base64,iVBOR..."); }

<!-- HTML -->
<img src="data:image/png;base64,iVBOR..." alt="logo">

The conversion runs in your browser, so the image is never uploaded. For SVG specifically, the SVG to Base64 tool handles the markup cleanly, and you can reverse any string back into a file with Base64 to Image.

When inlining actually helps

Inlining shines for small, static assets: a 1–2 KB icon, a tiny background texture, a sprite used above the fold. Folding those into your CSS removes a round-trip, which can shave latency on the critical render path. If your source is a JPG or a quirky format, convert it to a clean PNG first with Image to PNG, then encode.

When NOT to inline images

Base64 is the wrong tool more often than people expect:

• Large images. Base64 inflates data by about 33%, so a 400 KB photo becomes ~530 KB of text baked into every page that references it — heavier, not lighter.
• Anything cached or reused. A normal image file is downloaded once and cached across pages; an inlined one is re-downloaded with the HTML every single time, since it can't be cached separately.
• Frequently changing assets. Editing an inlined image means editing (and re-shipping) the HTML or CSS.
• Content images that need alt, lazy-loading, or CDN delivery. Keep those as real files.

Rule of thumb: inline a handful of tiny icons; link everything else with a normal Image to Base64 round-trip only when the request savings genuinely outweigh the size bloat.