Görseli Base64 Yapma

Bir Base64 data URI formatı, görseli harici bir dosyaya bağlamak yerine doğrudan HTML, CSS veya JSON içine gömmene olanak tanır. Görsel böylece ayrı bir indirme işlemi olmaktan çıkar ve metnin bir parçası haline gelir.

Görselleri Base64 formatına gömmek ne zaman mantıklıdır?

Bir sayfadaki her görsel ekstra bir HTTP isteği demektir. Küçük bir simge, 1 px boyutunda bir gradyan veya e-posta imzasındaki ufak bir logo gibi minik ögeler için bu istek, dosyanın kendi boyutundan daha maliyetli olabilir. Görseli satır içine gömmek bu ek turu tamamen ortadan kaldırır ve görselin sayfa işaretlemesiyle tam aynı anda görünmesini sağlar.

Ancak Base64 veriyi yaklaşık üçte bir oranında şişirir ve satır içine gömülen görseller tarayıcı tarafından ayrı olarak önbelleğe alınamaz. Bu nedenle bu yöntem genel bir strateji değil, yalnızca küçük varlıklar için geçerli bir tekniktir. Yaklaşık 5 KB üzerindeki her şey neredeyse her zaman normal bir dosya olarak sunulduğunda daha verimlidir.

Görseli Base64 formatına dönüştürme adımları

1. Dönüştürmek istediğin görsel dosyasını yukarıdan seç.
2. Dönüştürme butonuna tıkla ve işlemin tamamlanmasını bekle.
3. data:image/png;base64, gibi bir ifadeyle başlayan çıktıyı kopyala.
4. Kopyaladığın veriyi CSS dosyadaki url() içine, bir HTML src niteliğine veya JSON alanına yapıştır.
5. Değişiklikleri yayına almadan önce görselin düzgün görüntülendiğini kontrol et.

Base64 görsel çıktısının kullanım alanları

• CSS arka planları — Oluşan data URI metnini doğrudan background-image: url(...) içine yapıştırabilirsin.
• Satır içi HTML görselleri — Harici bir dosya yolu vermeden bir <img> etiketinin src kısmında kullanabilirsin.
• E-posta şablonları — Bazı istemciler dış bağlantılı resimleri engellerken satır içi eklenenleri görüntüleyebilir.
• JSON ve API verileri — İkili dosya verisinin doğrudan kabul edilmediği JSON gövdelerinde görsel iletmek için kullanabilirsin.
• Tek dosyalık belgeler — Dışa bağımlılığı olmayan, kendi kendine yeten bağımsız HTML sayfaları oluşturabilirsin.

Base64 görsel kullanımında dikkat edilecek kurallar

• Dosya boyutunu yaklaşık 5 KB altında tut; bu sınır aşıldığında standart görsel dosyası kullanmak daha avantajlıdır.
• Aynı görseli yirmi farklı yerde satır içi gömme; tarayıcı bu verileri tekilleştiremez ve gereksiz bellek harcar.
• Sayfa ağırlığını hesaplarken %33 boyut artışı cezasını daima hesaba kat.
• Simgeler için PNG yerine SVG tercih etmeyi değerlendir; SVG çoğu zaman Base64 çıktısından daha küçüktür.
• Uygulamayı yeniden dağıtmadan güncel tutmak isteyebileceğin hiçbir görseli bu yöntemle gömme.

Görseli Base64 yapma hakkında sorular