Görsel Optimizasyonu Nedir?
İngilizce: Image Optimization
Görsel optimizasyonu, doğru boyut, format, sıkıştırma ve yükleme stratejisiyle sayfaların daha hızlı açılmasını sağlar.
Görsel Optimizasyonu Nedir?
Görsel optimizasyonu, web sayfasındaki resimlerin görüntü kalitesini koruyarak daha az veriyle, doğru boyutta ve doğru zamanda yüklenmesini sağlar. Büyük bir hero görselinin gereksiz yere 4000 piksel genişliğinde gönderilmesi, hızlı sunucuda bile sayfa deneyimini yavaşlatabilir.
Temel adımlar arasında görseli kullanım alanına göre yeniden boyutlandırmak, JPEG/PNG yerine uygun olduğunda WebP veya AVIF kullanmak, kalite-sıkıştırma dengesini ayarlamak ve mobil ekranlar için srcset ile farklı boyutlar sunmak bulunur. İlk ekranda görünmeyen görseller lazy loading ile ertelenebilir.
Performansa Etkisi
Görseller çoğu sayfada en büyük veri kalemidir. Gereğinden büyük dosyalar LCP süresini uzatır, mobil veri tüketimini artırır ve zayıf bağlantıda kullanıcıyı bekletir. Ürün listeleme, portfolyo, blog ve kampanya sayfalarında görsel optimizasyonu doğrudan keşfedilebilirlik ve dönüşüm deneyimini etkiler.
Uygulama Notları
Optimizasyon sadece dosyayı sıkıştırmak değildir. CMS yükleme akışı, CDN dönüşümleri, önbellek başlıkları, alt metin ve görsel kırılma durumları birlikte tasarlanmalıdır. Core Web Vitals hedefleri izlenirken CDN üzerinden otomatik format seçimi ve boyutlandırma kullanılabilir.
İlgili Terimler
AVIF, AV1 sıkıştırmasını kullanan, web görsellerini küçük dosya boyutuyla yüksek kaliteye yakın sunan modern formattır.
CDNCDN, statik içerikleri uç sunucularda önbelleğe alıp kullanıcıya en yakın noktadan sunarak gecikmeyi ve origin yükünü azaltır.
Core Web VitalsCore Web Vitals, Google'ın gerçek kullanıcı deneyimini LCP, INP ve CLS metrikleriyle ölçtüğü temel web performansı göstergeleridir.
Lazy LoadingLazy loading, görsel, video veya bileşenleri ihtiyaç duyulana kadar erteleyerek ilk yükleme süresini ve veri kullanımını azaltır.
Performans BütçesiPerformans bütçesi, bir web sayfası için dosya boyutu, istek sayısı ve yükleme süresi gibi metriklere konan ölçülebilir sınırdır.
WebPWebP, kayıplı ve kayıpsız sıkıştırma, şeffaflık ve animasyon desteğiyle web görsellerini küçülten modern formattır.