Data URI Oluşturucu: Dosyalardan data: URL'leri Oluşturma

Data URI Oluşturucu

Data URI, dosya içeriğini doğrudan bir HTML özelliğine veya CSS değerine gömer ve harici bir URL’yi dosya verisinin kendisiyle değiştirir. Bu araç, herhangi bir dosyayı yerel olarak okuyarak, MIME türünü algılayarak ve içeriği Base64 olarak kodlayarak data URI’ları oluşturur.

Nasıl Kullanılır

1. Dosyayı yükleme alanına bırakın veya göz atmak için tıklayın
2. Araç MIME türünü algılar ve dosyayı kodlar
3. “Data URI” çıktı formatı varsayılan olarak seçilidir
4. Data URI’sini kopyalayın

Data URI Sözdizimi

Her data URI şu yapıyı izler:

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

• mediatype: MIME türü (örn. image/png, application/pdf, audio/mpeg). Belirtilmezse varsayılan text/plain;charset=US-ASCII olur.
• ;base64: Verinin Base64 kodlu olduğunu belirtir. Bu olmadan veri URL kodlu metindir.
• veri: Base64 kodlu (ikili için) veya URL kodlu (metin için) gerçek içerik.

Örnekler:

data:image/png;base64,iVBORw0KGgoAAAANSU...
data:text/html,%3Chtml%3E%3Cbody%3EMerhaba%3C/body%3E%3C/html%3E
data:text/plain;charset=utf-8,Merhaba%20Dünya

Data URI’larının Çalıştığı Yerler

HTML img etiketleri

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Satır içi resim" />

CSS arka planları

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
}

HTML bağlantı indirmeleri

<a href="data:application/pdf;base64,JVBERi..." download="belge.pdf">
  PDF İndir
</a>

Site simgeleri

<link rel="icon" href="data:image/svg+xml;base64,PHN2Zy..." />

Iframe’ler

<iframe src="data:text/html;base64,PCFET0NUWVBF..." width="100%" height="400"></iframe>

JavaScript

const audio = new Audio('data:audio/mpeg;base64,SUQz...');
const img = new Image();
img.src = 'data:image/png;base64,iVBOR...';

Data URI’ları ve Harici URL’ler Karşılaştırması

Content Security Policy

Content Security Policy (CSP), data URI’larını kısıtlayabilir. data: kaynak listesinde olmayan katı bir CSP, data URI’larını engeller:

Content-Security-Policy: img-src 'self';  /* data: resimleri engeller */
Content-Security-Policy: img-src 'self' data:;  /* data: resimlere izin verir */

Uygulamanız CSP kullanıyorsa, ilgili yönergelerin (img-src, font-src, media-src, style-src) data: içerdiğinden emin olun. script-src içinde data: izni vermek genellikle güvensiz kabul edilir çünkü satır içi script enjeksiyonuna olanak tanır.

RFC 2397 ve Tarihçe

Data URI’ları RFC 2397 (1998) ile standartlaştırılmıştır. Şema, ayrı HTTP işlemlerinin yükünü önleyerek küçük veri öğelerini web belgelerine satır içi dahil etmek için tasarlanmıştır. Yaklaşık 30 yaşında olmasına rağmen, spesifikasyon değişmemiştir ve evrensel olarak desteklenmektedir.

Pratik Boyut Kılavuzları

Bu eşiklerin üzerinde, HTTP önbellekleme ile ayrı dosyalar daha iyi genel performans sağlar.

Belirli dosya türleri için Resimden Base64’e, PDF’ten Base64’e, Sesten Base64’e veya CSS Arka Plan Resmi oluşturucuya bakın.