🔤 Image to Base64 Converter
Convert an image file to a Base64 data URI you can embed directly in HTML or CSS, or paste a Base64 string / data URI to preview and download the image it represents.
What the encoding produces
Encoding reads your file's raw bytes in the browser and writes them out as a data URI - nothing is uploaded, and no canvas is involved, so the bytes come through exactly as they were, EXIF and all:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
encoded length = ceil(bytes / 3) × 4 (about 33% larger)A 30 KB PNG becomes a 40 KB string. The prefix tells you the format the browser
detected: PNG payloads begin iVBOR, JPEG ones /9j/.
Copy takes the whole thing, header included, ready for a CSS
url() or an <img src>.
Decoding, and when to embed
- A bare string is assumed to be PNG. Paste without the
data:prefix and the tool adds an image/png header; browsers sniff the real format anyway, so a JPEG still previews. - The decoded download is re-drawn through a canvas and saved as PNG whatever went in - exact pixels, bigger file, and any metadata carried in the original bytes is dropped.
- Keep embedded images small. Under about 4 KB - icons, spinners, a tiny logo - saves a request; a photo inlined this way is downloaded with every page and cannot be cached on its own.
Frequently asked questions
How do I convert an image to a Base64 string?
Leave the direction on Image to Base64 and pick a file. The complete data URI appears in a scrollable box with a Copy button, alongside a preview so you can confirm you grabbed the right picture.
Why is the Base64 bigger than the original file?
Base64 spends four characters on every three bytes, so it always runs about 33% longer, plus the header. That overhead is the price of putting binary data into a text file.
Can I decode Base64 back to a JPEG?
You can preview one, but the download is always a PNG - the image is redrawn on a canvas before saving. The pixels match; convert it back with the Image Format Converter if you need JPEG bytes.