Base64 Encode Image
Encode images to Base64 data URIs for embedding in HTML, CSS, or JavaScript
Upload or drop an image to encode it to Base64. Images are processed in your browser - nothing is uploaded to any server.
Convert an image to Base64
Drop an image or click to choose one, and the encoder reads it in your browser and gives you two results: a data URI, ready for an <img> src or a CSS url(), and the plain Base64 string without the prefix.
The preview shows the image with its file name, size in pixels, file size and the size of the Base64 text, so you see what embedding it will add before you paste it anywhere.
What a Base64 image looks like in code
A 1 × 1 px orange PNG of 69 bytes, encoded and used both ways:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP438EAAAQRAYhPXesHAAAAAElFTkSuQmCC"
width="1" height="1" alt="">.dot {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP438EAAAQRAYhPXesHAAAAAElFTkSuQmCC");
}The part before the comma, data:image/png;base64,, names the file type so the browser knows how to read the bytes. The Base64 String box holds only the part after the comma, for APIs and JSON fields that ask for the raw value.
Have a string to turn back into a picture?
Paste a Base64 string or a data URI into the decoder to see the image and save it as a file.
Why the Base64 is bigger than the file
Base64 writes every 3 bytes as 4 characters, so the text is about a third larger than the image: a 30 KB PNG becomes about 40 KB of Base64. Gzip or Brotli on the server win part of that back, but not all.
Worth embedding
- Small icons and logos of a few KB
- Single-file HTML pages, demos and reports that must work offline
- A CSS background that must show with the stylesheet, without one more request
Better as a file
- Photos and anything larger than about 10 KB
- Images used on many pages: a file is cached once, inlined Base64 is downloaded with every page
- SVG icons: a URL-encoded
data:image/svg+xml,is often smaller than Base64, which this tool always writes
Inlined images count toward the size of the HTML or CSS that carries them, which is why they belong to the page speed question in does minifying HTML improve SEO.
Image to Base64 questions
Any image file your browser recognises, including JPG, PNG, GIF, WebP and SVG. The type in the data URI comes from the file itself.
No fixed limit, but a large photo turns into several megabytes of text that is slow to copy and paste. Resize or compress the image first if you plan to embed it.
Those are the first bytes of the file in Base64: iVBORw0KGgo is the PNG signature, every JPEG starts with /9j/ and a GIF with R0lGOD.
Put it inside url() with quotes, as in the styles.css example above: background-image: url("data:image/png;base64,..."), with your string in place of the dots.
No. The file is read by your browser and never leaves your device.