Data URI üreteci

Bir adresin içindeki dosya

data URI, bir adres biçiminde yazılmış koca bir dosyadır. Tarayıcının gidip alması gereken bir kaynağı göstermek yerine baytların kendisini taşır; böylece bir simge onu kullanan stil sayfasının içinde, küçük bir görsel de onu gösteren HTML'in içinde yaşayabilir. RFC 2397 bu şemayı 1998'de tanımladı ve yirmi yıldır her yerde destekleniyor.

Dilbilgisi kısadır. Şema adından sonra isteğe bağlı bir ortam türü ve isteğe bağlı parametreler, ardından isteğe bağlı bir base64 imi, sonra bir virgül, sonra da veri gelir. Virgülden öncesi başlık, sonrası yüktür — tarayıcının ilk virgülden bölmesinin ve yükün içindeki bir virgülün zararsız olmasının nedeni budur.

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

data:,hello                          text/plain;charset=US-ASCII
data:text/plain;charset=utf-8,hello  the same bytes, spelled out
data:image/png;base64,iVBORw0KGgo=   binary, Base64 encoded
data:image/svg+xml,%3Csvg%20...      markup, percent-encoded

Boş bir başlık geçerlidir ve anlamı text/plain;charset=US-ASCII'dir; şartnamenin size verdiği tek varsayılan budur. Bu sayfa, hiç yazmadığınız bir ortam türünü öylece göstermek yerine bunu uyguladığını bildirir.

İki kodlama ve hangisinin kısa olduğu

RFC yükü yazmanın iki yolunu tanımlar ve bu seçim bir üslup meselesi değildir: belirli bir dosya için biri belirgin biçimde kısadır ve hangisinin kısa olduğu tamamen dosyanın içeriğine bağlıdır.

Base64 her üç baytı 64 karakterlik bir abeceden dört karakter olarak yeniden yazar. Maliyet sabit ve öngörülebilirdir: tam olarak üçte bir fazlası, artı dolgu. Her şeyle çalışır; insanların önce ona uzanmasının nedeni de budur.

Yüzde kodlaması, bir adreste geçerli olan her karakteri olduğu gibi bırakır ve olmayan her karakter için üç karakter harcar. Çoğunlukla düz ASCII'den oluşan bir yükte — bir SVG, küçük bir stil sayfası, bir JSON parçası — baytların çoğu dokunulmadan geçer ve sonuç Base64'ten kısa çıkar, çoğu zaman yüzde yirmi ile otuz arasında. Neredeyse her baytın kaçırılması gereken bir PNG'de veya yazı tipinde ise özgün boyutun üç katına yaklaşır ve Base64'ten çok daha kötüdür.

Ne kadarının kaçırılacağı da başlı başına bir karardır ve bu sayfa iki yanıtı da sunar:

• Katı küme, RFC 3986'nın ayrılmamış karakterlerinin — harfler, rakamlar, kısa çizgi, nokta, alt çizgi ve tilde — dışındaki her baytı kaçırır. Sonuç her bağlamda güvenlidir; bedeli, buna ihtiyacı olmayan noktalama işaretlerini de kaçırmaktır.
• En az küme, data URI dilbilgisinin gerçekten izin verdiği her şeyi korur; bunlara eğik çizgiler, iki nokta, eşittir işaretleri, tırnaklar ve işaretlemenin dolu olduğu parantezler dâhildir. Yüzde kodlamasının kazandığı yer burasıdır ve öznitelikleri tek tırnak içine alınmış bir SVG'nin çift tırnaklı olandan çok daha iyi kodlanmasının nedeni de budur.
• Hedef bir kural daha ekler. HTML özniteliğinin içinde çıplak bir ve işareti karakter başvurusu başlatır; bu yüzden img hedefini seçmek onu da kaçırır. Başka hiçbir şey değişmez: çift tırnak, açılı ayraçlar ve ters eğik çizgi zaten izin verilen kümenin dışındadır ve her iki düzeyde de kaçırılır.
• Yüzde işareti her düzeyde daima kaçırılır. Bir kaçış dizisi başlattığı için, harfi harfine bir yüzde %25 yazılmalıdır; yoksa sonraki iki karakter onaltılık olarak okunur.

Sizi tahmine bırakmak yerine sayfa yükü her iki yolla kodlar, iki uzunluğu ve aradaki farkı bildirir. Kazananı seçin ya da bir nedeniniz varsa kodlamayı elle belirleyin.

%33 sıkıştırmadan önceki sayıdır

data URI üzerine yapılan hemen her tartışma, Base64'ün dosya boyutuna üçte bir eklediğini yineler. Aritmetik olarak doğru, pratikte yanıltıcıdır; çünkü bu sayı baytları hatta çıkmadan önce anlatır ve her sunucu metni çıkışta sıkıştırır.

Base64 bilgi eklemez; aynı bilgiyi daha çok karaktere yayar ve bir baytın alabileceği 256 değerin yalnızca 64'ünü kullanır. Bu, gzip ile Brotli'nin kaldırmak için var olduğu türden bir fazlalıktır. Zaten sıkıştırılmış bir yükte — PNG, JPEG, WOFF2 yazı tipi — sıkıştırıcı asıl veriye dokunamaz ama Base64'ü özgün boyuta çok yakın bir yere geri sıkıştırabilir. O meşhur üçte bir büyük ölçüde kaybolur.

Bu yüzden bu sayfa iddia etmek yerine ölçer. Tarayıcının kendi gzip gerçeklemesiyle üç şeyi sıkıştırır: yükü ayrı bir dosya olarak sunulacağı hâliyle, onu Base64 olarak taşıyan belgeyi ve onu yüzde kodlamasıyla taşıyan belgeyi. Bu üç sayı boyut savının dürüst sürümüdür ve gömmenin gerçek bedelinin çoğu zaman boyut olmadığını gösterir.

Gerçek bedeller başka yerdedir. Gömülü bir dosya kendi başına önbelleğe alınamaz; onu taşıyan belgenin her kopyasıyla yeniden indirilir ve iki sayfa arasında hiçbir zaman paylaşılmaz. Ayrıca engeller: bir stil sayfası, tam ortasında oturan URI'yi baştan sona okumadan ayrıştırmayı bitiremez. Gömmeyi baştan çekici kılan istek başına bedeli HTTP/2 büyük ölçüde ortadan kaldırdı. Her sayfada görünen minik bir simge için hâlâ makul bir takas; birkaç on kilobaytı aştıktan sonra genellikle değil ve bu sayfanın otuzda uyarmaya başlamasının nedeni budur.

Tür baytlardan gelir

Bir data URI ancak ortam türü doğruysa işe yarar. Yanlış olursa tarayıcı görseli göstermeyi reddeder, yanlış ayrıştırıcıyı çalıştırır ya da tanımadığı bir türle sunulan her şey için indirme önerir.

Bir dosya bıraktığınızda tarayıcı kendi türünü bildirir, ama bu bildirim yalnızca dosya uzantısından türetilmiştir. Bir JPEG'in adını .png yapın, tarayıcı ona PNG diyecektir. Bu sayfa bunun yerine ilk baytları okur. Neredeyse her ikili biçim bir imzayla başlar: PNG, ASCII'de bulunamayacak bir baytla ve ardından PNG harfleriyle; JPEG üç sabit baytla; PDF bir yüzde işareti ve PDF sözcüğüyle; WOFF ile WOFF2 kendi dört karakterlik etiketleriyle. İmza ile uzantı çeliştiğinde imza kazanır ve çelişki bildirilir.

Liste bilerek kısa tutulmuştur: bir tarayıcının koklayabileceği her şey değil, insanların gerçekten gömdüğü biçimler. Hiçbiri uymazsa ve baytlar geçerli metinse tür metindir; SVG ile XML, işaretlemenin neyle açıldığına bakılarak ayrılır. Hiçbir şey uymazsa yanıt application/octet-stream olur ve alan düzenlenebilir kalır; çünkü yanlış bir tahmin, itiraf edilmiş bir bilgisizlikten kötüdür.

Metin yüklerinde karakter kümesi de önemlidir. Şartnamenin varsayılanı US-ASCII'dir ki bugün kimse bunu kastetmez; bu yüzden metin türündeki bir ortam türü charset=utf-8 eklenmiş olarak sunulur. Onu atlamak baytları bozmaz ama geri okunma biçimini değiştirir.

Birini geri okumak

İşin öteki yarısı daha sık başa gelir: bir stil sayfasında, bir DOM dökümünde ya da kaydedilmiş bir sayfada bir data: URI buldunuz ve onun ne olduğunu bilmek istiyorsunuz. Yapıştırın; sayfa onu parçalarına ayırsın — ortam türü, parametreleri, hangi kodlamanın kullanıldığı, kaç bayta çözüldüğüne karşılık kaç karaktere mal olduğu ve başlığın iddiasından bağımsız olarak o baytların ne olduğu. Görsel çizilir, metin gösterilir, geri kalan her şey ilk baytlarını onaltılık olarak alır.

Çözme katıdır; çünkü yapıştırılmış bir URI güvenilmez girdidir ve akla yatkın ama yanlış bir yanıt hatadan kötüdür. Eksik bir virgül, bozuk bir ortam türü, ardından iki onaltılık basamak gelmeyen bir yüzde işareti, Base64 abecesi dışında bir karakter: her biri sessizce onarılmak yerine sorunun konumuyla birlikte başarısız olur.

İki şeye hoşgörü gösterilir; çünkü her tarayıcı bunlara hoşgörü gösterir ve satır kaydırmalı bir stil sayfasından kopyalanmış bir URI aksi hâlde kullanılamaz olurdu. Yükün içindeki boşluklar kaldırılır ve eksik Base64 dolgusu tamamlanır. İkisi de bildirilir; böylece elinizdeki URI'nin her yerde çalışan URI ile tam olarak aynı olmadığını bilirsiniz.

Buna benzeyen bir şey ise baştan reddedilir. Artıyı ve eğik çizgiyi kısa çizgi ve alt çizgiyle değiştiren URL için güvenli Base64 abecesi, JSON Web Token'ların kullandığı şeydir — data URI'nin kabul ettiği şey değil. Onu sessizce kabul etmek, tarayıcının çözeceğinden başka baytlara çözmek anlamına gelirdi; bu yüzden kusurlu karakterin konumuyla birlikte adıyla reddedilir.

Nerede çalışıyor

Her şey tarayıcınızın içinde olur. Seçtiğiniz dosya yerel dosya arayüzüyle okunur ve hiçbir zaman yüklenmez; kodlama, sıkıştırma ölçümü ve çözme kendi makinenizde çalışır, hiçbir şey saklanmaz ya da günlüğe yazılmaz. Bu, çoğu sayfadan çok burada önemlidir; çünkü insanların data URI'ye çevirdiği dosyalar çoğu zaman iç kaynaklardır ve incelemek için yapıştırdıkları URI'ler canlı sayfalardan gelir.