Image to Base64
Get a data URI you can paste straight into CSS or HTML.
How to use Image to Base64
- Drop your images onto the upload area.
- Click Generate to encode each image.
- Click Copy next to an image to copy its Base64 data URI, ready to paste into HTML or CSS.
A data URI embeds the image's own bytes as text, right inside your CSS or HTML, instead of pointing to a separate file. That's useful for a handful of small, one-off images — an inline icon, a tiny background pattern — where saving an extra network request is worth a bigger stylesheet.
This tool reads the file and encodes it directly, format and all — no re-encoding, no quality loss, no size limit. What you get back is exactly what browsers expect: a string starting with data:image/..., ready to drop into a src or url() property.
Drop in a batch if you need more than one, then copy each string individually or download it as a plain text file.
Questions
Where do I actually use this?
In an HTML img tag's src attribute, or in CSS as background-image: url("..."). Paste the whole string, quotes and all.
Why is the result so much bigger than my image?
Base64 encoding trades compactness for being safe to embed as plain text — it inflates the size by roughly a third. That's normal and unavoidable, not a sign anything went wrong.
Should I use this for every image on a page?
No — it suits small, few-off images. For anything larger or reused across pages, a normal image file that the browser can cache separately is the better choice.
Can I convert several images at once?
Yes — drop in as many as you like, then generate and copy each one's string individually.
Are my images uploaded anywhere?
No. The file is read and encoded entirely in your browser — it never leaves your device.