Data URIs let you embed images, fonts, and other resources directly in HTML and CSS using Base64 encoding. They eliminate HTTP requests, but they also come with tradeoffs. This guide covers the best practices for using data URIs effectively.
What is a Data URI?
A data URI is a URL scheme that embeds data directly in a document. The format is:
data:[<mediatype>][;base64],<data>
For example, a small PNG image embedded as a data URI looks like this:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABf0lEQVQ4T2Nk..." alt="Icon">
Best Practice #1: Use Data URIs Only for Small Files
The most important rule: data URIs should only be used for files under 10KB. Base64 encoding increases file size by approximately 33%, so a 10KB file becomes about 13KB. For larger files, the size penalty outweighs the HTTP request savings.
| File Size | Recommendation | Reason |
|---|---|---|
| Under 2KB | Strongly recommended | Saves an HTTP request with minimal size impact |
| 2KB - 10KB | Recommended for critical resources | Good balance of request reduction vs size increase |
| 10KB - 50KB | Use with caution | Size penalty starts to hurt performance |
| Over 50KB | Avoid | Use external files with proper caching |
Best Practice #2: Understand Caching Implications
Data URIs cannot be cached separately. When you embed an image as a data URI in HTML or CSS, it is cached only as part of that file. If the same image appears on multiple pages, it is downloaded with each page.
- Single page: Data URIs are fine
- Multiple pages: External files with browser caching are more efficient
- Frequently updated: External files make updates easier
Best Practice #3: Use Gzip Compression
When served over HTTP with gzip compression, the 33% size penalty of Base64 is significantly reduced. Base64 text compresses well because it uses a limited character set. In some cases, a gzip-compressed data URI can be close to the original binary file size.
Always ensure your server enables gzip (or Brotli) compression for HTML and CSS files.
Best Practice #4: Choose the Right Format
| Resource Type | Best Approach |
|---|---|
| Simple vector icons | Use inline SVG (not Base64) - smaller, scalable, CSS-stylable |
| Small PNG/GIF icons | Data URI works well, or use SVG sprites |
| Small JPEG photos | Data URI only if under 10KB |
| Web fonts (WOFF2) | Data URI is common for small icon fonts |
| Large background images | Always use external files with lazy loading |
| Critical CSS background | Data URI for small, critical images |
Best Practice #5: Consider Critical CSS and Inlining
For above-the-fold content, inlining small images as data URIs in critical CSS can improve perceived performance. The browser can render the page without waiting for external image requests. This technique is often combined with code splitting and lazy loading for below-the-fold images.
Best Practice #6: Limit Data URIs in CSS
When embedding data URIs in CSS, be aware that each data URI increases the CSS file size. A CSS file with many large data URIs can become bloated and slow to parse. A good rule of thumb: limit data URIs to 2-3 small icons per CSS file.
Best Practice #7: Use Data URIs for Email
HTML emails cannot load external images by default in most email clients. Data URIs are the only reliable way to embed images in email signatures and templates. Keep them small - most email clients reject messages over 100KB total.
Best Practice #8: Measure Before Optimizing
Do not blindly convert all images to data URIs. Use browser DevTools (Network tab) to measure:
- How many HTTP requests are made for images?
- What is the total size of small images?
- How much time is spent on connection overhead?
Only convert images to data URIs when the measurements show it will help.
Common Pitfalls
- SVG as Base64: Inline SVG is cleaner, smaller, and CSS-stylable. Avoid Base64 for SVG.
- Font files as Base64: Base64-encoded fonts can be 50%+ larger. Only use for small icon fonts.
- All images converted: Converting every image creates bloated pages. Be selective.
- No gzip: Without compression, the 33% penalty is fully paid by every visitor.
Quick Decision Tree
- Is the file under 10KB? Yes: consider data URI. No: use external file.
- Is this image used on multiple pages? Yes: prefer external file with caching.
- Is it an SVG? Use inline SVG instead of data URI.
- Is this critical above-the-fold content? Data URI can help with first paint.
- Is your server gzip-compressing HTML/CSS? If yes, data URIs are more efficient.
Use our free Base64 file encoder to convert small images to data URIs and test the results yourself.
Try our free tools:
Base64 Encode File to Data URI