Web İçin Görsel Optimizasyonu: Kapsamlı Rehber

Görseller, web sayfalarının toplam boyutunun ortalama %50'sinden fazlasını oluşturur. Optimize edilmemiş görseller sayfa yükleme süresini dramatik şekilde artırır, mobil kullanıcıların veri kotasını tüketir ve Core Web Vitals skorlarını olumsuz etkiler. Doğru görsel optimizasyonu stratejisi ile sayfa boyutunu %60-80 oranında küçültmek mümkündür.

Doğru Format Seçimi

Her görsel formatının güçlü ve zayıf yönleri vardır. Doğru formatı seçmek optimizasyonun ilk adımıdır:

JPEG (JPG)

• Fotoğraflar ve karmaşık renkli görseller için idealdir
• Kayıplı (lossy) sıkıştırma — kalite ayarlanabilir
• Şeffaflık (transparency) desteklemez
• Önerilen kalite: web için %70-85 arası genellikle yeterlidir

PNG

• Şeffaflık gerektiren görseller, logolar, ikonlar ve ekran görüntüleri için uygundur
• Kayıpsız (lossless) sıkıştırma — kalite kaybı olmaz
• Fotoğraflar için JPEG'den çok daha büyük dosya boyutu üretir
• PNG-8 (256 renk) basit grafikler için yeterli olabilir

WebP

• Google tarafından geliştirilen modern format
• Hem kayıplı hem kayıpsız sıkıştırma destekler
• JPEG'e göre %25-35, PNG'ye göre %26 daha küçük dosya boyutu
• Şeffaflık ve animasyon desteği vardır
• Tüm modern tarayıcılarda desteklenir (%97+ küresel destek)

AVIF

• En yeni ve en verimli görsel formatı
• WebP'den %20, JPEG'den %50 daha küçük dosya boyutu
• Yüksek dinamik aralık (HDR) desteği
• Kodlama süresi diğer formatlara göre daha uzundur
• Tarayıcı desteği hızla artmaktadır ancak WebP kadar yaygın değildir

SVG

• Vektörel format — her boyutta keskin görüntü
• İkonlar, logolar ve basit illüstrasyonlar için idealdir
• CSS ve JavaScript ile manipüle edilebilir
• Karmaşık görseller için uygun değildir, dosya boyutu büyür

Görsel Sıkıştırma

Sıkıştırma, görsel optimizasyonunun en etkili adımıdır. İki temel yaklaşım vardır:

• Kayıplı sıkıştırma (lossy): Gözle fark edilmeyen detayları kaldırarak dosya boyutunu önemli ölçüde küçültür. Fotoğraflar için idealdir.
• Kayıpsız sıkıştırma (lossless): Orijinal kaliteyi koruyarak dosya boyutunu optimize eder. Grafikler ve teknik görseller için uygundur.

Pratik kural: Çoğu web görseli için kayıplı sıkıştırma yeterlidir. JPEG kalite değeri %75-85 aralığında tutulduğunda, çoğu kullanıcı farkı ayırt edemez.

Responsive Images: Duyarlı Görseller

Farklı ekran boyutları ve çözünürlükler için farklı görsel boyutları sunmak, gereksiz veri transferini önler:

<picture>
  <!-- AVIF desteği olan tarayıcılar için -->
  <source
    type="image/avif"
    srcset="photo-400.avif 400w, photo-800.avif 800w"
    sizes="(max-width: 600px) 400px, 800px"
  >
  <!-- WebP desteği olan tarayıcılar için -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 400px, 800px"
  >
  <!-- Fallback -->
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 400px, 800px"
    alt="Açıklayıcı metin"
    loading="lazy"
    decoding="async"
    width="800"
    height="600"
  >
</picture>

<picture> elementi ile tarayıcı desteğine göre en verimli formatı sunabilirsiniz. srcset ve sizes öznitelikleri ile tarayıcı, ekran boyutuna en uygun görseli otomatik seçer.

Lazy Loading

Sayfanın altındaki görsellerin yalnızca görünür alana yaklaştıklarında yüklenmesini sağlayarak ilk yükleme süresini iyileştirin:

<!-- Native lazy loading -->
<img src="foto.webp" loading="lazy" alt="Açıklama" width="800" height="600">

Önemli: Sayfanın üst kısmındaki (above-the-fold) hero görseline lazy loading uygulamayın. Bu, LCP metriğini olumsuz etkiler. Sadece ekranın altında kalan görsellere loading="lazy" ekleyin.

width ve height Öznitelikleri

Görsellerde width ve height belirtmek, tarayıcının görsel yüklenmeden önce gerekli alanı ayırmasını sağlar. Bu, CLS (Cumulative Layout Shift) skorunuzu iyileştirir ve sayfadaki beklenmedik kaymaları önler.

Görsel Optimizasyon Araçlarını Kullanın

Görsellerinizi hızlıca optimize etmek için Görsel Sıkıştırma aracımızı kullanabilirsiniz. Formatlar arası dönüşüm için ise Görsel Format Dönüştürücü aracımız mevcuttur. Her iki araç da tarayıcınızda çalışır.