Image to Base64 Converter
Convert images to Base64 encoded strings for embedding in HTML and CSS. Supports PNG, JPG, GIF, SVG, and WebP.
About this calculator
Convert an image to a Base64 string for embedding in HTML or CSS. Supports PNG, JPG, GIF, SVG and WebP, and lets you copy either the full data URI or just the Base64 text.
Embedding small images saves HTTP requests and keeps a component self-contained.
How to use it
- Select an image.
- Press Copy Full Data URI or Copy Base64 Only.
How it works
A data URI embeds a file in text: data:image/png;base64,iVBOR…. The browser decodes the string back into the image, so no separate request is needed. Base64 makes the data about 33% larger, so embedding pays off only for small images (a few KB), such as icons and tiny logos.
Worked example
Typical use
| Full data URI | data:image/png;base64,iVBOR… |
| Base64 only | iVBOR… |
Tips and common mistakes
- Inline only small images. Large ones slow the page and cannot be cached separately.
- SVG icons can often be used as plain text in a data URI without Base64.
- Compress images before encoding.
- Data URIs work in HTML img tags, CSS backgrounds and emails (with varying support).
- For repeated use, a normal image file is cached by the browser and is usually better.
Frequently asked questions
What is a Base64 image?
An image encoded as text and embedded directly in HTML or CSS.
When should I use a data URI?
For tiny icons that you want without an extra request.
Does it work in email?
Support varies; many email clients block data URIs.
Why is the string so long?
Base64 adds 33% and images are large.
Can I decode back to an image?
Yes, paste the string into the decode box and preview.
Is my image uploaded?
No, it stays in your browser.