100% in your browser
FileReader.readAsDataURL — nothing uploaded
Drop an image here or click to browse
PNG · JPG · GIF · WebP · SVG · BMP · AVIF
Encoding…
Imagen a Base64 data URI instantáneo.
Suelta una imagen — obtén un data URI listo para pegar en CSS, HTML o JSON.
How to convert
Drop an image
Drop any PNG, JPG, GIF, SVG, or WebP.
Copy the data URI
The full data:image/...;base64,... string appears in the output box.
Paste anywhere
Use in CSS url(), HTML <img src>, or JSON config.
When to use base64
Tiny icons
Embed sub-1KB icons inline to avoid a network request.
Email HTML
When you cannot link external assets.
Inline CSS
Eliminate the extra HTTP request for critical background images.
Offline apps
Bundle images into source for fully offline use.
Preguntas frecuentes
What is base64 image encoding?
Base64 encodes binary data as ASCII text — lets you embed images directly inside CSS, HTML, or JSON.
When should I use base64 instead of a URL?
For tiny images, emails, or inline CSS. For anything bigger, use a hosted URL — base64 inflates size by ~33%.
Why is the base64 string so big?
Base64 costs 4 chars per 3 bytes — ~33% overhead.
Is anything uploaded?
No. Local FileReader.readAsDataURL call.
SVG encoding?
Works. URL-encoding can be smaller for SVG.
How to use in CSS?
Paste inside url() — background-image: url('data:image/png;base64,...').
How in HTML?
Put in img src: <img src="data:image/png;base64,...">.
Any file-size limit?
Practical browser limits around 2 MB for inline data URIs.