1) E-ticarette görsel optimizasyonu neden “satış” demek?
E-ticarette kullanıcı “ürüne dokunamaz”. Ürünü ikna eden şey: görsel kalite + hızlı yükleme + güven hissi. Ağır görseller sayfayı yavaşlatır; yavaş sayfa hem kullanıcıyı kaçırır hem SEO’yu zorlar.
- Ürün listeleme sayfaları (kategori) çok görselli olur → hız kritik
- Ürün detay sayfasında zoom/galeri olur → kalite kritik
- Mobil kullanıcı oranı yüksek → boyut daha kritik
2) Boyutlandırma (resize): en büyük kazanım burada
En büyük hata: 4000px fotoğrafı 600px alanda göstermek. Tarayıcı zaten küçültür ama dosyayı yine indirir.
A) Pratik hedef boyutlar
- Ürün kartı (liste): 600–900px genişlik çoğu zaman yeter
- Ürün detay: 1200–1600px (zoom varsa 2000px’e kadar)
- Thumbnail: 150–300px
3) Format seçimi: JPG mi WebP mi AVIF mi?
E-ticarette en yaygın senaryo: ürün fotoğrafı = fotoğraf ağırlıklı içerik. Bu durumda hedef: en küçük boyutta kabul edilebilir kalite.
| İçerik | Önerilen format | Neden? |
|---|---|---|
| Ürün fotoğrafı | WebP / AVIF | Daha iyi sıkıştırma, daha hızlı yükleme |
| Logo / ikon | SVG / PNG | Keskin kenarlar, şeffaflık |
| Metin ağırlıklı banner | PNG / WebP (lossless) | Yazı netliği korunur |
4) Hız için teknik ipuçları (çok kritik)
A) Lazy-load
Kategori sayfasında onlarca ürün görseli olur. Ekranın altında kalan görselleri lazy-load ile geciktir.
B) “Picture” ile modern format + fallback
En sağlıklı yöntem: WebP/AVIF sun, desteklemeyen tarayıcıya JPG döndür.
<picture> <source type="image/avif" srcset="p.avif"> <source type="image/webp" srcset="p.webp"> <img src="p.jpg" alt="..."> </picture>
C) CDN ve cache
- Görselleri CDN ile sunmak (özellikle e-ticaret) ciddi hız kazandırır
- Cache header’ları doğru olmalı (tarayıcı tekrar indirmesin)
5) SEO için görsel optimizasyonu
- Dosya adı: ürün-adi-model-renk.webp gibi açıklayıcı olsun
- Alt metni gerçek açıklama olsun (spam değil)
- Boyut: gereksiz büyük yükleme yapma
- Core Web Vitals: LCP görseli (hero/ürün) çok büyük olmamalı
6) Hızlı kontrol listesi (copy/paste)
- ✅ Görseli “kullanım boyutuna” göre resize ettim
- ✅ Fotoğrafları WebP/AVIF’e dönüştürdüm (fallback var)
- ✅ Dosya boyutunu sıkıştırdım (gereksiz MB yok)
- ✅ Lazy-load açık (kategori/galeri)
- ✅ Dosya adı ve alt metin açıklayıcı
- ✅ Thumbnail/medium/large varyantları var
7) FAQ
Ürün görselleri kaç KB olmalı?
Tek rakam yok ama hedef: “görüntü bozulmadan en düşük”. Genelde ürün kartları için 80–200KB, detay görsel için 150–400KB iyi bir başlangıç aralığıdır (görsele göre değişir).
WebP mi AVIF mi?
AVIF çoğu fotoğrafta daha küçük boyut verebilir, WebP ise daha yaygın/kolaydır. En güvenlisi: AVIF + WebP + JPG fallback.
PNG ürün fotoğrafında kullanılmalı mı?
Genelde hayır (büyük boyut). Sadece şeffaf arka plan veya metin/ikon netliği gerekiyorsa mantıklı.
Sonuç
E-ticarette görsel optimizasyonu sadece “hız” değildir; aynı zamanda kullanıcı güveni, dönüşüm ve SEO’dur. Doğru boyut, doğru format ve doğru sıkıştırma ile hem hızlı hem kaliteli bir mağaza kurarsın.