Image ↔ Base64
Inline images for CSS, email and single-file demos.
How to use the Image ↔ Base64 converter
A data URL lets you embed an image directly inside HTML, CSS or JSON instead of linking to a separate file. This tool converts a chosen image to a base64 data URL, or previews a data URL you have already got — useful for inlining favicons, email-safe logos, CSS background patterns and single-file HTML demos.
- 01Pick a direction: image → base64 to embed, or base64 → image to preview.
- 02In encode mode, click the drop zone or drag an image onto it. In decode mode, paste a
data:image/…URL. - 03Copy the data URL on the right, or check the preview to confirm the round-trip.
tips
- —Base64 adds ~33% overhead (6 bits per character instead of 8). It also blocks gzip compression on the encoded portion, so the real cost on the wire is often higher than the file size suggests.
- —Rule of thumb: inline assets under ~4KB (favicons, tiny icons, 1×1 trackers). Above that, ship a real file — your users will see faster paints and your bundle will stay manageable.
- —Email clients are picky: most strip
<img>tags pointing at external URLs for privacy, but accept inline base64 images. If a logo must appear in a transactional email, data URLs are the reliable path.
frequently asked
When should I use a base64 data URL instead of an image file?+
Data URLs shine for tiny assets (icons, logos under ~4KB) where avoiding a separate HTTP request is worth the ~33% size overhead. For anything larger, ship a real file — base64 blocks compression, hurts load times and blows up CSS bundles.
Why does the file size grow after encoding?+
Base64 uses 6 bits per character instead of 8, so every 3 bytes of binary becomes 4 characters of text — a 33% overhead, plus a short data: prefix. That is expected and not a bug.
Is my image uploaded anywhere?+
No. The conversion uses the FileReader API, which reads the file into memory inside your browser. Nothing is sent to a server.