Image to Base64
Encode an image to a Base64 data URI with copy-ready CSS and HTML, or decode Base64 back into a downloadable image — all in your browser.
Drag & drop an image here
or click to browse — JPG, PNG, WebP, SVG, GIF
Encode and decode Base64 images
Base64 turns an image into a string of text you can drop straight into
your HTML or CSS, with no separate file to host. That's perfect for tiny
icons, HTML email and self-contained demos. This tool gives you the raw
data URI plus ready-to-paste background-image and
<img> snippets, and it works the other way too —
paste a Base64 string and get a real image file back.
When to inline vs. link
Inlining saves a network request, which helps for very small assets. But Base64 adds about a third to the byte size and can't be cached separately, so for anything larger than a small icon a normal image file is usually the better choice.
Frequently asked questions
What is a Base64 image?
Base64 encodes an image's bytes as plain text, usually as a data URI (data:image/png;base64,…). You can embed it directly in HTML or CSS so the image loads without a separate file request.
When should I use Base64 images?
Inlining is handy for tiny icons, email templates and single-file demos — it saves an HTTP request. For larger images it's usually better to keep a normal file, since Base64 makes the data about 33% bigger.
How do I decode Base64 back to an image?
Switch to the Decode tab and paste either a full data URI or a bare Base64 string. The image renders instantly and you can download it as a file.
Why is the Base64 string so long?
Base64 represents three bytes with four text characters, so the encoded text is roughly a third larger than the original file. Big images produce very long strings.
Are my images uploaded?
No. Encoding and decoding happen entirely in your browser with the FileReader and canvas APIs. Nothing is sent anywhere.