Inlining images with Base64
Encoding an image to Base64 turns its binary bytes into plain ASCII text, which you can drop straight into a data URL and embed in HTML or CSS — no separate file, no extra HTTP request. The browser decodes it back to pixels on the fly.
The trade-off is size and caching. Base64 inflates the data by roughly 33%, and an inlined image can't be cached on its own — it re-downloads with the document every time. That makes inlining a win for small, critical assets (a logo, a handful of icons) and a loss for large photos, which are better served as normal, cacheable files. This tool shows the exact encoded overhead so you can judge.
The file is read entirely in your browser with the FileReader API and never leaves your device.
Inline (Base64) vs. linked file
The image travels inside your HTML/CSS — zero extra requests, but ~33% bigger and uncacheable.
A normal file the browser caches, compresses, and loads in parallel.
Where developers use it
Embedding an icon in CSS
Inline a small background icon as a data URL so a component ships in a single file with no extra request.
Self-contained emails
Encode a logo into the HTML so it renders even when a mail client blocks remote images.
Seeding test fixtures
Drop a tiny placeholder image straight into a JSON or test file as a Base64 string.
Frequently asked questions
Inline tiny, frequently-used assets — small icons, a logo, a 1×1 spacer — to save an HTTP request and avoid a flash of missing image. For anything larger, a normal <img src> is better: the file can be cached, compressed, and loaded in parallel. A good rule of thumb is to inline only images under a few KB.
Base64 encodes 3 bytes into 4 characters, so the data URL is about 33% larger than the original file (the tool shows the exact overhead). Inlining also can't be cached separately, so that weight is paid on every page load — another reason to reserve it for small assets.
Any raster or vector image your browser can read — PNG, JPG/JPEG, GIF, WebP, SVG, and more. The file is encoded byte-for-byte, so the resulting data URL carries the original format's MIME type (e.g. image/png).
A data URI embeds a file directly in a URL: data:[mediatype];base64,[data]. For an image that's data:image/png;base64,iVBOR… — the browser decodes it inline with no separate request, so it works anywhere a normal URL does (src, CSS background-image, etc.).
Yes. SVGs encode fine as Base64, though because SVG is text, many developers prefer to inline the raw <svg> markup or use URL-encoding instead — it's smaller and stays styleable with CSS. Base64 is the safe, universal option when you just need a single string.
No. The file is read locally with the browser's FileReader and encoded on your device — it's never uploaded, so screenshots, mockups, and private assets stay with you.