WebyTooly

Image to Base64

Upload an image and get its Base64 representation, including versions ready to paste into CSS or an img tag.

Espacio publicitario

Drag your image here or click to choose it

Any image format works, including SVG and GIF

Espacio publicitario

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.

Related calculators