Image
Image to Base64 (Data URI)
Turn an image into a data URI you can embed directly in HTML or CSS, with ready-to-paste snippets.
Drop an image here, or click to choose
Supports JPG, PNG, WebP, GIF, AVIF, SVG
What is Image to Base64 (Data URI)?
A data URI embeds a file's contents directly into your source rather than pointing at a path. For images, that means the browser makes no additional network request to fetch it — the image already arrived inside the HTML or CSS.
The technique only pays off for small images. Base64 inflates data by roughly 33%, and an embedded image cannot be cached separately, so every page load re-downloads it. For a few-kilobyte icon, saving a round trip is worth it; for a large photo it is a net loss.
How to use
- Drop an image onto the box, or click to choose a file.
- You get three forms: the raw data URI, an HTML img tag, and a CSS background-image declaration.
- Click Copy on the form you need and paste it straight into your source.
- Check the encoded size line to judge whether embedding is worthwhile.
Frequently asked questions
Why is the Base64 string longer than the original file?
Because every 3 bytes of binary data are represented by 4 text characters, inflating size by about 33%. That is the inherent cost of representing binary as text.
When should I embed images as Base64?
When the image is small and appears on every page — icons, background patterns, placeholders. The commonly cited threshold is around 10 KB. Above that, a separate image file is faster because it can be cached.
Can I embed SVG this way?
Yes, but inlining the SVG markup directly into your HTML is usually better — it is shorter than Base64 and lets you restyle the graphic with CSS.