Görsel Optimizasyonu: WebP, Lazy Load ve Sıkıştırma

Bir e-ticaret ürün sayfasını açtığınızda tarayıcının indirdiği verinin büyük bölümü, çoğu zaman metin değil görsellerdir. Ürün fotoğrafları, kategori banner'ları, logo, arka plan görselleri — bunların hepsi birer dosyadır ve sıkça gereğinden çok daha ağır boyutlarda sunucudan indirilir. Görsel optimizasyonu, bu dosyaları gözle görülür bir kalite kaybı yaşatmadan olabildiğince küçültüp sitenizi hem ziyaretçileriniz hem de Google için daha hızlı hâle getirme işidir.

İyi haber şu: görsel optimizasyonu, site hızını artırmak için yapabileceğiniz en yüksek getirili işlerden biridir. Çünkü çoğu sitede tek bir kaynak grubu — görseller — toplam sayfa ağırlığının en büyük payını oluşturur. Bu yazıda doğru dosya formatını seçmekten sıkıştırmaya, doğru boyutlandırmadan responsive görsellere ve lazy loading'in doğru uygulanmasına kadar görsel optimizasyonunun tüm pratik adımlarını anlatıyoruz.

Kısa tanım: Görsel optimizasyonu; bir görseli doğru dosya formatında kaydetmek, uygun oranda sıkıştırmak, ekranda gösterileceği gerçek boyutta sunmak ve gerektiğinde yüklemesini geciktirmek (lazy loading) yoluyla dosya boyutunu en aza indirme sürecidir. Amaç, görsel kaliteyi büyük ölçüde korurken sayfanın toplam veri ağırlığını azaltmaktır.

Görseller Neden Sayfa Hızının En Büyük Sorunu?

Bir sayfa açıldığında tarayıcı; HTML, CSS, JavaScript ve görselleri sırayla veya paralel olarak indirir. Metin dosyaları (HTML, CSS, JS) genellikle birkaç yüz kilobayt civarındayken, optimize edilmemiş tek bir fotoğraf bile kolayca birkaç megabayta ulaşabilir. Bir ürün sayfasında beş-altı fotoğraf, bir kategori sayfasında düzinelerce küçük görsel olduğunu düşünürseniz, sayfanın toplam ağırlığının önemli kısmının görsellerden geldiğini görmek şaşırtıcı olmaz.

Bunun SEO'ya yansıması doğrudandır. Google'ın Core Web Vitals metriklerinden LCP (Largest Contentful Paint), yani sayfadaki en büyük içeriğin ekranda görünme süresi, çoğu sayfada bir görseldir — banner, ürün fotoğrafı ya da hero görseli. Bu görsel ağır ve geç yüklenirse LCP kötüleşir, kullanıcı sayfayı "yavaş açılıyor" olarak algılar ve Google bunu sıralama sinyallerinden biri olarak değerlendirir. LCP iyileştirme yazımızda bu metriği ayrıntılı ele alıyoruz; ama kısacası: LCP'yi iyileştirmenin en hızlı yollarından biri, genellikle sayfadaki o kritik görseli optimize etmektir.

Modern Görsel Formatları: JPEG, PNG, WebP ve AVIF

Görsel optimizasyonunun ilk adımı doğru formatı seçmektir. Her format farklı bir amaç için tasarlanmıştır ve yanlış format seçimi, sıkıştırma bile yapmadan gereksiz veri israfına yol açar.

JPEG ve PNG: Klasik Formatlar

JPEG, fotoğraflar için tasarlanmış "kayıplı" (lossy) bir formattır; kalite ayarını düşürerek dosya boyutunu ciddi oranda küçültebilirsiniz. PNG ise saydamlık (transparency) gerektiren logo, ikon gibi grafikler için kullanılır ve genellikle "kayıpsız" (lossless) çalışır — bu da onu fotoğraflar için gereğinden ağır yapar.

WebP: Günümüzün Standart Tercihi

WebP, Google tarafından geliştirilen ve artık tüm modern tarayıcılarda desteklenen bir formattır. Hem kayıplı hem kayıpsız sıkıştırmayı destekler, saydamlığı korur ve aynı görsel kalitesinde JPEG/PNG'ye kıyasla tipik olarak belirgin ölçüde daha küçük dosyalar üretir. Bugün itibarıyla, özel bir sebebiniz yoksa (örneğin çok eski bir sistemle uyumluluk gerekmiyorsa) yeni yüklediğiniz görseller için varsayılan format WebP olmalıdır.

AVIF: Yeni Nesil Format

AVIF, WebP'den de küçük dosyalar üretebilen daha yeni bir formattır ve güncel tarayıcıların büyük çoğunluğunda artık desteklenmektedir. Sıkıştırma işlemi WebP'ye göre biraz daha fazla işlem gücü gerektirir, bu yüzden bazı sitelerde WebP'yi ana format, AVIF'i ekstra kazanç için ikinci seçenek olarak kullanmak pratik bir yaklaşımdır. HTML'de <picture> etiketiyle tarayıcıya öncelik sırasını siz belirlersiniz; tarayıcı desteklediği ilk formatı seçer, desteklemiyorsa bir alttaki <img> etiketine düşer.

Sıkıştırma: Kaliteden Ödün Vermeden Küçültün

Sıkıştırma iki türlüdür: kayıpsız (lossless), dosyayı hiçbir görsel bilgi kaybetmeden küçültür ama kazanç sınırlıdır; kayıplı (lossy), göz ile fark edilmesi zor bazı detayları feda ederek çok daha büyük oranda küçültme sağlar. Fotoğraf ağırlıklı görsellerde kayıplı sıkıştırma, kalite ayarını %70-85 aralığında tutarak neredeyse fark edilmeyen bir kalite kaybıyla dosya boyutunu ciddi oranda azaltabilir.

Pratikte bunu genellikle üç yoldan biriyle yaparsınız:

• Ücretsiz web araçları (Squoosh, TinyPNG gibi) ile toplu veya tekli sıkıştırma.
• Görsel düzenleme yazılımlarının "web için kaydet" seçenekleri.
• CMS eklentileri (WordPress için görsel sıkıştırma eklentileri gibi), yüklenen her görseli otomatik sıkıştırır.

İpucu: Sıkıştırma sonrası görseli %100 zoom'da inceleyin, küçültülmüş hâliyle değil. Küçük bir thumbnail'de fark edemeyeceğiniz bozulmalar, büyük ekranda belirginleşebilir.

Doğru Boyutlandırma: Görüntülendiği Boyutta Sunun

Görsel optimizasyonunda en sık görülen ve en çok veri israf ettiren hata, sıkıştırma ya da format değil, yanlış boyutlandırmadır. Bursa'da mobilya satan bir firma düşünün: ürün fotoğrafları profesyonel bir fotoğraf makinesiyle 4000x3000 piksel çözünürlüğünde çekiliyor ve bu orijinal dosya doğrudan siteye yükleniyor — oysa ürün listesinde bu görsel yalnızca 400 piksel genişliğinde bir kutuda gösteriliyor. Tarayıcı, gereksiz yere on kat daha büyük bir dosyayı indirip ekranda küçültüyor; bu, hem bant genişliğinin hem de yükleme süresinin boşa harcanması demektir.

Doğru yaklaşım, görseli gösterileceği en büyük olası boyuta göre yeniden boyutlandırıp öyle yüklemektir. Çoğu CMS ve e-ticaret altyapısı bunu otomatik yapsa da, elle yüklenen görsellerde bu adımı atlamak yaygın bir hatadır.

Responsive Görseller: srcset ve sizes Kullanımı

Farklı ekran boyutlarına (mobil, tablet, masaüstü) aynı büyük görseli göndermek yerine, tarayıcının ekran genişliğine göre en uygun boyutu seçmesine izin verebilirsiniz. Bunun için HTML'in srcset ve sizes özellikleri kullanılır:

<img
  src="urun-800.webp"
  srcset="
    urun-400.webp 400w,
    urun-800.webp 800w,
    urun-1200.webp 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Bursa yatak odası takımı, ceviz kaplama"
  width="800"
  height="600"
  loading="lazy"
>

Bu örnekte tarayıcı, ekran genişliğine ve piksel yoğunluğuna göre üç farklı dosyadan (400w, 800w, 1200w) hangisinin en uygun olduğuna kendisi karar verir. Mobil bir kullanıcı gereksiz yere masaüstü boyutundaki dosyayı indirmez. width ve height özniteliklerini eklemeyi de unutmayın — bunlar tarayıcının görsel için doğru alanı önceden ayırmasını sağlayarak CLS (Cumulative Layout Shift) sorununu da önler.

Lazy Loading: Ekranda Olmayan Görselleri Geciktirin

loading="lazy" özniteliği, tarayıcıya bir görseli yalnızca kullanıcı o bölüme yaklaştığında yüklemesini söyler. Sayfanın ilk açılışında ekranda görünmeyen (uzun bir sayfanın alt kısımlarındaki) görseller için bu, ilk yükleme süresini doğrudan iyileştirir çünkü tarayıcı görünmeyen onlarca görseli boşuna indirmez.

Ancak burada kritik bir nüans var: lazy loading'i sayfanın en üstünde, ilk ekranda görünen ana görsele (özellikle LCP görseline) asla uygulamayın. Bu görsele lazy loading eklemek, tarayıcının onu geç fark etmesine ve LCP süresinin kötüleşmesine yol açar — yani hız için eklediğiniz bir özellik paradoksal biçimde en önemli metriği yavaşlatabilir. İlk ekrandaki kritik görsel için tam tersine fetchpriority="high" ekleyerek tarayıcıya "bunu hemen indir" sinyali vermek daha doğru bir yaklaşımdır.

Kısacası: ekranın altındaki görseller lazy, ekranın üstündeki kritik görsel eager (ve mümkünse yüksek öncelikli) olmalıdır.

CDN ve Otomatik Görsel Optimizasyon Servisleri

Birçok CDN (İçerik Dağıtım Ağı) ve görsel optimizasyon servisi, yüklediğiniz görseli otomatik olarak en uygun formata çevirip sıkıştırarak, hatta isteyen tarayıcıya göre farklı boyutlarda sunarak bu süreci sizin için otomatikleştirir. Trafiği yüksek veya çok sayıda görsel içeren sitelerde bu tür bir otomasyon, elle optimizasyon yapmaktan çok daha sürdürülebilirdir. Genel site hızı için atabileceğiniz diğer adımları site hızı artırma rehberimizde daha geniş kapsamda topladık.

Aşağıdaki tablo, en yaygın dört formatı hızlı karşılaştırma için özetliyor:

Görselin Alt Etiketi: Hız Değil Ama SEO İçin Şart

Görsel optimizasyonu yalnızca hızla ilgili değildir. Her görselin, içeriğini açıklayan bir alt etiketine sahip olması da ayrı ve en az o kadar önemli bir SEO gereğidir — hem görsel arama sonuçlarında görünürlük hem de erişilebilirlik için. Bu konuyu görsel SEO ve alt etiketi yazımızda ayrıntılı biçimde ele aldık; görsel optimizasyonu çalışmanızı yaparken bu adımı da aynı anda tamamlamanızı öneririz.

Sık Yapılan Görsel Optimizasyonu Hataları

• Orijinal fotoğraf makinesi/telefon çıktısını doğrudan yüklemek. Genellikle gereğinden 5-10 kat büyük dosyalardır.
• Tüm görselleri tek bir "yüksek kalite" ayarıyla kaydetmek. Her görsel için kalite/boyut dengesini ayrı ayrı değerlendirmek daha iyi sonuç verir.
• `width` ve `height` özniteliklerini boş bırakmak. Bu, sayfanın yüklenirken zıplamasına (layout shift) neden olur.
• Lazy loading'i ilk ekrandaki ana görsele de uygulamak. Yukarıda anlattığımız gibi bu, LCP'yi kötüleştirir.
• Görselleri hiç yeniden boyutlandırmadan CMS'e yüklemek ve CMS'in otomatik küçültme yapacağını varsaymak — her sistem bunu yapmaz.

Sıkça Sorulan Sorular

WebP tüm tarayıcılarda çalışır mı?

Günümüzde kullanılan tarayıcıların büyük çoğunluğu WebP'yi destekler. Çok eski bir tarayıcı ihtimaline karşı <picture> etiketiyle JPEG/PNG'ye otomatik geri dönüş (fallback) tanımlamak, hiçbir ziyaretçiyi dışarıda bırakmadan riski ortadan kaldırır.

Görselleri WebP'ye çevirince kalite kaybı olur mu?

Doğru kalite ayarıyla yapılan dönüşümde kalite kaybı genellikle gözle fark edilmeyecek düzeydedir. Asıl kazanç, aynı görsel kalitesini çok daha küçük bir dosya boyutunda elde etmenizdir. Kritik görsellerde dönüşüm sonrası görsel karşılaştırması yapmanızı öneririz.

Bir görsel kaç KB olmalı?

Kesin bir sayı vermek yanıltıcı olur çünkü ideal boyut, görselin ekrandaki fiziksel boyutuna ve içeriğine göre değişir. Genel bir yaklaşım olarak, sayfada tekrar eden küçük görselleri birkaç on KB'ta, büyük hero/banner görsellerini ise makul bir sıkıştırmayla mümkün olduğunca düşük tutmayı hedefleyin.

Lazy loading SEO'ya zarar verir mi?

Doğru uygulandığında hayır; aksine sayfa hızını artırarak SEO'ya katkı sağlar. Google'ın botu, modern lazy loading yöntemlerini (özellikle native loading="lazy" özniteliğini) tanır ve içeriği yine tarayıp indeksleyebilir. Sorun, yalnızca ilk ekrandaki kritik görsele lazy loading uygulandığında ortaya çıkar.

Görsel optimizasyonunu otomatikleştirmenin bir yolu var mı?

Evet. WordPress gibi CMS'lerde görselleri yüklenirken otomatik sıkıştıran ve WebP/AVIF'e çeviren eklentiler yaygındır. Daha büyük veya özel altyapılı sitelerde ise bir CDN üzerinden görsel optimizasyon servisi kullanmak, her görseli elle işlemekten çok daha ölçeklenebilir bir çözümdür.

Sonuç

Görsel optimizasyonu, teknik derinliği az ama etkisi büyük bir çalışmadır: doğru format, doğru sıkıştırma, doğru boyut ve doğru yükleme stratejisiyle sayfanızın ağırlığını gözle görülür biçimde azaltabilirsiniz. Bu tek başına yeterli değil elbette — sunucudan tarayıcıya kadar tüm zinciri iyileştirmek gerekir.

Sitenizdeki görsellerin ne kadarının bu kurallara uyduğunu tek tek kontrol etmek yerine, SeoPulse'un ücretsiz analizi ile sitenizi tarayıp hangi görsellerin sıkıştırma, format veya boyutlandırma açısından sorunlu olduğunu tek raporda görebilirsiniz.