Bir web sayfasının toplam boyutunun büyük bölümünü çoğu zaman görseller oluşturur. Görseller gereğinden ağır olduğunda sayfa geç açılır, ziyaretçi sitede kalmadan ayrılır ve arama motorlarındaki performans ölçümleri zayıflar. Modern dosya formatları, görsel kalitesinden ciddi ödün vermeden bu yükü azaltmanın en pratik yollarından biridir.
JPEG ve PNG’nin sınırları
JPEG fotoğraflar için uzun yıllar standart oldu, PNG ise şeffaflık gereken grafiklerde tercih edildi. Ancak her ikisi de bugünkü sıkıştırma tekniklerine kıyasla daha büyük dosyalar üretir. Özellikle PNG ile kaydedilmiş fotoğraflar, aynı görüntünün sıkıştırılmış bir sürümünün birkaç katı boyuta ulaşabilir. Bu da mobil bağlantılarda belirgin gecikmelere yol açar.
WebP ve AVIF ne sunuyor?
WebP, hem kayıplı hem kayıpsız sıkıştırmayı ve şeffaflığı destekler. Aynı görsel kalitesinde genellikle JPEG’den yüzde 25-35 daha küçük dosyalar elde edilir. AVIF ise daha yeni bir formattır ve çoğu fotoğrafta WebP’nin de altına inebilir. Ayrıca yüksek renk derinliği ve HDR desteği sunar. Karşılığında kodlama süresi daha uzundur ve çok eski tarayıcılarda desteği sınırlı olabilir. Logo ve ikon gibi vektör yapıdaki çizimlerde ise SVG, boyuttan bağımsız keskinlik ve çok küçük dosya boyutu sağlar.
Uygulamada doğru yaklaşım
En güvenli yöntem, HTML’deki picture etiketiyle birden fazla format sunmaktır. Tarayıcı desteklediği ilk formatı seçer, desteklemiyorsa yedek olarak JPEG veya PNG gösterilir. Böylece hiçbir ziyaretçi bozuk görsel görmez. Dönüştürme sırasında kalite değerini tek seferde belirlemek yerine birkaç örnekle denemek gerekir. Fotoğraflarda 70-80 aralığı çoğunlukla gözle fark edilmeyen bir sıkıştırma sağlar. Ayrıca görselleri gösterileceği boyutta yüklemek, srcset ile farklı ekranlara uygun sürümler tanımlamak ve ekran dışındaki görsellere lazy loading eklemek kazancı artırır. Sayfanın en üstündeki ana görseli ise geç yüklemeyin, çünkü bu, en büyük içerik öğesinin yüklenme süresini olumsuz etkiler.
Sonuçları nasıl ölçersiniz?
Dönüşümden önce ve sonra sayfa hızı testleri çalıştırıp toplam sayfa boyutunu, en büyük içerik öğesinin süresini ve görsel kaynaklı uyarıları karşılaştırın. Arama konsolundaki sayfa deneyimi raporları da zaman içindeki iyileşmeyi gösterir. Ayrıca görsellerde açıklayıcı dosya adları ve alt metinler kullanmayı sürdürün; format değişse de görsel aramadaki görünürlük bu unsurlara bağlıdır.
Modern formatlara geçiş tek seferlik bir iş gibi görünse de en verimli sonuç, yeni yüklenen her görselin otomatik olarak dönüştürüldüğü bir düzen kurulduğunda alınır.