Görsel Optimizasyonu Nedir? Nasıl Yapılır?

Görsel optimizasyonu, sayfa içindeki görsellerin kalite–boyut–erişilebilirlik dengesini kurarak daha hızlı yüklenmesini, arama sonuçlarında daha görünür olmasını ve kullanıcı deneyiminin güçlenmesini sağlayan teknik ve içerik odaklı işlemlerin bütünüdür. Doğru optimize edilen görseller; sayfa hızını artırır, Core Web Vitals (özellikle LCP) metriklerini iyileştirir, görsel aramalardan ek trafik kazandırır ve dönüşüm oranlarına pozitif yansır.

Görsel Optimizasyonu Neden Önemli?

Optimize edilmemiş, büyük görseller sayfa açılışını yavaşlatır; bu da hemen çıkma oranını artırır ve sıralama potansiyelini düşürür. Tersine, iyi optimize edilmiş görseller:

• Hızı artırır: Daha küçük boyutlar ve modern formatlar ile LCP düşer.
• Tarama verimliliği sağlar: CDN ve doğru önbellekleme, botların içeriğe daha hızlı erişmesine yardım eder.
• Erişilebilirliği güçlendirir: Anlamlı alt metinler ekran okuyucular için kritik değerdedir.
• Görsel aramalarda görünürlük sağlar: Dosya adı + alt text + konu uyumu, görsel sonuçlarda tıklanma yaratır.

Görsel Optimizasyonu Nasıl Yapılır?

Aşağıdaki üç başlık teknik SEO’da doğrudan etkilidir: dosya boyutu, dosya adı, alternatif metin. Ardından format seçimi, boyutlandırma, telif ve CDN konularını ele alıyoruz.

1) Dosya Boyutu (hedef: ~150 KB)

Genel pratikte 150 KB güncel ve makul bir üst sınırdır. Kahraman (hero) görselleri gibi kritik görsellerde 150–250 KB aralığı kabul edilebilir; ancak gereksiz kalite kaybına yol açacak aşırı optimizasyondan kaçının. Amaç net ve temiz görseli minimum boyut ile sunmaktır.

Kısa öneriler:

• Format: JPG/WebP/AVIF tercih edin; PNG’yi yalnızca saydamlık veya çizim gerekiyorsa kullanın.
• Sıkıştırma: Kalite değeri (JPG’de ~70–80, WebP’de ~70–80) çoğu senaryoda yeterlidir.
• CDN kullanın: Coğrafi yakınlık + görüntü işleme (format dönüştürme, otomatik kalite) büyük fark yaratır.
• Lazy-load: İlk ekranda görünmeyen görselleri loading="lazy" ile erteleyin.
• Aşırı küçültmeyin: “Piksel kırılması”, posterize ve bulanıklık kullanıcı algısını bozar.

2) Dosya Adı (SEO ve keşif için kritik)

Dosya adları anlamlı, anahtar kelime içeren ve tire ile ayrılmış olmalı. Türkçe karakterleri dönüştürün; boşluk, uzun ID ve anlamsız zincirlerden kaçının.

Yanlış: IMG_9327.JPG, final-son-2-345.jpg

Doğru: gorsel-optimizasyonu-ornek-urun-fotografi.webp

İpucu:

• Kısa ve açıklayıcı yazın (maksimum 5–7 kelime).
• Konu + tür/özellik: kirmizi-spor-ayakkabi-yan-gorunus.webp
• Anahtar kelimeyi doğal yerleştirin; anahtar kelime doldurma yapmayın.

3) Alternatif Metin (Alt Text)

Alt metin, görselin kısa tanımıdır; erişilebilirlik ve SEO için zorunlu iyi pratiktir. Anahtar kelimeyi, yalnızca doğal biçimde, görseli gerçekten betimliyorsa kullanın.

• Yanlış: “görsel optimizasyonu görsel optimizasyonu görsel optimizasyonu”
• Doğru: “ürün detay sayfasında kırmızı spor ayakkabı – yan profil”

Örnek HTML:

<img src="/img/gorsel-optimizasyonu-ornek.webp" alt="ürün detay sayfasında kırmızı spor ayakkabı – yan profil" width="800" height="600" loading="lazy" decoding="async">

Görsel Formatları: Hangi Durumda Hangisi Tercih Edilmelidir?

Pratik kural: Fotoğraflar için WebP/AVIF, illüstrasyon/ikon için SVG, saydam gereken görsellerde PNG.

Boyutlandırma ve Responsive Görseller

Görselin piksel boyutu, sayfada sergileneceği alanı aşmamalı. Retina (2x) ekranlar için çok büyük orantılar dosya büyütür. Doğru yaklaşım: srcset + sizes kullanmak.

Örnek:

<img src="/img/urun-800.webp" srcset="/img/urun-400.webp 400w,

/img/urun-800.webp 800w, /img/urun-1200.webp 1200w"

sizes="(max-width: 768px) 90vw, 600px" alt="kırmızı spor ayakkabı ürün fotoğrafı" width="600" height="450" loading="lazy" decoding="async">

• width/height CLS’yi azaltır.
• decoding="async" ve loading="lazy" performansı iyileştirir.
• Kahraman görsel (LCP adayı) için loading="eager" + fetchpriority="high" kullanılabilir ve preload yapılabilir.

CDN, Önbellek ve Sunucu Tarafı İyileştirmeler

CDN Dönüşümü: “Auto format/quality” ile ziyaretçinin tarayıcısına göre WebP/AVIF sunun.

Cache-Control: Uygun süreler tanımlayın (örn. max-age=31536000, immutable sürümlenen görseller için).

HTTP/2/3 ve Brotli: Teslimi hızlandırır.

Resim işleme uç noktası: Tek kaynaktan çok varyant üretip srcset’e bağlamak bakım maliyetini düşürür.

Aşırı Optimizasyondan Kaçının

Sıkıştırmayı abartmak, gradyanlarda bantlaşma ve detay kaybı yaratır. Görevimiz en küçük dosya değil, en iyi algılanan kaliteyi en küçük dosyayla sunmaktır. Gerekirse 150 KB sınırını az aşıp görüntü kalitesini koruyun.

Görsel–İçerik Uyumu ve Telif

Görseller metni desteklemeli; alakasız stok fotoğraflar güvensizlik yaratır.

Telif ve lisans kontrolü yapın (ör. CC0, telifsiz stok).

Yalnızca boyutu değil, öykü ve bağlamı da düşünün: açıklayıcı başlık, çevresel metin ve altyazı (caption) yardımcı sinyallerdir.

Görsel Optimizasyonu Kontrol Listesi

Dosya boyutu ≈150 KB hedef (kritik görsellerde 150–250 KB).

Uygun format: WebP/AVIF (fotoğraf), SVG (ikon/logo), PNG (saydamlık).

Doğru dosya adı: anlamlı, tireli, doğal anahtar kelime.

Alt metin: kısa, betimleyici, anahtar kelime sadece doğal ise.

srcset + sizes ile yanıtlı görseller.

width/height, loading, decoding parametreleri.

CDN ve uzun cache ömrü.

Lazy-load; hero görsel için preload/fetchpriority.

Telif/lisans uygunluğu; görsel–içerik uyumu.