Site İçin Görsel Optimizasyonu ve PageSpeed'i İyileştirme

Yükleme hızı, Google'ın masaüstü için 2018'den, mobil için 2021'den beri doğruladığı bir sıralama faktörü. Dahası, dönüşüm oranını doğrudan etkiliyor: Google'ın kendi verilerine göre her ek saniye, sayfayı terk etme oranını %32'ye kadar artırıyor. E-ticarette ise Portent'in çalışmaları, 1 saniyede açılan sayfaların 5 saniyede açılanlara göre 3 kata kadar daha fazla dönüşüm sağladığını gösteriyor.

Görseller genellikle bir web sayfasının toplam ağırlığının %50–80'ini oluşturur. Dolayısıyla onları doğru optimize etmek, herhangi bir sitenin performansında en büyük farkı yaratan müdahaledir.

PageSpeed Insights görsellerde neye bakıyor

Google PageSpeed Insights (PSI) sayfanızı inceler ve görsellerle ilgili sorunları birkaç başlık altında işaretler. En sık çıkanlar şunlar:

• "Yeni nesil biçimlerde görsel yayınlayın": site, WebP (ya da AVIF) boyutu belirgin şekilde küçültecekken JPG veya PNG kullandığında çıkar.
• "Görselleri doğru boyutlandırın": sunucuya yüklenen görsel, gösterildiği alandan büyük olduğunda çıkar. Örnek: 400 pikselde göstermek için 2000 piksellik bir fotoğraf yüklemek.
• "Ekran dışındaki görselleri erteleyin": ekranın altında kalan görseller, kullanıcı oraya kaydırdığında değil de sayfanın geri kalanıyla birlikte yüklendiğinde çıkar (lazy loading).
• "Görselleri verimli şekilde kodlayın": görsellere uygulanan sıkıştırmada, görünür kalite kaybı olmadan henüz küçültme payı kaldığında çıkar.
• "LCP görseli": sayfanın Largest Contentful Paint öğesinin hangi görsel olduğunu belirtir — Core Web Vitals metriklerinden birini belirleyen ana öğe.

Web için görsel optimizasyonunun 6 ilkesi

1. Her görsel türü için doğru formatı seçin

Format seçimi, herhangi bir sıkıştırmadan bile önce en büyük farkı yaratan karardır:

WebP, aynı görsel kalitede JPG'den %25–35, PNG'den %20–30 daha küçük dosyalar üretir. 2026'da kullanımdaki tarayıcıların %97'sinden fazlası destekliyor — yeni sitelerde ondan kaçınmak için teknik bir gerekçe kalmadı.

2. Görünür kaliteden ödün vermeden sıkıştırın

Sıkıştırma, görselin ölçülerini korurken dosya boyutunu küçültme işlemidir. JPG fotoğraflarda kaliteyi %100'den %80'e çekmek, ekranda fark edilmeyen bir değişimle 5–10 kat küçük dosyalar verir. Web için ideal aralık budur.

Görsel türüne göre pratik ağırlık referansları:

• Hero / ana banner: 200 KB altı
• Ürün fotoğrafı (e-ticaret): 50–150 KB
• Blog yazısı görseli: 50–120 KB
• Küçük önizleme görseli: 10–30 KB
• Logo (PNG/WebP): 30 KB altı
• SVG ikonlar: 5 KB altı

3. Görselleri gerçek gösterim ölçülerinde yükleyin

En sık yapılan ve en çok zarar veren hatalardan biri bu: görselleri, gösterildikleri alandan çok daha büyük yüklemek. Tarayıcı görselin tamamını indirir, sonra ekrana çizerken fazla pikselleri atar.

Bu hatanın bedeline iki örnek:

• 600×600 piksellik bir çerçevede gösterilen 3000×3000 piksellik bir ürün fotoğrafı: tarayıcı 9 milyon piksel indirir, yalnızca 360 binini kullanır — %96 israf.
• Yerleşimi en fazla 1440 piksel olan bir sitede 4000 piksel genişliğinde bir banner: indirilen piksellerin %63'ü anında çöpe gider.

Kural basit: sunucuya yüklenen görsel, gösterim ölçüsünün en fazla iki katı olmalı (iki kat, Retina/HiDPI ekranları karşılamak için). 600 piksel genişliğinde bir alan için en fazla 1200 piksel yükleyin.

Yüklemeden önce ölçüleri piksel ya da yüzde olarak tam değerlerle ayarlamak için ImageTools'un Boyutlandır aracını kullanın.

4. Lazy loading uygulayın

Lazy loading, görselleri sayfa açılır açılmaz topluca indirmek yerine yalnızca ekrana girmek üzereyken yükleme tekniğidir. Etkisi ciddi: çok görselli sayfalarda (ürün listeleri ya da uzun yazılar gibi) sayfanın ilk açılış ağırlığını %60–80 azaltabilir.

En basit uygulama, modern HTML'in kendisinde hazır — görsel etiketlerine yalnızca loading="lazy" özniteliğini eklemeniz yeterli:

<!-- Hemen yüklenmesi gereken görsel (ekranın üst kısmı) -->
<img src="ana-banner.webp" alt="Banner" loading="eager">

<!-- Bekleyebilecek görseller (ekranın alt kısmı) -->
<img src="urun-1.webp" alt="Ürün 1" loading="lazy">
<img src="urun-2.webp" alt="Ürün 2" loading="lazy">

Önemli: ekranın üst kısmındaki ana görsele (hero, banner, ürünün ilk fotoğrafı) asla loading="lazy" uygulamayın. Bu, Core Web Vitals'ın en önemli metriği olan LCP'yi geciktirir ve PageSpeed puanınıza doğrudan zarar verir.

5. Görsel etiketlerinde width ve height tanımlayın

Tarayıcı bir sayfayı yüklemeye başladığında yerleşimi, görsellerin boyutunu öğrenmeden önce kurar. width ve height tanımlı değilse tarayıcı doğru alanı ayırmaz — ve görsel yüklendiğinde yerleşim "zıplar", metni ve düğmeleri yerinden oynatır. PageSpeed'in ölçtüğü şey budur: Cumulative Layout Shift (CLS) — bir başka Core Web Vital.

<!-- Ölçü yok: layout shift oluşur -->
<img src="urun.webp" alt="Ürün">

<!-- Ölçü var: doğru alan baştan ayrılır -->
<img src="urun.webp" alt="Ürün" width="600" height="600">

HTML'deki width ve height değerlerinin görünen boyutla aynı olması gerekmez — bunlar yalnızca oranı belirler. Görünen boyutu CSS ayarlar.

6. srcset ile duyarlı görseller kullanın

HTML'deki srcset etiketi, aynı görselin farklı sürümlerini farklı cihazlara sunmanızı sağlar — telefonlara küçük, masaüstlerine büyük görsel gider. Tarayıcı, kullanıcının ekranına en uygun sürümü otomatik seçer.

<img
  src="urun-800.webp"
  srcset="urun-400.webp 400w,
          urun-800.webp 800w,
          urun-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Ürün"
  width="800"
  height="800"
  loading="lazy"
>

Çok sayıda ürün fotoğrafı olan e-ticaret sitelerinde srcset etiketi, mobil kullanıcılara aktarılan veri hacmini %40–60 azaltabilir.

Eksiksiz görsel optimizasyonu kontrol listesi

Herhangi bir sayfayı yayınlamadan ya da mevcut görselleri güncellemeden önce bu listeyi kullanın:

• ☐ Görseller WebP'de (vektörel olanlar SVG'de)
• ☐ Sıkıştırma uygulanmış — fotoğraflar mümkün olduğunca 150 KB altında
• ☐ Ölçüler doğru — gösterim alanının iki katından büyük değil
• ☐ loading="lazy" ekranın altında kalan tüm görsellerde
• ☐ loading="eager" (ya da özniteliksiz) ekranın üst kısmındaki ana görselde
• ☐ Tüm <img> etiketlerinde width ve height tanımlı
• ☐ Tüm görsellerde açıklayıcı alt özniteliği (erişilebilirlik + SEO)
• ☐ srcset mobil ile masaüstünde çok farklı boyutlarda görünen görseller için
• ☐ LCP görselinde loading="lazy" yok; fetchpriority="high" mümkünse eklenmiş

Platforma göre optimizasyon

WordPress

WordPress, 6.1 sürümünden itibaren sunucu destekliyorsa görselleri otomatik olarak WebP'ye çeviriyor. Garantiye almak için bir optimizasyon eklentisi kurun: Imagify, ShortPixel ya da Smush — bunlar medya kütüphanesindeki mevcut görselleri sıkıştırır, WebP'ye çevirir ve otomatik olarak lazy loading ekler.

Shopify

Shopify 2021'den beri görselleri otomatik olarak WebP'ye çeviriyor ve her cihaza doğru sürümü sunuyor. Satıcının elle kontrol etmesi gereken tek şey yüklediği görsellerin ölçüsü — ürün fotoğrafları için önerilen 2048×2048 piksel; Shopify bunu her gösterim bağlamına göre yeniden boyutlandırıyor.

Wix, Squarespace ve diğer site kurucuları

Güncel site kurucularının çoğu sıkıştırmayı ve lazy loading'i zaten otomatik uyguluyor. Kullanıcıya kalan tek şey makul ölçülerde görsel yüklemek — 8 MB'lık fotograf makinesi kareleri sunucuyu yorar ve gereksiz büyük varyantlar üretilmesine yol açabilir.

Saf HTML/CSS siteler ya da framework'ler (Next.js, Nuxt vb.)

Bu durumlarda optimizasyonun tamamı geliştiricinin sorumluluğunda. Örneğin Next.js'in <Image> bileşeni lazy loading'i, srcset'i ve WebP dönüşümünü otomatik yapıyor. Bu soyutlamayı sunmayan framework'lerde yukarıdaki listeye göre elle optimizasyon gerekiyor.

Optimizasyonun etkisi nasıl ölçülür

Optimizasyonları uyguladıktan sonra sonucu şu araçlarla ölçün:

• Google PageSpeed Insights (pagespeed.web.dev) — mobil ve masaüstü için ayrı ayrı, öğe bazında teşhis sunan eksiksiz bir analiz.
• Google Search Console → Sayfa Deneyimi raporu — sitenizin gerçek kullanıcılarından gelen verilerle Core Web Vitals durumunu gösterir.
• WebPageTest.org — yükleme waterfall'ını gösteren ayrıntılı teknik analiz; LCP'yi hangi görselin geciktirdiğini bulmak için ideal.
• Chrome DevTools → Network — yüklenen tüm görselleri, boyutlarını ve indirme sürelerini görmek için "Img" filtresini kullanın.

Sıkça sorulan sorular