Image to Base64 & Data URI
Bidirectional. Multi-file support. Seven output formats (raw, data URI, CSS background, HTML img, Markdown, JSON, Next.js Image with blurDataURL placeholder). Optimization (resize / quality / format) before encoding. Auto-MIME-detection on decode.
Drop images here or click to browse
PNG, JPEG, WebP, GIF, SVG, BMP, AVIF — encode many at once.
Tip: paste an image directly with Ctrl+V (Cmd+V on macOS).
Optimize first
Resize and re-encode through a canvas before embedding. Smaller bytes mean smaller data URIs.
Output format
Max width: 1600px
Larger images are downscaled to fit.
Max height: 1600px
Aspect ratio is preserved.
Quality: 0.85
Quality applies only to JPEG and WebP outputs.
When data URIs make sense — and when they don't
Good fit: tiny inline assets
Icons under ~2 KB and one-off SVG glyphs avoid an extra HTTP request and ship inline with your CSS or HTML.
Bad fit: anything cacheable
Hosted files get cached independently, deduplicated across pages, and benefit from CDN compression. Data URIs do not.
CSP allows it explicitly
Your Content-Security-Policy needs to include `img-src 'self' data:` (or the equivalent directive) for data URIs to render.
Email rendering varies
Most modern clients accept <img src="data:…"> but Outlook for Windows and several webmail clients strip them. Test before sending.
SEO impact
Search engines don't index inline images well. For shareable content, use a hosted URL with an `alt` attribute.
Base64 is ~33% larger
Encoding bloats raw bytes by roughly one third before any HTTP compression. Gzip recovers most but not all of that overhead.