Image to Base64
Encode PNG, JPG, SVG, GIF or WebP images as Base64 data URIs ready to drop into HTML, CSS, JSON or emails. The images stay in your browser.
Drop an image here
PNG, JPG, GIF, WebP, SVG, ICO… any file works · nothing is uploaded
Converted on your device. Nothing is uploaded.
Encoding an image as Base64
- 1
Drag an image onto the box above, or click it to browse.
- 2
Choose the output: data URI, plain Base64, a CSS background-image rule or an HTML <img> tag.
- 3
Press Copy and paste it into your code.
What makes this Image to Base64 converter handy
Snippets ready to paste
Get a full CSS background-image rule or HTML <img> tag, not just a raw string.
Any image type
PNG, JPG, GIF, WebP, SVG, ICO and AVIF all work – in fact, so does any file.
Size up front
See how big the encoded text is before you embed it.
Private
Encoding happens on your device, so unreleased designs and assets stay under wraps.
What people use the Image to Base64 converter for
Images inside HTML emails
Embed small logos so they display without separate hosting.
CSS background images
Paste a data URI directly into your stylesheet.
Images in JSON
Send small pictures inside API payloads.
Fewer network requests
Inline tiny icons to cut HTTP requests.
Also searched for as: image to Base64 converter, Base64 image encoder, image to data URI, PNG to Base64 and SVG to Base64.
Related searches
- convert image to base64 string
- image to data uri for css
- png to base64 online
- embed image in html with base64
- jpg to base64 for email signature
- convert large image to base64 string
Quick data conversions in the browser
Switch between CSV, JSON and YAML, or turn images into Base64, without installing anything. Everything is processed in your browser, so exports, customer data and API keys stay on your machine rather than going to someone else's server.
Questions & answers
What's a Base64 image?
An image written out as plain text. As a data URI (data:image/png;base64,…) it can be placed directly in HTML, CSS or JSON with no separate image file.
When is embedding as Base64 a good idea?
For small images like icons and logos, where saving a network request matters. Base64 is around 33% bigger than the original, so large photos are better left as normal files.
How do I use a Base64 image in CSS?
Choose the CSS output and copy the background-image rule, or place the data URI inside url("…") yourself.
Do my files get uploaded anywhere?
Never. The work is done by JavaScript running in your own browser, on your own device. Nothing is sent to a server or kept anywhere, which makes it safe for personal photos and sensitive data – and it carries on working even on a patchy connection.