WooCommerce Görsel Optimizasyon Rehberi

1. Anasayfa Görsel Boyutları (PC ve Mobil)

WooCommerce mağazanızın anasayfası için profesyonel görseller hazırlarken dikkat etmeniz gereken ideal boyutlar:

Bileşen	Masaüstü Boyutu	Mobil Boyutu	Format	Önemli Notlar
Hero Banner (Slayt)	1920×800 px	800×1000 px	JPG/PNG/WebP	Yatay ve dikey versiyon hazırlayın
Ürün Kategorileri	600×600 px	300×300 px	PNG/WebP	Şeffaf arka plan önerilir
Öne Çıkan Ürünler	800×800 px	400×400 px	JPG/WebP	1:1 oran zorunlu
Kampanya Afişleri	1200×400 px	600×600 px	JPG/WebP	Metin alanı için boşluk bırakın
Marka Logoları	300×150 px	200×100 px	PNG/SVG	Şeffaf arka planlı
Blog Öne Çıkan	800×500 px	400×250 px	JPG/WebP	16:9 oran korunmalı
Video Kapak	1920×1080 px	1080×1920 px	MP4/JPG	Dikey ve yatay versiyon gerekli

Teknik Detaylar

Çözünürlük: Tüm görseller 72-150 DPI aralığında olmalıdır.
Optimizasyon: Görsel boyutları 500KB’ı geçmemeli (Hero banner max 1MB).
Mobil Uyum: Dikey (portrait) görseller mobilde daha iyi sonuç verir.

CSS Kodu Örneği (Responsive Görseller)

.hero-banner {
    background-image: url('banner-desktop.jpg');
    background-size: cover;
}
@media (max-width: 768px) {
    .hero-banner {
        background-image: url('banner-mobile.jpg');
    }
}

Bu kod, cihaz genişliğine göre farklı görseller yüklenmesini sağlar.

2. WebP Kalite Ayarları ve Etkileri

WebP formatında kalite ayarlarının görsel performansına etkileri:

Kalite Seviyesi	Avantajlar	Dezavantajlar
%70-80	Mükemmel sıkıştırma Hızlı yükleme Düşük veri kullanımı	Hafif detay kaybı Metinlerde bozulma
%80-85 (Önerilen)	İyi denge Kabul edilebilir detay Optimum yükleme hızı	%70’e göre daha büyük dosya
%90-100	Maksimum detay Keskin görüntü Profesyonel baskı kalitesi	Dosya boyutu 2-4 kat artar Sayfa yükleme hızı düşer SEO puanını etkileyebilir

Ne Zaman Yüksek Kalite Kullanılmalı?

Ürün Detay Görselleri: Yakın plan çekimlerde (kumaş dokusu, saat mekanizması) %90-95 kalite
Lüks Ürünler: Mücevher, sanat eseri gibi yüksek detay gerektiren görseller
Baskı Materyalleri: Katalog indirme PDF’leri için

Optimizasyon Araçları

Squoosh.app: Gerçek zamanlı kalite/bozulma karşılaştırması

Imagemagick Komutu:

convert input.jpg -quality 85 -define webp:lossless=false output.webp

3. WooCommerce Özel Optimizasyon Tavsiyeleri

Bileşen Bazlı Kalite Ayarları

Ana sayfa banner’ları: %80-85 WebP kalite
Ürün galeri: %85-90 WebP kalite
Thumbnail (küçük resimler): %70-75 WebP kalite

WooCommerce Eklenti Entegrasyonları

ShortPixel, EWWW Image Optimizer gibi eklentiler genelde otomatik %75-85 aralığı kullanır. Manuel override yapmayın.

Responsive Görsel HTML Yapısı

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="Örnek Ürün" loading="lazy">
</picture>

⚠️ Kritik Uyarı

Google Pagespeed Insights, 200KB üzeri görselleri “optimize edin” uyarısı verir. WebP’de %95 kalite genellikle bu sınırı aşar.

4. Sonuç ve En İyi Uygulamalar

Altın Kurallar

Boyut-Format-Kalite dengesini koruyun
Tüm görseller için alternatif metin (alt text) ekleyin
Lazy loading özelliğini aktif edin
Görsellerinizi CDN ile sunun
Düzenli olarak Google Pagespeed testi yapın

Pro İpucu

Ürün görselleri için en az 2x büyüklükte (1600×1600 px) kaynak dosya isteyin. Böylece gelecekteki tema değişikliklerine hazırlıklı olursunuz.

Arif Akyüz Sistem Network Yöneticisi ve Siber Güvenlik Uzmanı

Arif Akyüz
Bilgi Teknolojileri
Sistem Network Yöneticisi
ve Siber Güvenlik Uzmanı
[email protected]