Data URIs: Embed Images in HTML/CSS (Complete Guide)
Everything about data URIs: syntax, when to use them, performance impact, size limits, and converting images to data URIs.
Data URI Syntax
data:[mediatype][;base64],data\n\n// Examples\ndata:text/plain;base64,SGVsbG8=\ndata:image/png;base64,iVBORw0KGgo...\ndata:image/svg+xml,%3Csvg%20...When to Use Data URIs
- Small images under 2KB (icons, logos)
- Critical above-the-fold images (avoid extra HTTP request)
- Email HTML templates (images must be inline)
When NOT to Use
- Images over 5KB (33% size increase + no caching)
- Images used on multiple pages (duplicate data)
Try It Free
Use our free online tool — 100% client-side, no data leaves your browser.
Open Image to Base64