Data URI Generator — Create Base64 Data URIs Online

Generate data: URIs from text input or file upload. Select the MIME type, encode to Base64, and get a ready-to-use data URI for embedding in HTML, CSS, or JavaScript.

What are data URIs?

Data URIs (also called data URLs) allow you to embed file content directly in HTML, CSS, or JavaScript using the format: data:[mediatype][;base64],data. This eliminates the need for separate HTTP requests, making pages load faster for small assets.

They're commonly used for small images (icons, logos), CSS backgrounds, custom fonts, and inline SVG. The trade-off is a ~33% size increase due to Base64 encoding, so they're best suited for files under 10KB.

Common MIME types

  • Images: image/png, image/jpeg, image/gif, image/svg+xml, image/webp
  • Text: text/plain, text/html, text/css, text/javascript
  • Application: application/json, application/pdf, application/xml

Best practices

  • Use data URIs for small files (under 10KB) to reduce HTTP requests
  • For larger files, use regular URLs — Base64 increases size by ~33%
  • Always specify the correct MIME type for the content

FAQs

What is a data URI?

A data URI is a way to embed file content directly into web documents using the data: scheme. Instead of linking to an external file, the content is Base64-encoded and included inline, reducing HTTP requests.

When should I use data URIs vs regular URLs?

Use data URIs for small, frequently used assets like icons and small images (under 10KB). For larger files, regular URLs are better because data URIs increase file size by ~33% and can't be cached separately.

Are data URIs supported in all browsers?

Yes. All modern browsers support data URIs. The main limitation is size — some browsers have maximum length limits for data URIs, typically around 2MB, though this varies by browser.

Related Tools