Understanding the Data URI Scheme (RFC 2397)
A Data URI is a URL scheme that allows web developers to embed small files directly inline within web documents (HTML, CSS, JSON) as text strings, bypassing traditional HTTP request fetching.
Standard Data URI Syntax:
data:[<mediatype>][;base64],<data>
Example: data:image/png;base64,iVBORw0KGgoAAA...
Implementation Examples Across Frameworks
Code Examples:
1. Inline HTML Image Tag: <img src="data:image/svg+xml;base64,PHN2ZyB4..." alt="Logo" />
2. CSS Stylesheet Background: .icon-badge { background-image: url("data:image/png;base64,iVBORw0K..."); }
3. React Component: const Avatar = ({ base64Str }) => <img src={`data:image/jpeg;base64,${base64Str}`} alt="User Avatar" />;
Try Online Tools
Need to convert images to Base64 Data URIs? Use our suite of 100% client-side tools: