Neden en öncelikli hız çalışması?
Çoğu sitede sayfa ağırlığının en büyük bölümünü görseller oluşturur. 4 MB'lık bir sayfanın 3,5 MB'ı görselse, kod optimizasyonu marjinal kalır. Görsel optimizasyonu genellikle en az emekle en çok kazandıran teknik çalışmadır.
Beş adımda optimizasyon
1. Doğru boyutta yükleyin
En yaygın hata: 4000 piksel genişliğindeki fotoğrafı yükleyip CSS ile 600 piksele küçültmek. Tarayıcı yine de 4000 pikseli indirir.
Görseli görüntüleneceği boyutta hazırlayın (yüksek çözünürlüklü ekranlar için 2 katı yeterlidir).
2. Modern format kullanın
| Format | Kullanım |
|---|---|
| WebP | Genel amaçlı, yaygın destekli, belirgin tasarruf |
| AVIF | Daha yüksek sıkıştırma, destek artıyor |
| SVG | Logo, ikon, çizim — ölçeklenebilir ve çok hafif |
| JPEG | Yedek format olarak |
| PNG | Yalnızca şeffaflık gerektiğinde |
3. Sıkıştırın
Çoğu fotoğrafta %70-80 kalite ayarı gözle fark edilmez ama dosya boyutunu yarıdan fazla düşürür.
4. Duyarlı görsel sunun
srcset ile farklı ekran boyutlarına farklı dosyalar sunun. Mobil kullanıcı masaüstü görselini indirmemelidir.
5. Boyut belirtin
width ve height tanımlayın — bu, düzen kaymasını (CLS) önler.
SEO tarafı: bulunabilirlik
- Dosya adı açıklayıcı olsun:
IMG_4821.jpgdeğilkirmizi-kadin-spor-ayakkabi.webp - Alt metni yazın: Hem erişilebilirlik hem görsel arama için
- Görsel site haritası: Görsel ağırlıklı sitelerde faydalı
- Yapılandırılmış veride görsel belirtin
Kritik istisna: ilk ekran görseli
Sayfanın en üstündeki büyük görsele geç yükleme uygulamayın. Bu, LCP'yi doğrudan kötüleştirir — üstelik "optimizasyon yaptım" sanılarak yapılan yaygın bir hatadır.
Ne anlama gelir?
Görsel optimizasyonu, bir sitedeki görsellerin hem sayfa hızını hem arama görünürlüğünü iyileştirecek biçimde hazırlanmasıdır. Görseller çoğu sayfanın en ağır bileşeni olduğundan, optimizasyonları doğrudan sayfa hızını etkiler; ayrıca doğru işaretlenen görseller görsel aramada trafik getirir. Görsel optimizasyonu, hem teknik hem SEO içeren çok yönlü bir çalışmadır.
Görsel optimizasyonunun bileşenleri
- Doğru boyutlandırma ve modern format (WebP/AVIF)
- Sıkıştırma ile dosya boyutunu düşürme
- Açıklayıcı dosya adı ve alt metin
- Duyarlı görseller (srcset) ile cihaza uygun sunum
- Gerektiğinde geç yükleme (lazy loading)
İki cephe: hız ve görünürlük
Görsel optimizasyonu iki amaca birden hizmet eder. Teknik cephede, sıkıştırılmış ve doğru boyutlu görseller sayfayı hızlandırır ve Core Web Vitals'ı iyileştirir. SEO cephesinde ise açıklayıcı dosya adı, alt metin ve şema, görsellerin görsel aramada bulunmasını sağlar. İkisi birlikte, görselleri hem yük değil kazanç haline getirir.
Gerçek örnek
Bir e-ticaret sitesi, yüksek çözünürlüklü ama optimize edilmemiş görseller kullanıyordu ve sayfaları çok yavaştı. Görseller WebP'ye çevrilip sıkıştırıldığında ve doğru alt metinlerle işaretlendiğinde, hem sayfa hızı belirgin biçimde arttı hem ürünler görsel aramada görünmeye başladı.
Özet
Görsel optimizasyonu, görselleri hem hız hem arama görünürlüğü için hazırlamaktır. Doğru boyut, modern format, sıkıştırma, alt metin ve duyarlı sunum ile görseller hem sayfayı hızlandırır hem görsel aramada trafik getirir.