E-Ticaret Sitelerinde Resim Optimizasyonu

E-ticaret sitelerinde görsel optimizasyonu, hem satın alma kararını hem de sayfa hızını doğrudan belirleyen teknik bir çalışmadır. Ürün sayfasında en büyük içerik öğesi neredeyse her zaman ürün görselidir; yani Core Web Vitals metriklerinden LCP (Largest Contentful Paint) puanınızı belirleyen şey de o görseldir. Bu yazıda modern formatlar, duyarlı servis, tembel yükleme ve arama görünürlüğü başlıklarını uygulanabilir bir sıraya koyuyoruz.

Görsel optimizasyonu neden LCP ile başlar?

Ürün sayfasında kullanıcının gördüğü ilk ve en büyük öğe ana ürün fotoğrafıdır. Bu görsel geç yüklendiğinde sayfa teknik olarak açılmış olsa bile kullanıcı için hâlâ boştur. Optimizasyonun ilk hedefi bu yüzden dosya boyutunu küçültmek değil, ilk ekranda görünen görselin mümkün olan en kısa sürede boyanmasını sağlamaktır.

Pratikte üç kural bunu sağlar: ilk ekrandaki ana görsele tembel yükleme uygulamayın, boyutlarını (width ve height) HTML'de belirtin, dosyayı modern formatta ve gerçek görüntüleme boyutunda sunun. İlk ekran dışındaki tüm görseller ise tembel yüklenmelidir.

Hangi görsel formatı kullanmalısınız?

Bugün varsayılan tercih AVIF ve WebP'dir; JPEG ve PNG yalnızca geriye dönük uyumluluk için tutulur. Aşağıdaki tablo formatların kullanım alanlarını özetliyor:

Format	Ne zaman kullanılır	Not
AVIF	Ürün fotoğrafları, kategori görselleri	Aynı kalitede en küçük dosya boyutu, kodlama süresi daha uzun
WebP	Genel amaçlı varsayılan	Şeffaflık ve animasyon destekler, yaygın tarayıcı desteği
JPEG	Yedek (fallback) format	Yalnızca eski istemciler için
PNG	Şeffaflık gereken logo ve ikonlar	Fotoğraf için kullanılmaz, dosya boyutu şişer
SVG	Logo, ikon, çizim	Vektörel, ölçeklenebilir, çok küçük
GIF	Kullanılmamalı	Animasyon için video formatları tercih edilir

Format seçimini <picture> etiketiyle tarayıcıya bırakmak en güvenli yöntemdir: AVIF kaynağını önce, WebP'yi ikinci, JPEG'i son çare olarak tanımlarsınız. Formatların temel farkları ve sıkıştırma mantığı için görsel optimizasyonu sözlük girişine bakabilirsiniz.

Duyarlı servis nasıl kurulur?

Tek bir büyük dosyayı her cihaza göndermek, mobil kullanıcıya gereğinden büyük veri indirtir. Doğru yöntem srcset ve sizes nitelikleriyle aynı görselin birkaç genişlik varyantını tanımlamak ve seçimi tarayıcıya bırakmaktır.

Uygulama önerileri:

Ürün görselleri için tipik varyant seti: 400, 800, 1200 ve 1600 piksel genişlik.
sizes değerini gerçek düzen genişliğine göre yazın; yanlış sizes, srcset'in faydasını sıfırlar.
Kategori sayfasındaki küçük görseller (thumbnail) için ayrı ve gerçekten küçük varyantlar üretin; büyük dosyayı CSS ile küçültmek boyut kazancı sağlamaz.
Görselleri bir görsel CDN'i üzerinden sunun; format ve boyut dönüşümünü istek anında yapan bir katman, elle varyant üretme yükünü ortadan kaldırır.

Sabit bir dosya boyutu hedefi (eskiden sık verilen "her görsel 70 KB olsun" tavsiyesi gibi) bugün anlamlı değildir. Doğru ölçüt, ilk ekranın toplam ağırlığı ve LCP süresidir.

Görseller neden Google Görseller'de çıkmıyor?

Görsel aramada görünmemenin en yaygın nedenleri dosya adı, alternatif metin ve sayfa bağlamının eksikliğidir. Sırasıyla:

Dosya adı: Türkçe karakter ve boşluk içermeyen, ürünü tarif eden ad kullanın. Kameradan çıktığı haliyle bırakılan adlar hiçbir bağlam vermez.
Alternatif metin: Görselin içeriğini kısa ve doğal biçimde tarif edin. Anahtar kelime yığmayın; "satın al", "en ucuz" gibi ticari kalıpları alternatif metne koymayın. Ayrıntı için alt text nedir girişine bakın.
Sayfa bağlamı: Görselin çevresindeki başlık ve metin, arama motorunun görseli anlamasında belirleyicidir.
Yapılandırılmış veri: Ürün şemasında görsel alanının doldurulması, zengin sonuçlarda görünme şansını artırır.
Görsel site haritası: Çok sayıda ürün görseli olan sitelerde taranabilirliği hızlandırır.

Sık yapılan hatalar nelerdir?

İlk ekrandaki ana görsele tembel yükleme uygulamak; bu, LCP süresini doğrudan uzatır.
width ve height vermemek; görsel yüklendiğinde düzen kayar ve CLS puanı bozulur.
Aynı ürün için tek dev dosyayı hem detay hem liste sayfasında kullanmak.
Sıkıştırmayı abartıp ürün detayını kaybetmek; e-ticarette görsel kalitesi doğrudan iade oranıyla ilişkilidir.
Görselleri kaynak site dışından (hotlink) çekmek ve kontrolü kaybetmek.

Görsel optimizasyonunun sonucu nasıl ölçülür?

Ölçüm alan verisiyle yapılır. Search Console'daki Core Web Vitals raporu ve CrUX verisi, gerçek kullanıcıların LCP süresini gösterir; laboratuvar testleri yalnızca yön verir. Optimizasyon öncesi ve sonrası şu üç değeri karşılaştırın: mobil LCP süresi, ürün sayfasının toplam transfer boyutu ve görsel aramadan gelen oturum sayısı.

Ticari tarafta ise asıl gösterge dönüşüm oranıdır. Sayfa hızı iyileşmesinin gelire etkisini izole etmek için GA4 kurulumunuzun sayfa hızı segmentlerini ayrı raporlayacak şekilde yapılandırılmış olması gerekir.

Webtures yaklaşımı

Webtures olarak e-ticaret projelerinde görsel optimizasyonunu ayrı bir iş kalemi değil, teknik SEO ve dönüşüm optimizasyonunun kesiştiği bir katman olarak ele alıyoruz. Format dönüşümünü CDN katmanında otomatikleştiriyor, ilk ekran yükleme sırasını ürün şablonu düzeyinde sabitliyor ve kazancı LCP ile dönüşüm oranı üzerinden birlikte raporluyoruz. E-ticaret performansınızı bu çerçevede ele almak için e-ticaret yaklaşımımızı inceleyebilirsiniz.