Image to Base64
Upload an image and get its Base64 representation, including versions ready to paste into CSS or an img tag.
Drag your image here or click to choose it
Any image format works, including SVG and GIF
Your file never leaves your browser: everything is processed on your device.
What Base64 is and when it pays off
Base64 represents binary data using only 64 printable characters. Every 3 bytes of the file become 4 characters of text, so the result is roughly 33% larger than the original image.
Base64 length ≈ ceil(bytes ÷ 3) × 4
We read the file with FileReader.readAsDataURL, which returns the exact binary encoded, without re-compressing or touching the pixels. That is why the data URI keeps the original format and quality.
overhead % = (text length − bytes) ÷ bytes × 100
A data URI saves an HTTP request, which pays off for tiny icons embedded in CSS. For large images it backfires: it bloats your HTML or CSS, cannot be cached separately and delays rendering.
Worked example
A 900-byte PNG icon becomes about 1200 Base64 characters (33% more), which you can paste straight into your stylesheet and save one request to the server.
Frequently asked questions
- Does Base64 compress the image?
- No, quite the opposite: it always grows it by about 33%. It exists to embed an image inside a text file, not to make it smaller.
- When is embedding worth it?
- For icons and patterns of a few kilobytes used on every page. Above roughly 5-10 KB a separate file is usually better because it is cached independently.
- Is my image altered?
- No. The exact bytes of the original file are encoded, so format, quality and metadata stay intact.
- Can I use it with SVG?
- Yes, and it works well because SVGs are usually small. SVG can also be embedded unencoded, but Base64 is the most compatible option.