IMAGE.BASE64
[ READY ]Drop an image, paste, or pick a file — get a base64 data URL ready to paste into HTML, CSS, or JSON. Or go the other way: paste a data URL to preview the image.
Base64 output
[01] What is base64 encoding?
Base64 turns binary data into a string of 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). It's how you embed images, fonts, and other binary in text-only contexts: email (MIME), JSON, CSS url(), HTML img src attributes, JWT payloads.
The size cost is ~33% — base64 needs 4 characters for every 3 bytes. So a 30 KB image becomes ~40 KB of base64 text.
[02] When to inline images as data URLs
- Tiny images (under ~5 KB): embed them to skip an HTTP request. The 33% size penalty is less than the round-trip cost.
- Email signatures, MJML templates: embed so they render without external fetching.
- Service workers caching: data URLs survive offline.
[03] When NOT to inline
- Large images: external file with proper caching beats inline once you're past 10 KB.
- Reusable across pages: external URL gets cached once; inlined version downloads on every page.
- SEO image targets: Google can't index inline images for image search.
[04] Privacy
Encoding and decoding both run entirely in your browser. The image is processed via the FileReader API and base64 is computed locally — nothing is uploaded or logged anywhere.