Görsel optimizasyonu: WebP, AVIF ve lazy loading ile hızlı sayfalar
· PoolByte Technology
Bir web sayfasının toplam boyutunda en büyük payı çoğu zaman görseller alır; bu yüzden görsel optimizasyonu hız çalışmalarının en verimli başlangıç noktalarından biridir. Ana sayfadaki büyük kapak fotoğrafı, ürün galerileri ve blog görselleri doğru hazırlanmadığında sayfa mobil bağlantıda saniyelerce bekletebilir. Üstelik sayfanın en büyük görünür öğesi genellikle bir görseldir ve bu öğenin ne kadar hızlı göründüğü, Core Web Vitals ölçümlerinden LCP'yi doğrudan etkiler.
Görsel optimizasyonu yalnızca dosyayı sıkıştırmak değildir. Doğru format, gösterileceği boyuta uygun çözünürlük, doğru yükleme önceliği ve yayın sürecine eklenen birkaç kural birlikte sonuç verir.
Önce en ağır görselleri bulun
Tarayıcının geliştirici araçlarında Ağ sekmesini açın, filtreyi görsellerle sınırlayın ve listeyi boyuta göre sıralayın. Hangi görselin kaç kilobayt olduğunu ve sayfada gerçekte kaç piksel genişliğinde gösterildiğini karşılaştırın. Lighthouse raporundaki görselleri doğru boyutlandırma ve modern formatlarda sunma önerileri de iyi bir başlangıç listesi verir.
Genellikle birkaç dosya toplam ağırlığın büyük kısmını oluşturur. Görsel optimizasyonuna bütün siteyi yeniden işleyerek değil, bu dosyalardan başlayarak girişmek emeğe göre en hızlı kazancı sağlar. Sayfa hızının diğer bileşenlerini ölçmek için Core Web Vitals rehberimize bakabilirsiniz.
Formatı içeriğe göre seçin
Her görsel için tek bir doğru format yoktur:
- Fotoğraflar için WebP, JPEG'e göre genellikle daha küçük dosya sağlar ve güncel tarayıcıların tamamına yakını tarafından desteklenir.
- AVIF, fotoğraflarda çoğu zaman daha da yüksek sıkıştırma sunar; ancak kodlama süresi uzundur ve bazı eski cihazlarda desteklenmeyebilir.
- Logo, ikon ve basit çizimler için SVG, her çözünürlükte net kalır ve çoğunlukla çok küçüktür.
- Saydamlık gerektiren ekran görüntüleri için PNG hâlâ kullanılabilir; ancak WebP de saydamlığı destekler.
Farklı formatları birlikte sunmak için <picture> öğesini kullanabilirsiniz. Tarayıcı desteklediği ilk kaynağı seçer, desteklemezse son satırdaki standart görsele döner.
<picture>
<source srcset="kapak.avif" type="image/avif">
<source srcset="kapak.webp" type="image/webp">
<img src="kapak.jpg" alt="Ofiste toplantı yapan ekip" width="1200" height="675">
</picture>Görseli gösterileceği boyutta üretin
En sık yapılan hata, telefonla çekilmiş 4000 piksellik bir fotoğrafı 800 piksellik bir alanda göstermektir. Tarayıcı fazladan pikselleri indirir ama kullanmaz. Görseli, sayfadaki en geniş görünümünün yaklaşık iki katı genişlikte hazırlamak yüksek yoğunluklu ekranlar için genellikle yeterlidir.
Farklı ekran genişlikleri için srcset ve sizes niteliklerini kullanarak birden fazla boyut sunun. Böylece telefon küçük dosyayı, geniş ekran ise büyük dosyayı indirir. width ve height niteliklerini de mutlaka ekleyin; tarayıcı görsel yüklenmeden önce alanı ayırır ve sayfa içeriği kaymaz.
Sıkıştırma kalitesini gözle kontrol edin
Kalite ayarı ile dosya boyutu arasında doğrusal bir ilişki yoktur. Çoğu fotoğrafta orta-yüksek kalite ayarı, gözle fark edilmeyen bir kayıpla dosyayı belirgin biçimde küçültür. Aynı görseli birkaç farklı kalite ayarında dışa aktarıp yan yana karşılaştırın; özellikle ten rengi, gökyüzü geçişleri ve küçük yazılar bozulmaya en hassas alanlardır.
Fotoğraflardaki EXIF bilgilerini de temizleyin. Bu bilgiler dosyayı büyütmenin yanında çekim yerinin konumunu bile içerebilir.
Lazy loading'i doğru görsellerde kullanın
loading="lazy" niteliği, ekranın görünür alanı dışındaki görsellerin kullanıcı o bölüme yaklaşana kadar indirilmemesini sağlar. Uzun ürün listeleri ve blog sayfaları için çok etkilidir.
Ancak sayfa açıldığında hemen görünen kapak görseline lazy loading eklemek ters etki yapar ve LCP süresini uzatır. Bu ana görsel için tersine fetchpriority="high" kullanarak tarayıcıya önce bu dosyayı istemesini söyleyebilirsiniz. Kısacası: ilk ekrandaki görseller hemen, aşağıdakiler gerektiğinde yüklenmelidir.
Yayın sürecine kural ekleyin
Görsel optimizasyonunu bir kez yapıp bırakırsanız, yeni yüklenen görsellerle sorun geri döner. Ekibinizle basit kurallar belirleyin: maksimum genişlik, tercih edilen format, dosya adlandırma ve alternatif metin zorunluluğu. WordPress gibi sistemler yüklenen görselin farklı boyutlarını otomatik üretir; bu boyutların temanızdaki alanlarla uyumlu olduğundan emin olun.
E-ticaret sitelerinde ürün fotoğrafları için ayrı bir standart belirlemek daha da önemlidir. E-ticaret ürün sayfası rehberimiz çekim ve hazırlık tarafını anlatır. Görselleri bir CDN üzerinden sunmak ve doğru önbellek süreleri vermek de tekrar eden ziyaretlerde fark yaratır.
Sık sorulan sorular
WebP'ye geçince eski JPEG dosyalarını silmeli miyim?
Orijinal dosyaları yedekte saklamak iyi bir uygulamadır. İleride farklı bir boyut veya format üretmeniz gerektiğinde kaliteli kaynaktan yeniden başlayabilirsiniz.
Bütün görsellere lazy loading eklemek zararlı mı?
İlk ekranda görünen görsellere eklendiğinde evet. Bu görsellerin geç yüklenmesi sayfanın görsel olarak tamamlanmasını geciktirir. Lazy loading'i yalnızca kaydırınca görünen görsellerde kullanın.