Web Performans Eğitim Rehberi

Base64 Data URI Rehberi — Web Uygulamalarında Medya Gömme

Base64 Data URI kullanım rehberi: PNG, JPG ve SVG görsellerini doğrudan HTML ve CSS kodlarına gömme.

Data URI Şemasını Anlama (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...

Framework'lerde Uygulama Örnekleri

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

Çevrimiçi Araçları Deneyin

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