Image to Base64
Choose or drop an image. Get its Base64, a data URI, CSS and an img tag. Nothing leaves your browser.
- 0
- Characters
- 0
- Bytes
- 0
- Errors
On this page
About Image to Base64
Updated
What is an image to Base64 converter?
It turns an image file into Base64 text, so you can put the image inside HTML, CSS, JSON or an email. This tool also writes the data URI, a CSS rule and an img tag for you, and shows the image so you can check it.
How to use this tool
Press Choose an image, or drop the image on the editor. The editor holds the Base64. The Data URI view is open, and Copy takes it. CSS and HTML give a ready background-image rule and a ready <img> tag, both with the width and height. File shows the picture.
Options set how the Base64 in the editor is written: standard or Base64URL, with or without =, on one line or in 76-character lines. The data URI always uses standard Base64, as browsers expect.
To go the other way, use Base64 to Image. To encode text, use Base64 Decode.
Using the result
In HTML
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="">In CSS
.icon {
width: 24px;
height: 24px;
background-image: url("data:image/png;base64,iVBORw0KGgo...");
background-size: contain;
background-repeat: no-repeat;
}Keep it small
Base64 is about a third bigger than the file, and a page with a big Base64 image loads slower. Use Base64 for icons and small images, and a normal image file for photos.
Other Base64 resources
- RFC 4648: Base16, Base32 and Base64The standard for Base64 and Base64URL, with the alphabets, the padding rules and test vectors.
- MDN: Base64Base64 in the browser: atob(), btoa() and the problem with Unicode text.
- MDN: Uint8Array.fromBase64()The newer JavaScript way to decode Base64 and Base64URL to bytes.
- MDN: data: URLsHow to put a file inside HTML or CSS as data:type;base64,...
- RFC 2045: Base64 in email (MIME)Where the 76-character lines in email come from.
- RFC 7468: PEM text encodingsThe BEGIN and END lines around certificates and keys, and the Base64 between them.
- Wikipedia: Base64History, variants and a worked example of the encoding, bit by bit.
Image to Base64 FAQ
How do I convert an image to Base64?
Press Choose an image, or drop the image on the editor. The editor then holds its Base64. The Data URI view gives the same image as data:image/png;base64,..., ready to paste. CSS and HTML give a ready rule and a ready img tag.
What is a data URI?
A data URI puts a file inside a link: data:, the type, ;base64, and the Base64. A browser reads it like an image address, so the image needs no file of its own. It works in HTML, CSS, Markdown and JSON.
When should I put an image in a page as Base64?
For small images: icons, a logo in an email, a placeholder. They then load with the page and need no extra request. For big images it is worse: Base64 is about a third bigger than the file, and the browser cannot cache the image on its own.
Why is the Base64 bigger than the image?
Base64 writes 3 bytes as 4 characters, so the text is about 33% bigger than the file. A 30 KB image becomes about 40 KB of Base64. Compress the image first if size matters.
Which image types work?
Any file works, and the tool names PNG, JPEG, GIF, WebP, AVIF, BMP, ICO and SVG from their bytes. The data URI gets the right type. Files can be up to 50 MB.
Is my image uploaded?
No. The image is read and encoded in your browser. Nothing is sent to a server, and nothing is put in the URL.