वेब प्रदर्शन ट्यूटोरियल

Base64 Data URI गाइड — वेब ऐप्स में मीडिया एम्बेड करना

Base64 Data URIs पर संपूर्ण ट्यूटोरियल: HTML और CSS में PNG, JPG और SVG चित्र एम्बेड करना।

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...

विभिन्न फ्रेमवर्क में कार्यान्वयन के उदाहरण

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" />;

ऑनलाइन टूल आज़माएं

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