Base64 length
L = 4 × ⌈n ÷ 3⌉
Defined by RFC 4648; 12,000 bytes give 16,000 characters.
Convert an image to Base64 (and Base64 to image)
Encode an image to Base64 or decode a Base64/Data URI string into an image entirely in your browser.
- Clipboard
- Export
Your files are processed locally in your browser and are never sent to our servers.
Drop your file here
Recommended size: up to 25 MB
Preview
Base64 / Data URI
Preview
Was this tool useful?
How does this tool work?
Base64 turns the bytes of an image into text made of 64 safe characters. Encoded this way, an image can be pasted straight into CSS, HTML, a JSON file or an email as a data URI, with no separate file. This tool works both ways: it encodes an image to Base64 and rebuilds an image from a Base64 string or a data URI.
Image → Base64 tab: choose a PNG, JPEG, WebP, GIF or SVG image of up to 25 MB. It is read as is, without re-encoding, and converted into a complete data URI of the form data:image/png;base64,…, ready to copy. The preview confirms the image that was read, and a line shows the file size, the data URI size and the overhead in percent.
Base64 → Image tab: paste a data URI or a raw Base64 string. For a raw string, choose its MIME type (PNG, JPEG, WebP, GIF or SVG); spaces and line breaks are removed. The preview appears as soon as the string is valid, and Download image saves decoded-image with the extension that matches the type.
Base64 writes 3 bytes as 4 characters, so the text is about a third larger than the file, plus a few header characters. An invalid or truncated string shows "Invalid Base64 or Data URI."
How to use this tool
Choose the direction
Image → Base64 to encode, Base64 → Image to decode.
Import or paste
Drop an image, or paste a data URI or raw Base64 and set its MIME type.
Copy or download
Copy the data URI, or download the decoded image after checking the preview.
Size of Base64 text
Base64 groups bytes by 3 (24 bits) and writes each group as 4 characters of 6 bits; the last group is padded with = signs.
Data URI length
L_URI = L + p
p is 22 for data:image/png;base64, and 26 for data:image/svg+xml;base64,.
- n
- file size in bytes
- L
- number of Base64 characters
- p
- length of the data URI header
Use cases
Embed a small icon in CSS
Put an icon of a few kilobytes in background-image to save a network request.
Recover an image from JSON
Decode an image stored as Base64 in an API response or an export to view and save it.
Prepare an email or a prototype
Insert an image into a self-contained HTML file that must work without an images folder.
Examples
Encoding a 12,000-byte PNG icon
12,000 ÷ 3 = 4,000 groups of 3 bytes, i.e. 16,000 Base64 characters, plus 22 characters for data:image/png;base64,. The 34% overhead includes the header.
Input
icon.png, 12,000 bytesResult
16,022-character data URI; "11.7 KB file → 15.6 KB data URI (+34%)"Using the data URI in CSS
The browser shows the icon without downloading a file. Keep this for small images: an encoded photo bloats the stylesheet and can no longer be cached on its own.
Input
Data URI of an SVG icon copied from the toolResult
.alert { background-image: url("data:image/svg+xml;base64,PHN2Zy…"); }Tips and best practices
- Keep Base64 for images of a few kilobytes; beyond that, a separate file loads and caches more efficiently.
- Optimise the image before encoding it: every byte saved removes about 1.33 characters from the text.
- For SVG, a non-Base64 data URI (data:image/svg+xml, followed by the escaped SVG) is often shorter.
- If decoding fails, check that the string is complete: a data URI copied from a log is often truncated.
Sources and references
- S. Josefsson, RFC 4648 — The Base16, Base32, and Base64 Data Encodings (opens in a new tab), RFC Editor, 2006Page in English
Frequently asked questions
Does Base64 compress the image?
No, quite the opposite: Base64 text is about 33% larger than the file. It is an encoding for carrying bytes inside text, not compression.
What is the difference between Base64 and a data URI?
Base64 is the encoded text alone. A data URI adds a header such as data:image/png;base64, in front, which tells the browser the file type.
What if I only have raw Base64?
Paste it into the Base64 → Image tab and choose the MIME type of the original image (PNG, JPEG, WebP, GIF or SVG).
Is the image changed when encoding?
No. The file bytes are encoded as they are: decoding the data URI gives back exactly the same file, metadata included.
Can Base64 contain line breaks?
Yes, some tools wrap lines every 76 characters. The tool removes these spaces and breaks before decoding a raw string.
Is my image uploaded to a server?
No. Encoding and decoding are done by the browser, with no network request.
Related tools
Keep going with these tools
Tools similar or complementary to this one.
Similar tools
Lighten an image by setting its quality or aiming for a size in KB, with the final size shown before download.
Images & graphicsFeaturedUse this tool
Reduce SVG markup locally while keeping the graphic editable.
Images & graphicsUse this tool
Convert an image to PNG, JPEG, or WebP and adjust output quality before download.
Images & graphicsFeaturedUse this tool
Read next
GuideBest practicesBeginner
Image Metadata: Read It, Keep It, or Remove It?
Understand EXIF, GPS, XMP, IPTC, ICC profiles, rights information, and how to manage image metadata for privacy, publishing, and Web performance.
31 August 202613 min
GuideBest practicesBeginner
Convert a PDF to images or images to PDF
Learn what changes when PDF pages are rasterized, how resolution and image format affect quality, and when to assemble images into a PDF.
29 August 20262 min
GuideBest practicesBeginner
How to optimize 50 images for the Web at once
Resize a batch of images, convert them to WebP and remove metadata with one reusable Pipeline.
6 September 20262 min
TutorialBest practicesBeginner
Optimize images for the Web without losing quality
Resize, compress and choose between WebP, AVIF and other formats with a practical workflow that reduces file size without unnecessary visual loss.
30 August 20264 min