🔗

Image ↔ CSS Data URI Converter

Convert images to base64 data URIs for inline CSS backgrounds, or decode data URIs back to images.

Image File
📁
Drop image here or click to browse
PNG, JPG, GIF, SVG, WebP
Data URI
💡 Definition

Data URIs

  • A data URI embeds file data directly in a URL using base64 encoding.
  • For images, this means you can include the image inline in CSS or HTML without a separate HTTP request — useful for small icons, backgrounds, and sprites.
📖 How to use

Step by Step

  • Drop or select an image file
  • The base64 data URI is generated instantly
  • Copy the data URI or the ready-to-use CSS snippet
  • Paste a data URI on the right to preview the image
🎯 Use cases

When to use

  • Embedding small icons in CSS
  • Reducing HTTP requests for critical images
  • Email HTML templates with inline images
  • Single-file HTML documents

Frequently Asked Questions

When should I use data URIs?▾
Data URIs are best for small images (< 10KB) like icons and logos. For larger images, regular file URLs are more efficient because data URIs increase CSS file size by ~33% due to base64 encoding.
What's the browser support?▾
Data URIs are supported in all modern browsers. The main limitation is IE8 which had a 32KB size limit, but this is no longer relevant.

Related Tools