Tutoriel Performance Web

Guide Base64 Data URI — HTML & CSS Inline Embedding

Guide complet Base64 data URIs. Syntaxe, exemples HTML img, CSS background-image, types MIME, trade-offs performance.

Comprendre le schéma Data URI (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...

Exemples d'implémentation dans les 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" />;

Essayer les outils en ligne

Need to convert images to Base64 Data URIs? Use our suite of 100% client-side tools: