Nasıl kullanılır
- Gömmek istediğiniz metni yazın veya dosyayı seçin.
- image/png veya image/svg+xml gibi MIME türünü kontrol edin ya da girin ve Base64 veya Yüzde kodlaması seçeneğini belirleyin.
- Oluşturulan data URI'yi HTML, CSS veya JSON kodunuza kopyalayın.
- Mevcut bir data URI'yi incelemek için ayrıştırıcıya yapıştırın; MIME türünü, karakter kümesini, boyutunu ve önizlemesini görün ve gömülü dosyayı indirin.
Data URI söz dizimi
RFC 2397'de tanımlanan bir data URI, küçük bir dosyayı doğrudan URL'nin içinde taşır:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Medya türü, tarayıcıya verinin nasıl yorumlanacağını söyler; belirtilmezse text/plain;charset=US-ASCII varsayılır. ;base64 bayrağı, virgülden sonraki kısmın Base64 olduğunu belirtir. Bu bayrak yoksa veri, özel karakterlerin yüzde kodlamasıyla yazıldığı düz metindir.
Base64 mü, yüzde kodlaması mı
PNG, JPEG, WebP, yazı tipleri ve PDF'ler gibi ikili dosyalar için doğru seçim Base64'tür. Boyutu her zaman yaklaşık %33 artırır. Metin biçimlerinde yüzde kodlaması çoğu zaman daha küçük sonuç verir, çünkü karakterlerin çoğu olduğu gibi kalır ve yalnızca <, >, #, % ve çift tırnak gibi birkaç karakterin kaçışlanması gerekir. Bu da onu SVG simgeleri için ideal kılar; okunabilir sonuç ayrıca gzip veya Brotli ile daha iyi sıkıştırılır. Ancak ASCII dışı metinlerde her bayt üç karaktere dönüşür; bu nedenle Çince veya Kiril metinler için Base64 genellikle daha kısadır. Emin değilseniz iki seçeneği de deneyin ve daha kısa olan sonucu kullanın.
/* CSS içinde yüzde kodlamalı SVG: içeride tek tırnak, # yerine %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Satır içine gömme ne zaman işe yarar
Bir data URI bir HTTP isteğinden tasarruf sağlar, ancak veri onu içeren belgenin bir parçası hâline gelir:
- Ayrı önbellekleme yok. HTML'ye gömülü bir görsel her sayfayla birlikte yeniden indirilir. Bir stil sayfasına gömülü görsel ise o dosyayla birlikte önbelleğe alınır ve görseli değiştirmek tüm stil sayfasını geçersiz kılar.
- Daha yavaş ilk görüntüleme. CSS içindeki büyük data URI'ler sayfanın görüntülenmesini geciktirir, çünkü tarayıcının önce stil sayfasının tamamını indirip ayrıştırması gerekir.
- Boyut ek yükü. Base64 boyutu üçte bir artırır; bu artış, HTML veya CSS sıkıştırılarak ancak kısmen telafi edilir.
HTTP/2 ve HTTP/3 ile ek isteklerin maliyeti düşüktür. Bu yüzden yalnızca simgeler, küçük yer tutucular veya kritik bir arka plan gibi birkaç kilobaytlık küçük varlıkları satır içine gömün, geri kalan her şeyi normal dosyalar olarak sunun. Content Security Policy kullanan siteler, gömülü görsellerin ve yazı tiplerinin yüklenebilmesi için img-src veya font-src yönergesinde data: kaynağına izin vermelidir.
Sıkça sorulan sorular
Data URI'ler için bir boyut sınırı var mı?
RFC 2397 bir sınır belirlemez ve modern tarayıcılar görsellerde ve stil sayfalarında birkaç megabaytlık data URI'leri kabul eder. Yine de büyük data URI'ler iyi bir fikir değildir: sayfayı şişirir, ayrı olarak önbelleğe alınamaz ve ayrıştırılmaları daha uzun sürer.
Bir data URI'ye verilen bağlantıya tıkladığımda neden açılmıyor?
Çoğu tarayıcı, kimlik avına karşı bir önlem olarak web sayfalarının ana pencereyi bir data: URL'sine yönlendirmesini engeller. Data URI'leri görsellerin, CSS'in veya indirme bağlantılarının içinde kullanın ya da URI'yi önizlemek ve içeriği indirmek için buradaki ayrıştırıcıya yapıştırın.
HTML ve CSS'te data URI nasıl kullanılır?
<img src="data:image/png;base64,...">, CSS'te background-image: url("data:image/svg+xml,..."). CSS'te, özellikle yüzde kodlamalı SVG için değeri tırnak içine alın.Karakter kümesi belirtmem gerekir mi?
text/plain veya text/html gibi metin türleri için evet: medya türünden sonra ;charset=UTF-8 ekleyin; aksi takdirde varsayılan US-ASCII bu karakterleri bozabilir. image/png gibi ikili türler karakter kümesi gerektirmez.