Sitelerde Görsel Optimizasyonu Nasıl Yapılır?

Görsel Optimizasyonu Neden Önemli?

Büyük ve gereğinden ağır görseller sayfanın açılmasını yavaşlatır. Özellikle haber sitelerinde ilk ekranda görünen kapak görseli çoğu zaman LCP (Largest Contentful Paint) öğesidir; yani sayfanın "yüklendi" hissini bu görsel belirler. Optimize edilmiş görseller daha az bant genişliği tüketir, mobil kullanıcıyı bekletmez ve arama motorlarının hızla ilgili sinyallerini olumlu etkiler.

Haber sitelerinde günde çok sayıda içerik yayınlanır ve her içeriğe genellikle en az bir görsel eşlik eder. Yayın hacmi yükseldikçe optimize edilmemiş görsellerin toplam maliyeti hızla büyür: hem ziyaretçinin indirdiği veri hem de sizin sunucu ve trafik giderleriniz artar. Bu yüzden görsel optimizasyonunu tek tek dosyalara değil, yayın akışının otomatik bir parçası olarak ele almak gerekir.

• Daha hızlı yüklenme ve daha düşük terk oranı.
• Mobil kullanıcılar için daha az veri tüketimi.
• Daha iyi Core Web Vitals (özellikle LCP ve CLS).
• Sunucu ve CDN maliyetlerinde düşüş.

Doğru Görsel Formatını Seçmek

Optimizasyonun ilk adımı içeriğe uygun formatı seçmektir. Fotoğraf, logo ve şeffaf katmanlı grafikler farklı formatlarda en iyi sonucu verir.

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Aciklayici metin" width="1200" height="800">
</picture>

Boyutlandırma ve Sıkıştırma

Görseli, ekranda görüneceği ölçüden çok daha büyük yüklemek en sık yapılan hatadır. 4000 piksel genişliğindeki bir fotoğrafı 800 piksellik bir alana koymak, kullanıcıya gereksiz veri indirtir. Görseli kullanılacak en büyük ölçüye göre yeniden boyutlandırın, sonra sıkıştırın. Sıkıştırma iki türlüdür: kayıpsız (lossless) sıkıştırma görüntü verisini bozmadan dosyayı küçültür; kayıplı (lossy) sıkıştırma ise gözle fark edilmesi zor detayları atarak çok daha büyük kazanç sağlar. Fotoğraflarda genellikle kayıplı sıkıştırma tercih edilir.

• Yükleme öncesi görseli gerçek kullanım genişliğine göre yeniden boyutlandırın.
• Fotoğraflarda kaliteyi genellikle makul bir aralıkta tutun; gözle ayırt edilemeyen fazla kaliteyi atın.
• Meta verileri (EXIF) gerekmiyorsa temizleyin.
• Otomatik bir dönüştürme adımı kurun ki her yükleme tutarlı çıksın.

# WebP'ye donusturme ornegi (cwebp)
cwebp -q 80 foto.jpg -o foto.webp

# AVIF'e donusturme ornegi (avifenc)
avifenc foto.jpg foto.avif

Responsive Görseller: srcset ve sizes

Tek bir dosyayı hem masaüstüne hem telefona sunmak yerine, farklı çözünürlükte sürümler hazırlayıp tarayıcının cihaza uygun olanı seçmesine izin verin. Bunun için srcset ve sizes özniteliklerini kullanın. srcset mevcut dosya sürümlerini ve genişliklerini bildirir; sizes ise görselin farklı ekran genişliklerinde ne kadar yer kaplayacağını tarayıcıya söyler. Böylece telefon küçük bir sürümü, geniş ekran ise büyük sürümü indirir. Mobil uyumluluk açısından bu yaklaşım kritik; ayrıntı için haber sitelerinde mobil uyumluluk yazısına da bakabilirsiniz.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Aciklayici metin"
  width="800" height="533">

Lazy Loading ve Düzen Kayması

Ekranın altında kalan görselleri hemen indirmeye gerek yoktur. loading="lazy" özniteliği, görseli yalnızca görünüme yaklaştığında yükleyerek ilk açılışı hafifletir. Ancak ilk ekrandaki (LCP) görsele lazy loading uygulamayın; onun erken yüklenmesi gerekir.

Her görsele width ve height (ya da CSS ile en-boy oranı) vermek, tarayıcının yer ayırmasını sağlar ve içeriğin zıplamasını (CLS) önler. Bu, hem kullanıcı deneyimi hem de Core Web Vitals için önemlidir.

CDN, Önbellek ve Sunum

Görseller genellikle statik dosyalardır; bir kez optimize edilip uzun süreli önbelleğe alınabilir. Bir CDN üzerinden sunmak, dosyayı kullanıcıya coğrafi olarak yakın bir noktadan ulaştırarak gecikmeyi azaltır. Dosya adına içerik özeti (hash) ekleyen bir sürümleme yöntemi kullanırsanız, görsel değişmediği sürece tarayıcı onu tekrar indirmez; görsel değiştiğindeyse dosya adı da değişeceği için eski önbellek sorun çıkarmaz. Önbelleğin nasıl çalıştığını önbellek rehberimizde ayrıntılı bulabilirsiniz.

• Statik görseller için uzun önbellek süresi ve içerik sürümleme (dosya adına hash) kullanın.
• CDN üzerinden dağıtın; kaynak sunucunuzun yükünü azaltır.
• Mümkünse formatı ve boyutu talebe göre üreten bir görsel servisi kullanın.

Erişilebilirlik ve SEO

İyi görsel optimizasyonu yalnızca boyutla ilgili değildir. Her anlamlı görsele açıklayıcı alt metni ekleyin: bu hem ekran okuyucular için erişilebilirliği sağlar hem de arama motorunun görseli anlamasına yardım eder. Dosya adlarını da açıklayıcı tutun ve görselleri XML görsel site haritasıyla ya da normal site haritanızla erişilebilir kılın.

Görsel arama, haber içerikleri için ek bir ziyaretçi kaynağıdır. Alt metni, dosya adı ve görselin çevresindeki bağlam (başlık, resim altı yazısı) birlikte arama motoruna görselin neyi anlattığını söyler. Ancak bu alanları anahtar kelimeyle doldurmak fayda getirmez; kullanıcıya gerçekten yardımcı olacak, doğal ve doğru açıklamalar yazmak Google'ın "faydalı içerik" ilkesine de uygundur.

• Bilgi taşıyan görsellere kısa ve doğru alt metni yazın; dekoratif görselleri boş alt (alt="") ile geçin.
• Dosya adlarını anlamlı seçin (ornek: mavi-sunucu-rafi.webp).
• Anahtar kelime doldurması yapmayın; alt metni doğal olsun.

Hızlı Kontrol Listesi

• Doğru format seçildi mi? (fotoğraf: JPEG/WebP/AVIF, logo: SVG, şeffaflık: PNG/WebP)
• Görsel gerçek kullanım ölçüsüne göre boyutlandırıldı ve sıkıştırıldı mı?
• srcset/sizes ile responsive sürümler sunuldu mu?
• İlk ekran dışındaki görsellere lazy loading uygulandı mı?
• width/height verilerek düzen kayması (CLS) önlendi mi?
• CDN ve uzun önbellek devrede mi?
• Açıklayıcı alt metni ve dosya adı var mı?