When to inline images
Encoding an image to Base64 trades a network request for a larger file. That's a win for small, frequently used assets — icons, tiny logos, spacer graphics — where the round-trip latency costs more than the extra bytes. For large photos, keep them as separate files.
Using data URIs in CSS and HTML
A data URI is just a string that starts with data:image/png;base64,. Drop it into a CSS background-image or an HTML img src and the browser renders it inline. This tool generates both snippets so you can paste the right one directly.
The size trade-off
Base64 encoding adds roughly 33% to a file's size because it represents binary data in text. Inlining also means the asset can't be cached separately across pages. Use it deliberately for small, page-critical graphics rather than everything.
Features
- 01
- Drag-and-drop image encoding
- 02
- CSS background-image snippet generation
- 03
- HTML img src data URI output
- 04
- Instant Base64 decoding
