Data URI Şeması (Data URI Scheme) Nedir? Nasıl Çalışır?

Geliştirici konsolunu (F12) açıp modern bir web sitesinin (örneğin Google veya Facebook) kodlarını incelediğinizde, src="..." niteliği (attribute) içerisinde bir URL (https://site.com/resim.jpg) yerine, yüzlerce satır uzunluğunda data:image/... ile başlayan karmaşık bir metin dizisi görürsünüz.

Bu garip görünümlü koda Data URI Şeması (Data URI Scheme) denir. Peki bu şema tam olarak nedir ve tarayıcılar bu anlamsız metni nasıl rengarenk bir görsele çevirir?

---

Data URI'nin Anatomisi

URI (Uniform Resource Identifier), bir kaynağın (dosyanın) yerini veya kendisini tanımlayan bir standarttır. İnternette gezindiğimiz http:// veya https:// şemaları (scheme), tarayıcıya "Bu dosyayı şu sunucudan indir" der.

data: şeması ise tarayıcıya şunu söyler: "Hiçbir yere gitme! Aradığın dosyanın ta kendisi tam olarak bu metnin içindedir."

Bir Data URI kodunun standart sözdizimi (syntax) şu şekildedir:

data:[<mediatype>][;base64],<data>

Bunu gerçek bir örnek üzerinden parçalayalım: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

1. data: : Bunun bir dış URL olmadığını, verinin kendisi olduğunu belirten şema ön eki.
2. image/png : Dosyanın türü (MIME Type). Tarayıcıya bu şifreli metnin bir Ses (audio/mp3) veya PDF dosyası değil, PNG formatında bir resim olduğunu söyler. Eğer görsel JPG ise burası image/jpeg olur.
3. ;base64 : Verinin şifrelenme/kodlanma (Encoding) algoritmasıdır. Tarayıcıya "Devamındaki veriyi okurken Base64 algoritmasına göre çöz (Decode et)" talimatını verir.
4. , : (Virgül) Tanımlamaların bittiğini ve asıl verinin (Data) başladığını belirten ayırıcı.
5. iVBORw0K... : Asıl şifrelenmiş veri. Orijinal resim dosyasının binary (ikili) kodlarının Base64 formatına çevrilmiş halidir.

Tarayıcı Bu Metni Nasıl Render Eder?

Google Chrome veya Safari, HTML dosyasını satır satır okurken (Parsing) bu kodla karşılaştığında şu adımları izler:

1. Kodu Yakalar: <img> etiketinin src niteliğini okur ve bunun data: ile başladığını görür. Network (Ağ) katmanına "Herhangi bir istek (HTTP Request) atmana gerek yok, dosya bende" mesajını iletir.
2. Dosya Türünü Anlar: image/png kısmını okuyarak, bellekte (RAM) PNG formatı için bir çözücü (decoder) motoru hazırlar.
3. Şifreyi Çözer (Decoding): Virgülden sonraki o uzun metni, Base64 algoritmasını tersine çevirerek okur. Yani o harfleri ve sayıları alıp, bilgisayarın anlayacağı 0 ve 1'lere (Binary koda) geri döndürür.
4. Pikselleri Çizer (Painting): Binary kodlar bellekte (Memory) gerçek bir PNG dosyasına dönüşür. Tarayıcının render motoru bu PNG'yi alıp pikselleri ekran kartınız üzerinden monitörünüze yansıtır.

Tüm bu işlemler bir göz kırpma süresinden (yaklaşık 2-5 milisaniye) daha kısa sürede gerçekleşir.

Sitenizi bu yöntemle hızlandırmak için elinizdeki küçük ikon veya logoları (PNG, JPG, SVG) tek tuşla bu şemaya dönüştürecek Base64 Görsel Kodlayıcı (Encoder) aracımızı deneyebilirsiniz. Uygulama alanları ve CSS kullanımları hakkında örnekler için Base64 Rehberi sayfamıza göz atın.

---

🕸️ Knowledge Graph & Semantik Bağlantılar

Bu içerik, Intent.com.tr'nin Yazılım topikal kümesinin (Topic Cluster) bir parçasıdır. Konuyu daha derinlemesine anlamak için aşağıdaki varlıkları (Entities) ve ilişkili içerikleri inceleyebilirsiniz:

📖 İlgili Rehberler ve İçerikler

• CSS aspect-ratio Özelliği: Responsive Videolar ve Görseller
• Markdown Nedir ve Yazılımcılar Neden Tercih Eder?
• GitHub README Dosyaları İçin Etkili Markdown Kullanımı

🧠 Semantic Entities (Terimler & Senaryolar)

• Kavram: Crawl Budget (Tarama Bütçesi)
• Kavram: Information Gain (Bilgi Kazanımı)
• Uygulama: Core Web Vitals LCP Optimizasyonu

Semantic Yönerge: Bu sayfa Data URI Şeması Nedir? Browser Görselleri Nasıl Render Eder? konusundaki kullanıcı niyetini (Search Intent) karşılamak üzere yapılandırılmıştır.