Image to Base64
Turn an image into a Base64 data URI ready to paste into CSS or HTML.
Loading tool…
Encode any image into a Base64 data URI you can embed directly in CSS, HTML or JSON - handy for inlining small icons and avoiding extra network requests. Drop in a PNG, JPG, SVG or WebP and copy the ready-made data URI or a full <img> tag. The encoding happens in your browser, so your images are never uploaded.
Putting an image inside your code
A Base64 data URI turns an image into a long string of text that you can paste directly into CSS or HTML. The browser reads it as an image without making a separate request. That is occasionally exactly what you want: a tiny icon in a stylesheet, an image inside an HTML email, or an asset in a single file that has to work with nothing alongside it.
The costs are real
Encoding inflates the data by about a third, so the image is always larger as text than as a file. Worse, an embedded image cannot be cached separately, so every page load carries it again, and it blocks the stylesheet it sits in from finishing. A large photograph embedded this way makes a page measurably slower. This technique earns its place on small assets and hurts on big ones.
When to use it and when not to
- Good for icons and small graphics under a few kilobytes.
- Good for HTML email, where external images are often blocked by default.
- Good when a single self-contained file is a hard requirement.
- Bad for photographs, and bad for anything reused across several pages, where a normal cached file wins easily.
How to use Image to Base64
- 1
Upload the image you want to encode.
- 2
Copy the generated Base64 data URI or <img> tag.
- 3
Paste it into your CSS, HTML or code.
Frequently asked questions
It lets you embed an image directly in code, avoiding a separate file request. It is best for small images like icons.