Web için görsel optimizasyonu nasıl yapılır?

Telefonla çekilmiş bir fotoğraf 3–6 MB olabilir ve 4000 pikselden geniştir. Aynı fotoğraf bir web sayfasında 800 piksel genişliğinde gösterilecekse, ziyaretçi ihtiyacının birkaç katı veriyi boşuna indirir. Mobil veriyle gezinen kullanıcı için bu hem bekleme hem de kota demektir. Görsel optimizasyonu, görselleri doğru formatta, doğru ölçüde ve uygun sıkıştırmayla sunarak sayfaları hafifletme işidir ve çoğu sitede en hızlı sonuç veren hız iyileştirmesidir.

Formatlar: hangisi ne zaman?

Genel kural: fotoğraf için WebP veya AVIF, logo ve ikon için SVG, şeffaf ama karmaşık grafik için WebP veya PNG. Mevcut JPEG ve PNG dosyalarınızı WebP dönüştürücüyle tarayıcınızda, dosya yüklemeden dönüştürebilirsiniz.

Doğru boyut: piksel ölçüsü

En büyük tasarruf çoğu zaman sıkıştırmadan değil, görseli gösterileceği ölçüye küçültmekten gelir. Bir görselin piksel sayısı genişlik × yüksekliktir; genişliği yarıya indirmek piksel sayısını dörtte birine düşürür.

Retina/yüksek yoğunluklu ekranlar için gösterilen boyutun yaklaşık 2 katı yeterlidir; 3–4 katı gereksiz yük getirir. Toplu küçültme için resim boyutlandırma aracını kullanabilirsiniz.

Sıkıştırma ayarları

Kayıplı sıkıştırma, gözün fark etmeyeceği ayrıntıları atarak dosyayı küçültür. Önerilen başlangıç ayarları:

• JPEG: kalite 75–85
• WebP: kalite 75–82
• AVIF: kalite 50–65 (AVIF’in ölçeği farklıdır; düşük sayı daha düşük kalite anlamına gelse de görsel sonuç WebP 80 civarına benzer)

Kayıpsız sıkıştırma, PNG’deki gereksiz meta verileri ve verimsiz kodlamayı temizler; kalite hiç değişmez ama kazanç daha sınırlıdır.

Örnek: 1200 piksel genişliğinde bir blog görseli, 4000 px’lik 4,2 MB’lık orijinalden önce 1200 px’e küçültülüp ardından WebP kalite 80 ile kaydedildiğinde genellikle 100–200 KB aralığına iner. Bu, %95’in üzerinde bir tasarruftur. Resim sıkıştırma aracımız bu işlemi tarayıcıda yapar ve önce/sonra boyutunu gösterir.

Ayrıca kameraların eklediği EXIF meta verilerini (konum, cihaz bilgisi) temizlemek hem birkaç KB kazandırır hem de gizlilik sağlar; fotoğrafın çekildiği GPS konumu gibi bilgiler EXIF’te saklanabilir.

Responsive görseller: srcset ve picture

Aynı görselin masaüstüne 1600 px, telefona 600 px olarak gitmesi için srcset kullanılır:

<img
  src="/img/ofis-800.webp"
  srcset="/img/ofis-480.webp 480w, /img/ofis-800.webp 800w, /img/ofis-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  width="800" height="533"
  alt="Ofisimizin toplantı odası">

Tarayıcı, ekran genişliğine ve piksel yoğunluğuna bakarak en uygun dosyayı seçer. Birden fazla formatı yedekli sunmak için <picture> etiketi kullanılır:

<picture>
  <source srcset="/img/kapak.avif" type="image/avif">
  <source srcset="/img/kapak.webp" type="image/webp">
  <img src="/img/kapak.jpg" width="1600" height="900" alt="Yaz koleksiyonu" fetchpriority="high">
</picture>

Lazy loading ve yerleşim kayması

• Ekranın altında kalan görsellere loading="lazy" ekleyin; tarayıcı bunları kullanıcı yaklaştıkça yükler.
• İlk ekrandaki ana görsele lazy loading eklemeyin; aksine fetchpriority="high" verin.
• Her görselde width ve height niteliklerini yazın. Tarayıcı oranı önceden bilir, yer ayırır ve sayfa yüklenirken içerik kaymaz (CLS).

Bu iki ayrıntı Core Web Vitals değerlerinizi doğrudan etkiler; ayrıntılar için Core Web Vitals rehberimize bakın.

Alt metin ve dosya adı

Optimizasyon yalnızca boyut değildir. Arama motorları ve ekran okuyucu kullanan ziyaretçiler görseli alt metinden anlar:

• alt="IMG_4521" yerine alt="Kadıköy şubemizin dış cephesi" yazın.
• Dosya adını anlamlı yapın: kadikoy-sube-dis-cephe.webp.
• Dekoratif görsellerde boş alt (alt="") kullanın.

Altyapıya göre pratik ipuçları

• WordPress: WordPress, yüklenen her görselin birkaç farklı boyutunu otomatik üretir ve srcset ekler; içerik görsellerine varsayılan olarak loading="lazy" uygular. Yine de yüklemeden önce görseli makul bir ölçüye (ör. 2000 px) küçültün. Görsel optimizasyon eklentileri mevcut medya kütüphanesini toplu olarak WebP’ye dönüştürebilir.
• Shopify, İkas ve benzeri e-ticaret altyapıları: Görseller çoğunlukla bir CDN üzerinden, tarayıcıya uygun formatta ve boyutta otomatik sunulur. Burada asıl iş, yüksek kaliteli ama aşırı büyük olmayan kaynak görsel yüklemek ve ürün görsellerinde tutarlı en-boy oranı kullanmaktır.
• Statik siteler (Astro, Next.js vb.): Çatıların görsel bileşenleri derleme sırasında WebP/AVIF ve farklı boyutlar üretir; ana görselde öncelikli yükleme ayarını kontrol edin.
• Sosyal medya için ayrı görsel: Paylaşım görselleri (1200×630) için ayrı ve hafif bir dosya hazırlayın; sayfadaki büyük kapak görselini doğrudan kullanmayın.

Sık yapılan hatalar

• Telefondan çekilen fotoğrafı doğrudan yüklemek.
• Fotoğrafları PNG olarak kaydetmek.
• Logoyu büyük bir JPEG olarak kullanmak (SVG varken).
• Tüm görsellere lazy loading eklemek.
• width/height yazmamak.
• Aynı görseli CSS ile küçültüp büyük dosyayı göndermek.
• Animasyonlu GIF ile birkaç MB’lık “video” göstermek.

Mevcut sitede nereden başlamalı?

Yüzlerce görseli olan bir sitede hepsini tek seferde elden geçirmek gerekmez. Önce en çok ziyaret edilen sayfaları açın ve tarayıcının geliştirici araçlarındaki Ağ (Network) sekmesinde görselleri boyuta göre sıralayın. 300 KB’ı aşan her görsel, ilk müdahale adayıdır. Genellikle ana sayfa kapak görseli, slider kareleri ve ekip/ofis fotoğrafları listenin başında çıkar.

Kontrol listesi

• Fotoğraflar WebP veya AVIF, logolar SVG
• Görseller gösterileceği ölçünün en fazla 2 katı genişlikte
• Kalite ayarı 75–85 aralığında, dosya boyutları kontrol edildi
• Responsive görsellerde srcset ve sizes tanımlı
• Ana görselde fetchpriority="high", diğerlerinde loading="lazy"
• Tüm görsellerde width, height ve anlamlı alt var
• EXIF verileri temizlendi

Görseller hallettikten sonra kalan hız sorunları için web sitesi hızlandırma rehberimize göz atın.