Web sitesinde görsel optimizasyonu: WebP, AVIF ve doğru boyutlandırma

Kurumsal web sitelerinde yavaşlığın en sık nedeni optimize edilmemiş görsellerdir. Telefonla çekilmiş 4000 piksel genişliğinde ve birkaç megabaytlık fotoğraflar, sitede 800 piksel genişliğinde gösterilse bile ziyaretçinin cihazına tam boyutuyla indirilir. Bu, özellikle mobil veride sayfanın saniyelerce boş kalmasına yol açar.

1. Doğru piksel boyutu

Görsel, sitede gösterileceği en büyük boyuttan çok daha büyük olmamalıdır. Yüksek çözünürlüklü ekranlar için gösterim boyutunun yaklaşık iki katı yeterlidir. Duyarlı görsel teknikleriyle telefona küçük, geniş ekrana büyük sürüm gönderilebilir.

2. Modern formatlar

WebP, aynı görsel kalitede JPEG ve PNG'ye göre genellikle belirgin şekilde daha küçük dosyalar üretir ve güncel tarayıcıların tamamına yakını tarafından desteklenir. AVIF ise çoğu durumda daha da küçük dosyalar sunar; kodlaması daha yavaştır. Tarayıcının desteğine göre en uygun formatı sunmak mümkündür.

3. Sıkıştırma

Kalite ayarı, dosya boyutu üzerinde büyük etkiye sahiptir. Fotoğraflarda gözle fark edilmeyecek bir sıkıştırma seviyesi, dosyayı önemli ölçüde küçültür. Logo ve ikonlar için vektörel SVG formatı tercih edilmelidir.

4. Gecikmeli yükleme

Sayfanın alt kısımlarındaki görsellerin, kullanıcı o bölüme yaklaşınca yüklenmesi (lazy loading), ilk açılışı hızlandırır. Ancak sayfanın en üstündeki ana görsel gecikmeli yüklenmemelidir; aksi hâlde ilk görüntü gecikir.

5. Boyut bilgisi

Görsellerin genişlik ve yükseklik bilgisi HTML'de belirtilmelidir. Aksi hâlde görsel yüklenirken sayfa kayar; bu da kullanıcı deneyimini ve Core Web Vitals metriklerini olumsuz etkiler. Ayrıntılar için Core Web Vitals yazımıza bakabilirsiniz.

6. Alt metin

Her görselin içeriğini anlatan alt metni olmalıdır. Bu, görme engelli kullanıcılar ve arama motorları için önemlidir. Erişilebilirlik için erişilebilirlik yazımıza bakabilirsiniz.

Otomatikleştirin

İçerik yöneticisinin her görseli elle optimize etmesi beklenmemelidir. İyi bir web sitesi, yüklenen görselleri otomatik olarak yeniden boyutlandırır, modern formatlara dönüştürür ve sıkıştırır. Böylece site yıllar içinde yavaşlamaz.

Sonucu ölçün

Optimizasyon öncesi ve sonrası sayfa ağırlığı ve açılış süresi ölçülmelidir. Çoğu kurumsal sitede yalnızca görsel optimizasyonu, sayfa boyutunu belirgin şekilde azaltır.

Sur Bilgisayar olarak geliştirdiğimiz web sitelerinde görselleri otomatik olarak optimize eden altyapılar kullanıyoruz. Ayrıntılar için web yazılım hizmetleri sayfamıza bakabilirsiniz.