Embedding Images as Base64 Data URIs
A Base64 data URI embeds image data directly in HTML or CSS, eliminating an HTTP request. Instead of <img src="/icon.png">, you use <img src="data:image/png;base64,iVBORw0K...">. This is useful for small icons, email templates (where external image hosting is unreliable), and loading screens that should display immediately.
Our tool encodes images to the correct data URI format, including the MIME type prefix. Supported formats: PNG, JPEG, SVG, GIF, WebP, and ICO. The output is ready to paste directly into an src attribute, CSS background-image property, or <img> tag in an email template.
Data URIs are most appropriate for images under 5KB — larger images result in bigger HTML/CSS files that can't be cached separately. For performance-critical pages, serve images as files to benefit from browser caching. But for inline SVG icons, favicons in email, and critical-path images, data URIs eliminate round trips.
Tips
- SVG images can be embedded as both Base64 data URIs and as raw SVG in HTML — raw SVG is usually smaller and more readable.
- Data URIs can't be cached separately from the HTML file. This is fine for rarely-changing assets; bad for frequently updated images.
- Email clients have strict CSS support — embedding images as Base64 is often the most reliable way to ensure they display.
- CSS:
background-image: url("data:image/png;base64,...")— same syntax as a regular URL.