Base64 Görsel URI: Gömme Ne Zaman Kazanır?

Bir Base64 data URI, tarayıcının istemesi gereken ayrı bir görsel dosyasına referans vermek yerine, bir görselin baytlarını doğrudan HTML, CSS veya JSON içine bir metin dizesi olarak gömmenizi sağlar. data:image/png;base64,iVBORw0KGgo... şeklinde görünür ve bir <img src> veya CSS background-image içine yapıştırıldığında, tarayıcı onu hiçbir ek ağ isteği olmadan çözer ve işler. Bu saf bir kazanç gibi görünür — daha az gidiş-dönüş genellikle daha hızlıdır — ama bir bedeli başka bir bedelle takas eder ve bu takas yalnızca belirli, çoğunlukla küçük kullanım durumları için mantıklıdır.

Kazandığınız şey: bir istek daha az

Her ayrı görsel dosyası ayrı bir HTTP isteğidir ve birçok küçük simgeye sahip bir sayfada, bu isteklerin her biri kendi gecikme yükünü taşır — DNS (farklı bir sunucuysa), bağlantı kurulumu ve gidiş-dönüş süresi — bunlar toplamda baytların kendisinden daha fazla gecikmeye neden olabilir. Sık tekrar kullanılan bir avuç küçük simgeyi Base64 olarak satır içine gömmek, bu istekleri tarayıcının zaten yüklediği belgenin içine sıkıştırır; bu, o belirli desen için gerçekten daha hızlıdır.

Kaybettiğiniz şey: boyut ve önbellekleme

Base64, kodlanmış boyutu ham dosyaya kıyasla kabaca üçte bir oranında şişirir — tam matematik için Base64'ün dosyaları neden büyüttüğüne bakın — ve bu şişirilmiş dize HTML veya CSS belgesinin kendisinin bir parçası haline gelir. Bu, tarayıcının artık görseli bağımsız olarak önbelleğe alamaması anlamına gelir: sayfayı her yeniden aldığında veya yeniden ayrıştırdığında, normal bir .png dosyasında olduğu gibi diskten önbelleğe alınmış bir kopyayı çekmek yerine, görsel baytlarını her şeyle birlikte yeniden indirir. Düzinelerce sayfada tekrar kullanılan bir simge için bu, tek bir önbelleğe alınmış dosya yerine düzinelerce tekrarlanan indirme demektir.

Kestirme kural: boyut ve tekrar kullanım

Neredeyse hiçbir zaman mantıklı olmayan desen, tam bir fotoğrafı veya öne çıkan bir görseli satır içine gömmektir — boyut cezası ve kaybedilen önbellekleme, bu ölçekte hiçbir dengeleyici fayda olmadan aleyhinize çalışır. Küçük, statik, sık tekrarlanan varlıklara bağlı kalın ve karar vermeden önce tam kodlanmış boyutu görmek için görselden Base64'e dönüştürücüyü kullanın.