Görsel optimizasyonu, görsel kaliteyi koruyarak dosya boyutlarını küçültür. Temel iş akışı: görüntü boyutlarına göre yeniden boyutlandır, %75-85 kalitede sıkıştır, WebP veya AVIF biçimine dönüştür, lazy loading ekle ve açık width/height öznitelikleri belirle. Bir DebugBear örnek olay incelemesi, tam bu sırayı kullanarak %97,5 oranında küçülme (4,3 MB → 109 KB) elde etmiştir.
Görsel Optimizasyonu Neden Önemlidir
Görseler, toplam sayfa ağırlığının yaklaşık %64’ünü oluşturur (Sanity). Optimize edilmemiş görseler doğrudan zarar verir:
| Metrik | Etki | Neden |
|---|---|---|
| LCP (Largest Contentful Paint) | 2,5 saniye eşik değerini aşıyor | Şişirilmiş hero görselleri |
| CLS (Cumulative Layout Shift) | İçerik yüklenirken zıplıyor | Eksik width/height öznitelikleri |
| Hemen çıkma oranı | Ziyaretçiler içerik yüklenmeden ayrılıyor | Yavaş ilk boyama |
| Mobil sıralama | Daha düşük arama konumu | Değişken ağlarda aşırı bant genişliği kullanımı |
Üç Temel Direk: Yeniden Boyutlandırma, Sıkıştırma, Biçim
Direk 1: Yeniden Boyutlandırma — En Büyük Tek Kazanç
Görselleri gerçek görüntü boyutlarında sunmak en büyük optimizasyondur. DebugBear örnek olay incelemesi, 7108×4744 bir fotoğrafın 1266×845 boyutunda gösterildiğini ortaya koyuyor: yalnızca yeniden boyutlandırma dosyayı 4,3 MB’dan 495 KB’a düşürdü (%89 küçülme).
Adımlar:
- Görüntü boyutlarını belirle — WordPress.com, keskin sonuçlar için içerik alanı genişliğinin 1,5-2 katı çözünürlükte yüklemenizi önerir.
- Yüklemeden önce yeniden boyutlandır — Ön İzleme (Mac), Paint (Windows) veya GIMP kullanın.
- Görüntü alanı boyutuna göre farklı genişlikler (400w, 800w, 1600w) sunmak için
srcsetvesizesöznitelikleriyle responsive görseller ekleyin.
Bu, tarayıcının her görüntü alanı için doğru dosyayı seçmesine olanak tanır — mobil kullanıcılar daha küçük dosyalar indirir, masaüstü kullanıcıları keskin sürümler alır.
Direk 2: Sıkıştırma — Lossy ve Lossless
| Mod | Çalışma Şekli | Dosya Boyutu | İçin En İyi |
|---|---|---|---|
| Lossy | Bazı verileri kalıcı olarak kaldırır | Daha küçük (%40-60 küçülme) | Fotoğraflar, karmaşık görseller |
| Lossless | Tüm verileri tam olarak korur | Daha büyük | Logolar, metin, ekran görüntüleri, şeffaflık |
Çoğu web görseli için, %75-85 kalitede lossy sıkıştırma en iyi dengeyi sağlar. WebP ve AVIF her iki modu da destekler.
Direk 3: Biçim Seçimi — WebP vs. AVIF vs. JPEG
| Biçim | JPEG’e Karşı Sıkıştırma | Kodlama Hızı | Tarayıcı Desteği (2026) | İçin En İyi |
|---|---|---|---|---|
| WebP | %25-35 daha küçük | Hızlı | %97+ | LCP görselleri, genel kullanım |
| AVIF | ~%50 daha küçük | WebP’den %50 daha yavaş | %92+ | Maksimum sıkıştırma |
| JPEG | Temel seviye | En hızlı | %100 | Evrensel yedek |
Karar çerçevesi:
| Senaryo | Önerilen Biçim |
|---|---|
| LCP/ekranın üst kısmındaki hero görseli | WebP (daha hızlı kodlama, daha geniş destek) |
| Toplam sayfa ağırlığı azaltma | AVIF (daha iyi sıkıştırma) |
| Ürün fotoğrafçılığı (HDR) | AVIF (geniş renk yelpazesi) |
| Kullanıcı tarafından oluşturulan içerik | WebP (daha hızlı işleme) |
| Animasyonlu grafikler | WebP (animasyon desteği) |
| Metin/keskin çizgiler içeren grafikler | WebP lossless |
Hibrit yaklaşım (önerilen): Framer‘a göre, ilk istekte WebP sunun, arka planda AVIF’e dönüştürün, ardından sonraki ziyaretlerde AVIF sunun. Hızlı ilk teslimat ve daha küçük önbelleğe alınmış dosyalar elde edersiniz.
Lazy Loading ve Responsive Görseller
Lazy loading, ekran dışındaki görseleri ihtiyaç duyulana kadar erteler, bant genişliğinden tasarruf eder ve ilk yüklemeyi iyileştirir. Ekranın alt kısmındaki herhangi bir görsel etiketine loading="lazy" ekleyin.
Kurallar:
- Ekranın üst kısmındaki görselleri asla lazy load yapmayın — bu LCP’yi geciktirir.
- LCP görsellerine öncelik verin
fetchpriority="high"ile. -
Kritik CSS arka plan görsellerini ön yükleyin
<head>içinderel="preload" as="image" fetchpriority="high"kullanarak. -
Her zaman açık width ve height öznitelikleri belirleyin CLS’yi önlemek için görsel ögelerinde.
Araç Karşılaştırması
| Araç | İçin En İyi | Biçimler | Toplu İşlem | Maliyet |
|---|---|---|---|---|
| Squoosh | Geliştirici biçim karşılaştırması | WebP, AVIF, JPEG, PNG | Evet | Ücretsiz |
| TinyPNG | Tasarımcı tek görsel optimizasyonu | WebP, JPEG, PNG | 20 dosya | Ücretsiz |
| ImageLean | Gizlilik odaklı tarayıcı sıkıştırması | WebP, AVIF, JPEG, PNG | Evet | Ücretsiz |
| Smush | WordPress site sahipleri | WebP, AVIF, JPEG, PNG | Toplu | Ücretsiz/Pro |
| Cloudflare Images | CDN üzerinden küresel ölçeklendirme | Otomatik dönüştürme | Anında | Kullanım başına ödeme |
| Next.js Image | React/Next.js projeleri | Otomatik WebP/AVIF | Otomatik | Ücretsiz |
CDN vs. Eklenti Optimizasyonu
| Yaklaşım | Çalışma Şekli | Avantajlar | Dezavantajlar |
|---|---|---|---|
| CDN tabanlı (Cloudflare, Fastly) | Ağ ucunda optimize eder, sonucu önbelleğe alır | Sıfır manuel iş, cihaza uyumlu | CDN aboneliği gerektirir |
| Eklenti tabanlı (Smush, TinyPNG) | Yükleme sırasında veya API üzerinden işler | Çıktı üzerinde daha fazla kontrol | Mevcut görsellerde toplu işlem gerekli |
En iyi uygulama: Hibrit — anında teslimat için CDN + yükleme sıkıştırması için eklenti. CDN’ler uluslararası ziyaretçiler için görsel yükleme sürelerini %50+ oranında azaltır (DebugBear).
Otomasyon İş Akışları
CI/CD Boru Hattı
GitHub Actions, her push işleminde Squoosh CLI veya sharp kullanarak otomatik olarak sıkıştırma ve biçim dönüştürme yapabilir. Kod tabanındaki tüm görseller dağıtımdan önce optimize edilir.
Headless CMS
Sanity gibi platformlar, anında dönüşümlerle optimize edilmiş görseller sunar — bir yüksek kaliteli kaynak depolayın, otomatik olarak küçük resimler, responsive boyutlar ve modern biçimler edinin.
E-ticaret
- WooCommerce: Smush doğrudan entegre olur — yüklemede otomatik sıkıştırma, galerilerde toplu optimizasyon, küresel teslimat için CDN.
- Shopify: Yerleşik boru hattı optimizasyonu yönetir. Yüklemeden önce kaynak görsellerin doğru boyutlandırıldığından ve temaların uygun
srcsetöznitelikleri ürettiğinden emin olun.
PageSpeed Insights Uyarılarını Giderme
| Uyarı | Neden | Çözüm |
|---|---|---|
| “Görsellere uygun boyut verin” | Görsel, görüntü boyutundan daha büyük | Kapsayıcıya uyacak şekilde yeniden boyutlandır + srcset kullan |
| “Görselleri yeni nesil biçimlerde sunun” | WebP/AVIF yerine JPEG/PNG kullanılıyor | Squoosh veya Smush otomatik dönüştürme ile dönüştürün |
| “Ekran dışındaki görselleri erteleyin” | Tüm görseler hemen yükleniyor | Yalnızca ekran altı görsellere loading="lazy" ekleyin |
| “Oluşturmayı engelleyen kaynakları ortadan kaldırın” | CSS/HTML içinde büyük Base64 kodlu görseller | Ayrı dosyalar olarak sunun; birkaç yüz bayttan fazlası için Base64 kullanmayın |
Sonuç
Görselleri sırasıyla optimize edin: yeniden boyutlandır → sıkıştır → modern biçime dönüştür → lazy loading ekle → açık boyutlar belirle. CDN/eklenti hibridi ile otomatikleştirin. DebugBear ile sitenizi denetleyerek başlayın — örnek olay incelemesindeki %97,5 boyut küçülmesi bu tekniklerle çoğu site için ulaşılabilir.
SSS
Lossy ve lossless sıkıştırma arasındaki fark nedir?
Lossy, daha küçük dosyalar için verileri kalıcı olarak kaldırır — fotoğraflar için uygundur. Lossless tüm verileri tam olarak korur — logolar, metin ve ekran görüntüleri için uygundur. WebP ve AVIF her iki modu destekler. Web görselleri için %75-85 kalitede lossy standarttır.
2026’da WebP mi yoksa AVIF mi kullanmalıyım?
LCP/ekranın üst kısmındaki görseller için WebP (daha hızlı kodlama, daha geniş destek). Maksimum sıkıştırma için AVIF (daha küçük dosyalar, daha yavaş kodlama). Hibrit yaklaşımı kullanın: ilk yüklemede WebP, önbelleğe alınmış sonraki ziyaretlerde AVIF.
PageSpeed’in “Görsellere uygun boyut verin” ve “Yeni nesil biçim” uyarılarını nasıl giderebilirim?
Görselleri görüntü boyutlarına uygun şekilde yeniden boyutlandırın. JPEG/PNG’yi WebP veya AVIF’e dönüştürün. Ekran boyutu ve biçim desteğine göre uygun sürümler sunmak için <picture> ögesiyle birlikte srcset kullanın. WordPress kullanıcıları bunu Smush eklentisi ile otomatikleştirebilir.
Bir yanıt yazın