WordPress görsel optimizasyonu, sitenize yüklediğiniz fotoğraf ve grafiklerin dosya boyutunu küçültme, doğru dosya formatını (WebP gibi) seçme ve tarayıcıya görselleri yalnızca gerektiğinde yükletme (lazy loading) işlemlerinin bütününü kapsar. Görseller, çoğu WordPress sitesinde toplam sayfa ağırlığının en büyük parçasını oluşturur; bu nedenle görsel optimizasyonu, sayfa hızını ve Core Web Vitals puanlarını iyileştirmenin en doğrudan yollarından biridir.
WordPress Görsel Optimizasyonu Neden Bu Kadar Önemli?
Optimize edilmemiş görseller iki şekilde zarar verir: sayfanın ilk yüklenme süresini uzatır ve mobil kullanıcılarda veri tüketimini artırır. Google’ın Core Web Vitals ölçütlerinden LCP (Largest Contentful Paint), çoğu sayfada büyük bir görselin ne kadar hızlı göründüğüyle doğrudan ilişkilidir. Sıkıştırılmamış, gereğinden büyük boyutlu veya yanlış formatta yüklenen bir görsel, bu metriği tek başına kötüleştirebilir. Görsel optimizasyonunu, önbellekleme ve CDN gibi diğer performans katmanlarıyla birlikte ele almak gerekir; bu konuları WordPress Önbellekleme Rehberi ve CDN Nedir? yazımızda ayrıntılı olarak ele almıştık.
Doğru Görsel Formatını Seçmek: WebP ve AVIF
Format seçimi, sıkıştırma ayarlarından bağımsız olarak dosya boyutunu doğrudan etkiler. Aşağıdaki tablo yaygın formatları karşılaştırıyor:
| Format | Avantajı | Ne Zaman Kullanılır |
|---|---|---|
| JPEG | Geniş uyumluluk, fotoğraflarda iyi sıkıştırma | Eski tarayıcı desteği kritikse |
| PNG | Şeffaflık desteği, kayıpsız kalite | Logo, ikon, ekran görüntüsü |
| WebP | JPEG/PNG’ye göre genellikle daha küçük dosya boyutu, şeffaflık desteği | Genel amaçlı, çoğu modern site için varsayılan |
| AVIF | WebP’den de ileri sıkıştırma oranı sunabilir | Performans önceliği en yüksek siteler |
Google’ın resmi WebP dokümantasyonuna göre bu format, kalite kaybını görece sınırlı tutarak dosya boyutunu azaltmayı hedefler. WordPress 5.8 sonrası sürümler WebP formatını medya kütüphanesinde doğrudan destekliyor; WordPress 6.5’ten itibaren AVIF de desteklenir; sunucunun GD/Imagick kütüphanesinin formatı işleyebilmesi gerekir.
Mevcut Görselleri WebP’ye Dönüştürme
Siteye zaten yüklenmiş JPEG/PNG görselleri toplu olarak WebP’ye çevirmek için genellikle bir optimizasyon eklentisi (örneğin bir görsel sıkıştırma/dönüştürme eklentisi) kullanılır. Eklenti seçerken şu noktalara dikkat edilmesi önerilir: orijinal dosyaların yedeğinin tutulup tutulmadığı, sıkıştırma kalitesinin manuel ayarlanabilir olup olmadığı ve toplu (bulk) dönüştürme sırasında sunucu kaynak tüketiminin ne düzeyde olduğu.
Lazy Loading Nasıl Etkinleştirilir?
Lazy loading, ekranda henüz görünmeyen görsellerin tarayıcı tarafından kullanıcı o bölüme kaydırana kadar yüklenmesini erteler. WordPress, 5.5 sürümünden itibaren görsellere otomatik olarak loading="lazy" özniteliğini ekliyor:
<img src="ornek-gorsel.webp"
alt="Açıklayıcı alt metin"
loading="lazy"
decoding="async"
width="1280"
height="720">Burada dikkat edilmesi gereken önemli bir nokta: sayfanın en üstünde, kullanıcı sayfayı açar açmaz görünen (above the fold) görsellere loading="lazy" eklenmemeli. Bu tür görseller için lazy loading, LCP metriğini kötüleştirebilir; çünkü tarayıcı görseli gereksiz yere geciktirir. Bu görseller için loading="eager" veya özniteliği tamamen boş bırakmak daha doğru bir yaklaşım.
Responsive Görseller: srcset ve sizes
Farklı ekran boyutlarına aynı büyük görseli göndermek, mobil kullanıcılarda gereksiz veri tüketimine yol açar. WordPress, medya kütüphanesine yüklenen görseller için otomatik olarak birden fazla boyut üretir ve bunları srcset özniteliğiyle sunar:
<img src="gorsel-1024x576.webp"
srcset="gorsel-480x270.webp 480w,
gorsel-768x432.webp 768w,
gorsel-1024x576.webp 1024w"
sizes="(max-width: 768px) 100vw, 1024px"
alt="Açıklayıcı alt metin" loading="lazy">Bu yapı sayesinde tarayıcı, kullanıcının ekran genişliğine en uygun görsel boyutunu otomatik olarak seçer. Tema veya sayfa oluşturucu, görseli manuel bir <img> etiketiyle değil WordPress’in medya fonksiyonlarıyla (örneğin the_post_thumbnail()) ekliyorsa bu öznitelikler genellikle otomatik oluşur.
Görsel Sıkıştırma İçin Adım Adım Kontrol Süreci
- Görseli yüklemeden önce gerçek gösterim boyutuna (piksel cinsinden) yakın bir ölçüde yeniden boyutlandırın; 4000 piksel genişliğindeki bir fotoğrafı 800 piksellik bir alanda göstermeyin.
- Dosyayı WebP formatında, kalite değerini genellikle yüzde 75-85 aralığında tutarak dışa aktarın.
- WordPress medya kütüphanesine yükleyin ve alt metin, başlık gibi alanları doldurun.
- Sayfa önizlemesinde görselin bulanıklaşıp bulanıklaşmadığını kontrol edin; gerekirse kalite değerini artırın.
- PageSpeed Insights veya benzer bir araçla sayfayı test ederek görsellerin LCP ve toplam sayfa boyutuna etkisini ölçün.
Yaygın Hatalar
- Orijinal boyutunda (örneğin kameradan çıktığı gibi 6000 piksel genişliğinde) görsel yüklemek.
- Above-the-fold görsellere de lazy loading uygulamak.
- Görsellere
widthveheightöznitelikleri eklememek; bu, sayfa yüklenirken içerik kaymasına (CLS) yol açabilir. - Anlam taşıyan görsellerde açıklayıcı alt metni atlamak. Dekoratif görsellerde alt=”” kullanılması erişilebilirlik açısından doğrudur; her görsele anahtar kelime doldurmayın.
- Tüm görselleri tek bir eklentiyle sıkıştırıp sonucu hiç kontrol etmemek.
Kontrol Listesi: Yayına Almadan Önce
| Kontrol | Durum |
|---|---|
| Görsel gösterim boyutuna uygun ölçüde mi? | Kontrol edilmeli |
| Format WebP (veya destekleniyorsa AVIF) mi? | Kontrol edilmeli |
| Above-the-fold görsellerde lazy loading kapalı mı? | Kontrol edilmeli |
| width/height öznitelikleri tanımlı mı? | Kontrol edilmeli |
| Alt metin dolduruldu mu? | Kontrol edilmeli |
Görsel optimizasyonu tek başına yeterli olmayabilir; INP metriği gibi etkileşim gecikmesine dayalı sorunlar için ayrı bir inceleme gerekir. Bu konuyu Core Web Vitals 2026: INP Metriği yazımızda ele almıştık.
Sunucu Tarafında Ek Optimizasyon Seçenekleri
Görsel optimizasyonunu yalnızca WordPress yönetim paneli üzerinden değil, sunucu ve altyapı katmanında da güçlendirmek mümkün. Paylaşımlı hosting kullanan sitelerde genellikle bir görsel CDN’i (görselleri kullanıcının konumuna en yakın sunucudan, otomatik formata çevirerek sunan bir servis) devreye almak, eklenti tabanlı sıkıştırmaya ek bir katman sağlar. Bazı hosting sağlayıcıları bu özelliği panel üzerinden tek tıkla etkinleştirmeye izin veriyor; bu durumda eklenti tabanlı sıkıştırmayla çakışma olup olmadığını kontrol etmek gerekir, çünkü aynı görselin iki farklı katmanda tekrar tekrar işlenmesi gereksiz sunucu yükü oluşturabilir.
Ayrıca sunucuda Gzip veya Brotli sıkıştırmasının aktif olması, görsel dışındaki HTML/CSS/JS dosyalarının da küçülmesini sağlayarak toplam sayfa boyutunu azaltır. Bu ayarların çoğu, hosting sağlayıcısının önbellekleme eklentisi veya sunucu yapılandırma paneli üzerinden etkinleştirilebilir; paylaşımlı hosting ortamında bu ayarlara doğrudan erişim kısıtlı olabileceğinden, önce hosting sağlayıcısının dokümantasyonunu kontrol etmek pratik bir ilk adım.
Sonuç
WordPress görsel optimizasyonu; doğru format seçimi, gösterim boyutuna uygun sıkıştırma, akıllı lazy loading ve responsive görsel sunumunun bir araya gelmesiyle anlam kazanır. Bu adımların tek tek uygulanması, özellikle görsel ağırlıklı sitelerde sayfa hızında ve Core Web Vitals puanlarında gözle görülür bir iyileşme sağlayabilir. Değişiklikleri yayına almadan önce PageSpeed Insights gibi bir araçla test etmek, hangi adımın en çok fark yarattığını görmenin en pratik yolu.
Sık Sorulan Sorular
WordPress’te görselleri otomatik WebP’ye çevirmek mümkün mü?
Evet, bir görsel optimizasyon eklentisi kullanarak yeni yüklenen görselleri otomatik, mevcut görselleri ise toplu şekilde WebP’ye dönüştürmek mümkün.
Lazy loading tüm görsellere uygulanmalı mı?
Hayır. Sayfa açılır açılmaz görünen (above-the-fold) görsellere lazy loading uygulanması LCP metriğini kötüleştirebilir; bu görseller erken yüklenmeli.
WebP kalitesi hangi seviyede tutulmalı?
Genel bir başlangıç noktası olarak yüzde 75-85 aralığı çoğu fotoğraf için görsel kaliteyi büyük ölçüde korurken dosya boyutunu belirgin şekilde azaltır; nihai değer görsel türüne göre test edilerek belirlenmeli.
width ve height öznitelikleri neden önemli?
Bu öznitelikler, tarayıcının görsel için gereken alanı önceden ayırmasını sağlar; böylece görsel yüklenirken sayfa içeriğinin aşağı kayması (CLS sorunu) önlenir.
AVIF, WebP’nin yerini alacak mı?
AVIF bazı durumlarda daha küçük dosya boyutu sunabilir, ancak sunucu ve eklenti desteği WebP kadar yaygın değil; bu nedenle 2026 itibarıyla WebP çoğu WordPress sitesi için hâlâ pratik bir varsayılan.
loading=”eager” yüksek fetch önceliği anlamına gelmez. Gerçek LCP görseli için fetchpriority=”high” ayrıca değerlendirilebilir; bütün görsellere yüksek öncelik vermeyin. srcset seçiminde CSS gösterim genişliği ve cihaz piksel oranı birlikte etkilidir. Kod örneklerindeki img etiketleri yalnız örnektir; tema çıktısını Network panelinde kontrol edin.
Kaynak: WordPress — AVIF desteği.
