Advertisement
Guide
About the Image to Base64 Converter
A data URI lets you embed an image directly inside your HTML or CSS as a Base64-encoded string, instead of linking to a separate file. That means the image loads with the page in a single request — handy for tiny icons, email templates, and self-contained files. This tool converts any image into a data URI and gives you ready-to-paste CSS background-image and <img> snippets.
Drop in a PNG, JPEG, WebP, SVG, or GIF and copy whichever form you need. Everything runs in your browser, so your images are never uploaded.
When to inline an image — and when not to
Inlining shines for smallassets: icons, tiny logos, or images in a single-file HTML email where external files won't load. The trade-off is that Base64 is about 33% larger than the original bytes and can't be cached separately by the browser. For anything but small images, a normal linked file is usually better. As a rule of thumb, inline only images of a few kilobytes.
SVGs are a special case
SVGs are text, so they inline very efficiently and stay sharp at any size — making them ideal candidates for data URIs in CSS backgrounds. For the smallest result, run your SVG through the SVG Optimizer first to strip metadata, then convert it here.
How to use it
- 1Drop in or select an image (PNG, JPEG, WebP, SVG, or GIF).
- 2Copy the data URI, or the ready-made CSS or img-tag snippet.
- 3Paste it into your HTML, CSS, or email template.
- 4Prefer inlining only small images to avoid bloat.
Frequently asked questions
What is a data URI?
It is a way to embed a file — here, an image — directly in your code as a Base64 string prefixed with data:. The browser decodes it inline, so no separate file request is needed.
When should I inline an image as Base64?
For small assets like icons, or in self-contained files such as HTML emails. Base64 adds about 33% size and cannot be cached separately, so avoid it for large images.
Why is the Base64 larger than my image?
Base64 encodes every 3 bytes as 4 characters, so the text is roughly a third bigger than the original binary. That overhead is the cost of embedding it as text.
Can I convert an SVG to a data URI?
Yes. SVGs inline very efficiently since they are text. Optimizing the SVG first keeps the resulting data URI as small as possible.
Is my image uploaded?
No. The conversion happens entirely in your browser, so your images stay on your device.