Web için görsel optimizasyonu

Site hızınız düşükse ve PageSpeed Insights raporunda iyi bir LCP (Largest Contentful Paint) puanı alamıyorsanız, sorun büyük olasılıkla görsellerden kaynaklanıyordur. Görseller genellikle her web sayfasının en ağır bölümüdür ve bazen toplam sayfa boyutunun %60'ından fazlasını oluştururlar. Bu makalede, görsel optimizasyonu için doğru formatı seçmekten lazy loading uygulamaya kadar eksiksiz ve pratik bir süreç sunuyoruz. Bu rehber; web tasarımcıları, geliştiriciler ve WordPress veya ham kodlama ile çalışan site yöneticileri için faydalıdır.

Görsel Optimizasyonu LCP'yi Neden Doğrudan Etkiler?

LCP, Core Web Vitals'ın ana metriklerinden biridir ve sayfadaki en büyük görünür öğenin yüklenme süresini ölçer. Çoğu sayfada bu öğe bir hero görseli veya makalenin ana görselidir. Bu görsel 2 megabayt boyutundaysa, tarayıcının onu indirmesi, decode etmesi ve render etmesi gerekir; bu süreç birkaç saniye sürebilir ve LCP puanınızı ciddi şekilde düşürür.

Google tarafından yayınlanan istatistiklere göre, mobil ziyaretlerin %53'ü sayfa yüklemesi 3 saniyeden uzun sürerse terk edilir. Görsel optimizasyonu yalnızca kullanıcı deneyimini iyileştirmekle kalmaz, aynı zamanda Google sıralaması için de olumlu bir sinyaldir.

Görsel LCP'sini Belirleyen Üç Ana Faktör

• Dosya boyutu: Dosya ne kadar hafifse indirme o kadar hızlı olur.
• İndirme başlangıç zamanı: Görsel lazy loading ile yükleniyorsa ve viewport'ta değilse, indirme başlangıcı gecikir.
• Decode süresi: WebP gibi modern formatlar eski JPEG'den daha hızlı decode edilir.

Adım 1: Doğru Formatı Seçmek (WebP ve JPEG/PNG Karşılaştırması)

Google tarafından geliştirilen WebP formatı, benzer kalitedeki JPEG'den ortalama %25-35 daha az yer kaplar. Şeffaflık gerektiren görseller için WebP, PNG'ye göre çok daha iyi bir alternatiftir; şeffaf bir PNG görseli 1 megabayt olabilirken, aynı görsel WebP formatında 300 kilobayttan daha az yer kaplar.

Elbette WebP tek seçenek değil. Logo veya ikon gibi basit görseller için SVG formatı en iyi seçimdir çünkü ölçeklenebilir ve çok küçük boyutludur. Karmaşık fotoğraflar için AVIF de WebP'den bile daha iyi sıkıştırma sunan daha yeni bir seçenektir, ancak tarayıcı desteği henüz tam değildir.

Görselleri WebP'ye Nasıl Dönüştürürsünüz?

WordPress kullanıyorsanız, WebP Converter for Media veya Smush gibi eklentiler görselleri otomatik olarak dönüştürebilir. Ancak kodlama yapıyorsanız, en iyi komut satırı aracı libwebp kütüphanesiyle birlikte gelen cwebp'dir. Örnek:

# Ubuntu/Debian üzerine kurulum
sudo apt install webp

# Bir JPEG görseli kalite 80 ile WebP'ye dönüştürme
cwebp -q 80 input.jpg -o output.webp

# Bir klasörü toplu olarak dönüştürme
for img in *.jpg; do cwebp -q 80 "$img" -o "${img%.jpg}.webp"; done

Önemli not: Kalite 80 genellikle boyut ve görsel kalite arasındaki en iyi dengeyi sağlar. 90'ın üzerindeki kalite, görünür bir fark yaratmadan dosya boyutunu önemli ölçüde artırır.

Yaygın Hata: Fallback Olmadan WebP Kullanmak

Kullanıcının tarayıcısı WebP'yi desteklemiyorsa (bazı eski tarayıcılar gibi), görsel görüntülenmez. Standart çözüm <picture> etiketini kullanmaktır:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Görsel açıklaması" loading="lazy">
</picture>

Modern tarayıcılar WebP dosyasını seçer, eski tarayıcılar ise JPEG'e geri döner. Bu yöntem standarttır ve SEO ile tamamen uyumludur.

Adım 2: Görselleri Gerçek Boyutlara Küçültme

En büyük hatalardan biri, 4000 piksellik bir görseli 800 piksellik bir çerçevede görüntülemektir. Tarayıcı tüm büyük dosyayı indirmek ve ardından küçültmek zorunda kalır. Bu hem bant genişliğini boşa harcar hem de LCP'yi bozar.

Yüklemeden önce görseli sitede görüntüleneceği boyuta tam olarak küçültün. Emin değilseniz, Retina ekranlarda görüntülemek için 2x görseller kullanın; yani görsel CSS'de 400 piksel genişlikte görüntüleniyorsa, dosyayı 800 piksel genişlikte kaydedin.

Boyutlandırma Araçları

• ImageMagick: En güçlü komut satırı aracı. Örnek: convert input.jpg -resize 800x600 output.jpg
• Photoshop veya GIMP: Manuel boyutlandırma ve kalite kontrolü için.
• Çevrimiçi servisler: Google'ın Squoosh.app gibi hem boyutlandırma hem de format dönüştürme yapan servisler.

WordPress'te Smush veya ShortPixel gibi eklentiler, yükleme sırasında görsellerin boyutunu otomatik olarak düzeltir ve responsive için farklı sürümler üretir.

Yaygın Hata: width ve height Özelliklerini Unutmak

<img> etiketinde width ve height özelliklerini belirtmezseniz, tarayıcı önce sayfayı render eder ve ardından görseli indirirken layout'u kaydırır. CLS (Cumulative Layout Shift) adı verilen bu olgu, Core Web Vitals'ın bir diğer metriğidir ve puanınızı düşürür. Her zaman boyutları belirtin:

<img src="image.webp" width="800" height="600" alt="Açıklama">

Adım 3: Lazy Loading Uygulama

Lazy loading, kullanıcının görüş alanı dışındaki (below the fold) görsellerin, kullanıcı onlara kaydırana kadar yüklenmemesi anlamına gelir. Bu, tarayıcı kaynaklarının önemli görsellere (hero görseli gibi) odaklanmasını sağlar ve LCP'yi iyileştirir.

En basit yöntem, HTML5'e eklenen ve tüm modern tarayıcılar tarafından desteklenen yerel loading="lazy" özelliğini kullanmaktır:

<img src="image.webp" loading="lazy" width="800" height="600" alt="Açıklama">

Ancak kritik bir nokta: Asla hero görseline veya sayfanın başındaki görsele lazy loading uygulamayın. Bu görsel, LCP'nizin iyi olması için hemen yüklenmelidir. Hero görseli için loading="eager" ve fetchpriority="high" kullanın:

<img src="hero.webp" loading="eager" fetchpriority="high" width="1200" height="675" alt="Ana görsel">

Gelişmiş Yöntem: Intersection Observer

Daha fazla kontrol gerekiyorsa, Intersection Observer API kullanabilirsiniz. Bu yöntem, görsel viewport'a girmeden önce (örneğin 200 piksel erken) yüklemenizi sağlar ve kullanıcı deneyimini daha akıcı hale getirir:

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

images.forEach(img => observer.observe(img));

Bu yöntemde, tarayıcının görseli baştan indirmemesi için src yerine data-src kullanırsınız.

Yaygın Hata: Tüm Görsellere Lazy Loading Uygulamak

Bazı geliştiriciler basitlik için tüm görsellere lazy loading uygular. Bu yanlıştır; hero görseli hemen yüklenmelidir. Hero görseline lazy loading uygulanırsa, tarayıcı onu gecikmeli yükleyebilir ve LCP'niz ciddi şekilde kötüleşir. Sayfanın üst kısmındaki görselleri her zaman loading="eager" ile belirtin.

Adım 4: Fark Edilir Kalite Kaybı Olmadan Sıkıştırma

Görsel sıkıştırma iki türe ayrılır: lossy (kalite kaybıyla) ve lossless (kalite kaybı olmadan). Web fotoğrafları için, kalite 70-85 ile lossy sıkıştırma genellikle en iyi sonucu verir; orijinal durumla kalite farkı neredeyse algılanamazken dosya boyutu %50-70 azalır.

Popüler sıkıştırma araçları:

• ImageOptim (Mac): Ücretsiz ve çok etkili.
• RIOT (Windows): Canlı önizlemeli sıkıştırma.
• TinyPNG / TinyJPG: Otomasyon için API'li çevrimiçi servis.
• mozjpeg: Daha iyi sıkıştırma sunan bir JPEG fork'u.

gulp veya webpack ile Otomasyon

Projeniz bir build tool kullanıyorsa, sıkıştırmayı otomatik hale getirebilirsiniz. gulp ile örnek:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const webp = require('imagemin-webp');

gulp.task('images', () =>
  gulp.src('src/images/**/*')
    .pipe(imagemin([
      imagemin.mozjpeg({ quality: 80 }),
      imagemin.optipng({ optimizationLevel: 3 }),
      imagemin.webp({ quality: 80 })
    ]))
    .pipe(gulp.dest('dist/images'))
);

Bu sayede her görsel eklediğinizde otomatik olarak optimize edilir ve sıkıştırmayı unutma endişesi yaşamazsınız.

Görsel Optimizasyonunun LCP Üzerindeki Etkisini Ölçme

Değişiklikleri uyguladıktan sonra sonucu ölçmelisiniz. Şu araçları kullanın:

1. PageSpeed Insights: Ayrıntılı LCP raporu ve özel öneriler.
2. Chrome DevTools'taki Lighthouse: Hızlı ve yerel test için.
3. WebPageTest: Daha derin waterfall analizi ve hassas zamanlama için.

Gerçek bir örnek: Hero görselinizin daha önce 1.8 megabayt JPEG olduğunu ve LCP'nizin 4.2 saniye olduğunu varsayalım. Kalite 80 ile WebP'ye dönüştürüp 1200 piksele boyutlandırdıktan sonra boyut 240 kilobayta düşer. Bu değişiklikle LCP genellikle Core Web Vitals'ın yeşil aralığı olan 2.5 saniyenin altına iner.

Son Not: CDN ve Önbellek

Görsel optimizasyonu yalnızca dosyalarla sınırlı değildir. CDN (İçerik Dağıtım Ağı) kullanmak, görsellerin kullanıcıya en yakın sunucudan teslim edilmesini sağlar ve indirme süresini önemli ölçüde azaltır. Siteniz paylaşımlı hosting'deyse ve yüksek trafik alıyorsa, CDN'li bir bulut altyapısına geçmek LCP üzerinde çarpıcı bir etki yaratabilir. ServerNet, bulut ve hosting hizmetleri sağlayıcısı olarak, bu konuda yardımcı olabilecek dahili CDN'li altyapılar sunar.

Ayrıca tarayıcı önbelleğini unutmayın. Görsellerde Cache-Control başlığını ayarlayarak, kullanıcının tarayıcısı görselleri uzun süre saklar ve sonraki ziyaretlerde sunucuya hiçbir istek gönderilmez. Bu, tekrarlanan ziyaretlerde LCP'yi önemli ölçüde iyileştirir.

Özet

Görsel optimizasyonu, doğru yapıldığında LCP ve genel site hızı üzerinde doğrudan ve ölçülebilir bir etkiye sahip çok adımlı bir süreçtir. Yapılacak işlemlerin özeti:

• Görselleri WebP formatına dönüştürün ve fallback ekleyin.
• Görsel boyutlarını gerçek görüntüleme boyutuna küçültün.
• Lazy loading'i yalnızca sayfanın altındaki görseller için kullanın.
• Kalite 70-85 ile lossy sıkıştırma yapın.
• CLS oluşmaması için img etiketinde boyutları belirtin.
• Ölçüm araçlarıyla sonucu kontrol edin ve optimize edin.

Bu adımları uygulayarak yalnızca LCP'nizi iyileştirmekle kalmaz, aynı zamanda daha iyi bir kullanıcı deneyimi sunar ve arama sonuçlarında daha üst sıralarda yer alma şansınızı artırırsınız. Görsel optimizasyonu, siteniz için yapabileceğiniz en düşük maliyetli ve en etkili işlerden biridir.