Bir gün blog sayfamı test ettim: Toplam boyut 4.2 MB. Bunun 3.5 MB’ı görsellerdi. Telefondan giren biri sayfayı tam yüklemek için 15 saniye bekliyordu. Bu kabul edilemezdi. Görsel optimizasyonu öğrenmeye başladım ve sayfa boyutumu 680 KB’a düşürdüm. İşte adım adım nasıl yaptım.
Konu İçeriği
Görseller Neden Bu Kadar Önemli?
Ortalama bir web sayfasının %65’i görsellerden oluşur. HTTP Archive’ın 2026 verilerine göre, bir WordPress sayfasında ortalama 1.8 MB görsel yükleniyor ve bunun %40’ı gereksiz büyük veya optimize edilmemiş (HTTP Archive, “Web Almanac”, 2026). Benim sayfamda bu oran %83’tü — görseller düzeltilmesi gereken en büyük sorundu.
Adım 1: Doğru Format Seçimi — JPEG mi, PNG mi, WebP mi?
En temel karar: Hangi format? Benim kurallarım:
- Fotoğraflar: WebP (eski: JPEG) — en küçük boyut, en iyi kalite
- Logo ve ikonlar: SVG — vektörel, sınırsız büyütme, çok küçük boyut
- Şeffaf arka plan: WebP (alpha desteği var) veya PNG
- Ekran görüntüleri: WebP veya JPEG — keskin metin gerekmiyorsa
WebP, JPEG’den ortalama %30 daha küçük ve aynı görsel kalitede. Ben tüm fotoğraflarımı WebP’ye çevirdim ve tek başına 1 MB kazandım.
Adım 2: Doğru Boyutlar
En büyük hatalarımdan biri: 4000×3000 piksel fotoğraf yükleyip WordPress’in bunu 800px göstermesi. Gereksiz pikseller gereksiz dosya boyutu demek.
Benim boyut kurallarım:
- Blog yazısı içi görsel: 1200px genişlik, 80-85 kalite
- Öne çıkan görsel: 1200x630px (OG/Sosyal medya boyutu)
- Tam genişlik banner: 1920px genişlik max
- Küçük thumbnail: 400x300px
Görseli yüklemeden önce Squoosh.app (Google’ın ücretsiz aracı) ile doğru boyuta getiriyorum. 30 saniyelik bir işlem ama ciddi kazandırıyor.
Adım 3: Sıkıştırma — Kayıpsız mı, Kayıplı mı?
İki tür sıkıştırma var:
Kayıpsız (Lossless): Görsel kalitesi hiç değişmez, dosya %10-20 küçülür. Logo ve grafikler için ideal.
Kayıplı (Lossy): Görsel kalitesi hafif düşer ama dosya %50-70 küçülür. Fotoğraflarda gözle görülür fark yok. Ben kayıplı sıkıştırma kullanıyorum (%80 kalite) ve kimse fark etmiyor.
| Araç | Tür | Fiyat | Ortalama Sıkıştırma |
|---|---|---|---|
| TinyPNG | Kayıplı | Ücretsiz (limitli) | %60-70 |
| Squoosh | İkisi de | Ücretsiz | %50-80 |
| ShortPixel | İkisi de | Freemium | %60-75 |
| Imagify | İkisi de | Freemium | %55-70 |
Adım 4: WordPress’te Otomatik Optimizasyon
Her görseli manuel optimize etmek sürülebilir. Ben ShortPixel eklentisi kurdum ve yüklenen her görsel otomatik sıkıştırılıyor. Ayarlar: Lossy %82, WebP dönüşümü açık, EXIF verileri silinsin.
Bu eklenti ile eski görsellerimi de toplu optimize ettim: 1.200 görsel, 500 MB’dan 150 MB’a düştü. Tek tıkla yapıldı.
Adım 5: Lazy Loading
Lazy loading, görsellerin sadece ekranda görüneceği zaman yüklenmesi. Kullanıcı sayfanın altına hiç kaydırmazsa, oradaki görseller hiç yüklenmez. WordPress 5.5’ten itibaren yerel lazy loading destekliyor — loading="lazy" otomatik eklenir.
Ben ekstra olarak sayfanın ilk ekranındaki (above the fold) kritik görseli eager loading yapıyorum, gerisi lazy. Bu sayede ilk görüntü hemen yükleniyor, geri kalanı kullanıcı kaydırdıkça geliyor.
Adım 6: CDN ile Görsel Sunumu
Cloudflare veya başka bir CDN kullanıyorsanız, görseller otomatik olarak en yakın sunucudan sunulur. Ben Cloudflare’in “Polish” özelliğini kullanıyorum — görselleri otomatik WebP’ye çevirip sıkıştırıyor. Ama bu özellik Pro planda ($20/ay). Ücretsiz planda ShortPixel ile aynı işi yapıyorum.
Sıkça Sorulan Sorular
Görsel optimizasyon SEO’yu etkiler mi?
Doğrudan etkiler. Google Core Web Vitals’ta “Largest Contentful Paint” (LCP) metrik en büyük görselin ne kadar sürede yüklendiğini ölçer. Optimize görseller = düşük LCP = daha iyi sıralama.
WebP tüm tarayıcılarda çalışır mı?
2026 itibarıyla tüm modern tarayıcılarda çalışıyor. IE hariç ama IE zaten kullanılmıyor. WordPress’in picture element desteği ile geriye dönük uyumluluk da sağlanıyor.
SVG görseller güvenli mi?
SVG dosyaları XML tabanlıdır ve içine zararlı script yerleştirilebilir. WordPress varsayılan SVG yükleme izni vermez. Ben Safe SVG eklentisi ile SVG yükleyip otomatik temizliyorum.
Görsel alt metni neden önemli?
Alt metni erişilebilirlik için şart (ekran okuyucular) ve SEO için önemli (Google görsel aramada alt metnini kullanır). Her görselin açıklayıcı alt metni olmalı.
Mevcut görselleri toplu optimize edebilir miyim?
Evet, ShortPixel, Imagify veya EWWW gibi eklentilerin toplu optimize özelliği var. Ben 1.200 görseli tek tıkla optimize ettim. İnternet hızınıza göre 1-3 saat sürebilir.
Sonuç
Görsel optimizasyon, sayfa hızını iyileştirmenin en kolay ve en etkili yolu. Benim sayfam 4.2 MB’dan 680 KB’a düştü — bunun %80’i görsel optimizasyon sayesinde. WebP formatı, doğru boyutlar, sıkıştırma ve lazy loading ile siz de benzer sonuçlar alabilirsiniz.
Başlamak için Squoosh.app’i açın, bir görsel yükleyin ve farkı görün. Gözünüzle göremezsiniz ama dosya boyutu yarı yarıya düşer.
