Web sitesinde görsel optimizasyonu, her görseli doğru formatta (fotoğraflar için AVIF veya WebP, logo ve ikonlar için SVG), ekranda gösterileceği boyuta yakın ölçüde ve sıkıştırılmış olarak sunmaktır. srcset ve sizes ile cihaza uygun dosya seçilir, width ve height ile düzen kayması önlenir, ekran dışındaki görseller lazy loading ile ertelenir; LCP görseli ise asla ertelenmez.
Görseller çoğu kurumsal sitede sayfa ağırlığının en büyük kalemidir. Bu yazı hangi görselin seçileceğini değil, seçilen görselin tarayıcıya nasıl teslim edileceğini anlatıyor: format, işaretleme, yükleme önceliği ve build sürecindeki otomasyon.
WebP, AVIF, JPEG ve PNG arasındaki fark nedir?
WebP ve AVIF, JPEG ve PNG'ye göre aynı görsel kalitede belirgin şekilde daha küçük dosya üreten modern görsel formatlarıdır. AVIF genellikle WebP'den de küçük dosya verir ama kodlaması daha yavaştır. 2026 itibarıyla güncel Chrome, Edge, Firefox ve Safari sürümlerinin tamamı hem WebP'yi hem AVIF'i destekler.
- —JPEG: Evrensel destek, fotoğraflar için iyi, şeffaflık yok. Modern formatlara göre aynı kalitede daha büyük dosya.
- —PNG: Kayıpsız ve şeffaflık destekli; ekran görüntüsü ve keskin kenarlı grafikler için uygun, fotoğraf için genellikle gereksiz ağır.
- —WebP: Kayıplı ve kayıpsız modu, şeffaflık ve animasyon desteği var; hızlı kodlanır, güvenli bir varsayılan.
- —AVIF: Fotoğraflarda çoğu zaman en küçük dosyayı verir, HDR ve geniş renk gamını destekler; kodlama süresi uzundur, bu yüzden build aşamasında üretilmelidir.
- —SVG: Logo, ikon ve çizimler için vektör format; her çözünürlükte keskin kalır ve genellikle birkaç KB tutar.
Pratik öneri: fotoğraflar için AVIF üretip WebP'yi yedek olarak sunmak, çok eski tarayıcılar için de JPEG bırakmak. Bunu picture öğesi içinde type özniteliği taşıyan source satırlarıyla yaparsınız; tarayıcı desteklediği ilk formatı seçer. Başlangıç kalite değeri olarak WebP'de 75-80, AVIF'te 50-60 aralığı çoğu fotoğrafta iyi sonuç verir, ama kararı gözle karşılaştırarak verin.
İlgili hizmetler
srcset ve sizes ile duyarlı görsel nasıl sunulur?
Duyarlı görsel, aynı görselin birkaç genişlikte kopyasını srcset özniteliğinde listeleyip sizes ile görselin sayfada kaplayacağı genişliği tarayıcıya bildirmektir. Tarayıcı ekran genişliğini ve piksel yoğunluğunu hesaba katarak en uygun dosyayı indirir; böylece telefona masaüstü boyutunda görsel gönderilmez.
- —Genişlik tanımlayıcıları kullanın: örneğin 480w, 800w, 1200w ve 1600w boyutlarında dört dosya üretin.
- —sizes değerini gerçek düzene göre yazın: örneğin mobilde tam genişlik, masaüstünde 800 piksel için sizes="(max-width: 768px) 100vw, 800px".
- —sizes yazılmazsa tarayıcı görselin 100vw olduğunu varsayar ve gereğinden büyük dosya indirebilir.
- —Sabit boyutlu küçük görsellerde (avatar, logo) 1x ve 2x yoğunluk tanımlayıcıları yeterlidir.
- —Mobil ve masaüstünde farklı kırpım gerekiyorsa (art direction) picture öğesinde media koşullu source satırları kullanın.
Sık görülen hata, 400 piksel genişliğinde bir kartta 2400 piksellik orijinal fotoğrafı göstermektir. Retina ekranlar için bile görüntülenen genişliğin iki katı çoğu durumda yeterlidir; daha fazlası yalnızca bant genişliği harcar.
width ve height öznitelikleri neden CLS'yi önler?
Görsel etiketine width ve height yazmak, tarayıcının görsel henüz inmeden en-boy oranını hesaplayıp yerini ayırmasını sağlar. Böylece görsel yüklendiğinde altındaki metin aşağı kaymaz ve Cumulative Layout Shift (CLS) değeri bozulmaz. CSS'te width: 100% ve height: auto ile birlikte kullanıldığında görsel duyarlı kalmaya devam eder.
Değerler görüntülenen boyut değil, dosyanın gerçek oranı olmalıdır; tarayıcı yalnızca oranı kullanır. Arka plan görselleri ve gömülü içerikler için CSS aspect-ratio özelliği aynı işi görür. Yorum veya reklam gibi sonradan yüklenen alanlar için de önceden yükseklik ayırmak gerekir.
Devamı için
Lazy loading nerede kullanılmalı, nerede kullanılmamalı?
Lazy loading, ekranın dışında kalan görsellerin indirilmesini kullanıcı o bölgeye yaklaşana kadar erteleyen tekniktir ve loading="lazy" özniteliğiyle yerel olarak desteklenir. Lazy loading ilk ekranın altındaki görsellerde kullanılmalı; hero görseli gibi Largest Contentful Paint (LCP) öğesi olan görsele ise kesinlikle uygulanmamalıdır.
- —Uygulayın: sayfanın aşağısındaki galeri, blog kartları, footer logoları ve sekme içindeki görseller.
- —Uygulamayın: hero görseli, ilk ekrandaki ürün fotoğrafı, logo ve LCP adayı olabilecek her görsel.
- —LCP görselini CSS arka planı olarak vermek yerine img etiketi olarak koymak, tarayıcının onu erken keşfetmesini sağlar.
- —decoding="async" büyük görsellerin çözümlenmesinin ana iş parçacığını meşgul etmesini azaltabilir.
fetchpriority="high" ne işe yarar?
fetchpriority="high", tarayıcıya bu görselin diğer kaynaklardan önce indirilmesi gerektiğini söyler. Tarayıcılar görselleri varsayılan olarak düşük öncelikle başlatır; LCP görseline bu özniteliği eklemek LCP süresini kısaltabilir. Sayfa başına yalnızca bir iki görselde kullanın; her şeye yüksek öncelik vermek önceliklendirmeyi anlamsız kılar.
Görseller build sırasında nasıl otomatik sıkıştırılır?
Görsel sıkıştırma en güvenilir biçimde build aşamasında otomatikleştirilir: kaynak klasördeki yüksek çözünürlüklü orijinaller bir betik veya bundler eklentisiyle birkaç genişlikte AVIF, WebP ve JPEG olarak üretilir. Böylece içerik ekleyen kişinin her seferinde elle sıkıştırma yapmasına gerek kalmaz ve hiçbir optimize edilmemiş dosya yayına çıkmaz.
- —sharp: Node.js için hızlı görsel işleme kütüphanesi; yeniden boyutlandırma ve AVIF/WebP üretimi için yaygın tercih.
- —vite-imagetools gibi bundler eklentileri: import sırasında sorgu parametreleriyle farklı boyut ve formatlar üretir.
- —Squoosh (web uygulaması): tek tek görselleri gözle karşılaştırıp kalite değerini belirlemek için kullanışlı.
- —SVGO: SVG dosyalarındaki gereksiz editör verisini temizler.
- —CDN tarafı dönüştürme: bazı CDN'ler görselleri istek anında yeniden boyutlandırıp formatlar; ek maliyet ve önbellek davranışını kontrol edin.
Orijinalleri depoda ayrı tutun ve üretilen dosyaları hash'li adlarla yayınlayın; böylece uzun süreli önbellek kuralları güvenle uygulanabilir. EXIF verisini (konum dahil) üretim sırasında silmek hem boyutu küçültür hem de gizlilik açısından doğrudur.
Bölgenizde destek
Görsel optimizasyonu için kontrol listesi
Görsel optimizasyonu kontrol listesi, yayından önce her sayfa şablonunda tek tek doğrulanması gereken birkaç maddeden oluşur. Lighthouse ve PageSpeed Insights bu maddelerin çoğunu uyarı olarak gösterir, ama asıl ölçüt gerçek kullanıcı verisidir; Search Console'daki Core Web Vitals raporunu yayından sonraki haftalarda izleyin.
- —Fotoğraflar AVIF veya WebP, logo ve ikonlar SVG.
- —Her görselde srcset ve gerçek düzene uygun sizes var.
- —Her img etiketinde width ve height ya da kapsayıcıda aspect-ratio tanımlı.
- —LCP görselinde lazy loading yok, fetchpriority="high" var.
- —İlk ekranın altındaki görsellerde loading="lazy" var.
- —Her görselde anlamlı alt metni, dekoratif görsellerde boş alt var.
- —Build hattı orijinallerden otomatik boyut ve format üretiyor, EXIF temizleniyor.