Image Tools
Image to Base64
Convert any image into a Base64 data URL, HTML img tag or CSS background so it can be embedded directly in code or email templates.
About the Image to Base64
Image to Base64 converts a picture into text so it can be embedded directly in HTML, CSS, JSON, Markdown or an email template, and turns Base64 text back into an image you can see and download. Choose the output style with one tap and copy or download the result.
What you can do with the Image to Base64
- Both directions: Image to Base64 text, and Base64 back to an image.
- Copy as you need: Data URL, plain Base64, an <img> tag, CSS or Markdown, with one tap.
- Copy or download: Take the result either way.
- Stays on your device: Nothing is uploaded.
When embedding makes sense
Embedding is useful for small images such as icons, tiny logos and placeholders, because the browser doesn't need an extra request to fetch them. For large photos it's usually worse: Base64 is about 33% bigger than the original file, and embedded images can't be cached separately.
Decoding Base64 back to an image
If you find a data:image/… string in code or an API response, switch to "Base64 → Image" and paste it to see what it is. Bare Base64 without the prefix works too: PNG, JPG, GIF, WebP and SVG are recognised from their first characters.
A note on email
Some email clients, including Gmail, don't display images embedded as data URLs. For newsletters, linking images hosted on a web server or attaching them is more reliable.
Related tools
Frequently Asked Questions
What's the difference between a data URL and Base64?
A data URL is Base64 with a prefix that tells the browser the file type, like data:image/png;base64,… Use the data URL in HTML or CSS, and plain Base64 when an API asks for just the encoded data.
Can I turn Base64 back into an image?
Yes. Choose "Base64 → Image", paste the text and tap Download image.
Is there a size limit?
Images up to 5 MB can be converted, though embedding anything over about 100 KB is rarely a good idea.
Why is the Base64 version bigger than the image?
Base64 turns every 3 bytes into 4 text characters, so the result is about 33% larger than the original file. A 206 KB JPG becomes roughly 275 KB of text. That is why it suits small images better than large photos.
When should I embed an image as Base64?
Embedding works well for small icons, logos and placeholders of a few KB, since it saves a separate download. For larger images a normal file link is usually better, because browsers can cache it. The tool warns you when an image is over 100 KB.
How do I use Base64 as a CSS background?
Choose CSS under Copy as and you get a ready line like background-image: url("data:image/png;base64,..."); to paste into your stylesheet. Add background-size or background-repeat as needed, just as you would with a normal image file.
Do Base64 images work in emails?
Not reliably. Several popular email clients, including Gmail, do not display images embedded as data URLs. For email templates, hosting the image and linking to it, or attaching it, is usually more dependable.
Does converting to Base64 reduce image quality?
No. The file's exact bytes are encoded without re-compressing, so decoding gives back an identical image. If you need a smaller string, compress or resize the image first, then convert it.
Why does my Base64 text not decode to an image?
Usually part of the string is missing, so copy the whole thing including the end, which may finish with = signs. Spaces and line breaks are removed automatically. Text that is Base64 but not an image, such as a PDF, will not display here.
Which image types can it decode without a data: prefix?
It recognises PNG, JPEG, GIF, WebP and SVG from how the Base64 text starts, for example iVBOR for PNG and /9j/ for JPEG. If it cannot tell, it tries PNG. With a full data URL, the type in the prefix is used.
Is my image uploaded when I convert it?
No. The image is read and encoded in your browser, and decoding also happens on your device, so the file and the Base64 text are not sent to a server. You can copy or download the result straight away.
Read the guide
Related tools
- Image Resizer, Resize photos and images to exact pixel dimensions or by percentage, keep proportions automatically, and download as JPG, PNG or WebP.
- Image Compressor, Shrink JPG, PNG and WebP images by lowering quality and maximum width, see exactly how much space you saved, and download the result.
- Color Picker from Image, Upload a photo and tap any pixel to get its exact colour in HEX, RGB and HSL, with a history of your recent picks.
Quick Work Studio