WordPress Gorsel Optimizasyonu ve Sikistirma

Bir WordPress sayfasını tarayıcının geliştirici araçlarındaki "Ağ" (Network) sekmesiyle incelediğinizde neredeyse her zaman aynı tabloyla karşılaşırsınız: indirilen toplam baytların büyük çoğunluğu HTML, CSS veya JavaScript değil, görsellerdir. Tipik bir kurumsal ana sayfada görseller çoğu zaman sayfa ağırlığının yüzde 50 ile 70'i arasını kaplar. Yani sitenizi hızlandırmak için atacağınız en yüksek getirili adım, çoğu durumda kodu değil resimleri elden geçirmektir. Optimize edilmemiş tek bir kapak görseli, iyi ayarlanmış bir önbellekleme katmanının kazandırdığı bütün süreyi tek başına yiyip bitirebilir.

Bu rehberde görselleri hem yükleme öncesinde elle, hem de eklentilerle otomatik olarak nasıl optimize edeceğinizi baştan sona ele alacağız. Görsellerin neden bu kadar ağır olduğunu, WebP ve AVIF gibi modern formatların klasik JPEG ve PNG karşısında ne kazandırdığını, Smush, ShortPixel ve Imagify gibi eklentilerin farklarını, srcset ile doğru boyutun nasıl seçildiğini ve tüm bunların Core Web Vitals skorunuza nasıl yansıdığını uygulamalı biçimde göreceğiz. Amaç, resimlerin görsel kalitesini gözle fark edilir ölçüde bozmadan dosya boyutunu üçte birine, hatta beşte birine indirmek.

Görseller Neden Sayfa Ağırlığının En Büyük Parçası?#

Sorunun kaynağı çoğunlukla kaynağın kendisidir. İçerik üreticileri görselleri genellikle telefondan veya profesyonel bir makineden geldiği hâliyle, hiç dokunmadan medya kütüphanesine yükler. Bugün ortalama bir akıllı telefon 4000 x 3000 piksel çözünürlükte, 4-6 MB ağırlığında fotoğraf üretir. Oysa o görselin sayfada gösterileceği alan çoğu zaman 800 piksel genişliğindedir. Yani ziyaretçi, ekranda hiçbir zaman göremeyeceği milyonlarca fazladan pikseli boşuna indirmek zorunda kalır.

Buna bir de yanlış format seçimi eklenir. Fotoğraflar bazen kayıpsız PNG olarak kaydedilir ki bu, fotoğrafik içerik için son derece verimsizdir; keskin kenarlı logolar ve şeffaflık gerektiren grafikler ise gereksiz yere JPEG'e çevrilir. Bir de EXIF verileri vardır: makinenin markası, GPS konumu, çekim tarihi gibi meta bilgiler her dosyaya gömülüdür ve web'de hiçbir işe yaramadıkları hâlde her ziyarette indirilir.

Buradaki temel prensip nettir: bir baytı hiç göndermemek, onu sıkıştırıp göndermekten her zaman daha hızlıdır. Bu yüzden görsel optimizasyonu üç ayrı cephede birden yürütülür — doğru boyut (fazla pikseli kırpmak), doğru format (WebP/AVIF) ve doğru sıkıştırma (kaliteyi korumaya devam ederek baytları azaltmak). Bu üçünü aynı anda uyguladığınızda, tek bir görselde bile çarpıcı kazanımlar elde edersiniz.

Yüklemeden Önce Elle Optimize Etme Alışkanlığı#

En iyi otomasyon bile, kaynaktaki hatayı tamamen düzeltemez. Bu yüzden en sağlıklı yaklaşım, görseli medya kütüphanesine yüklemeden önce doğru boyuta getirmektir. Bir görselin sitenizde 1200 pikselden geniş görüneceği neredeyse hiç yoktur; blog içi görseller için 800-1000 piksel, tam genişlik kapaklar için 1600-1920 piksel çoğu tasarım için fazlasıyla yeterlidir.

Bu işi el ile yapmak için Photoshop şart değildir; ücretsiz Squoosh (web tabanlı), GIMP veya IrfanView gibi araçlar iş görür. Toplu iş yapıyorsanız komut satırı çok daha hızlıdır. ImageMagick ile bir klasördeki tüm görselleri en fazla 1600 piksel genişliğe indirip kaliteyi düşürmeden yeniden kaydetmek tek satırla mümkündür:

# Klasördeki tüm JPG'leri en fazla 1600px genişliğe indirir, EXIF verisini siler
mogrify -resize '1600>' -strip -quality 82 *.jpg

# Tek bir dosyayı WebP'ye çevirmek için (Google'ın cwebp aracı)
cwebp -q 80 kapak.jpg -o kapak.webp

-strip bayrağı EXIF/meta verileri temizler, -resize '1600>' yalnızca daha büyük görselleri küçültür (küçükleri büyütmez), -quality 82 ise gözle fark edilmesi çok zor bir kayıpla dosyayı belirgin biçimde küçültür. Bu alışkanlığı bir kez edindiğinizde, medya kütüphaneniz baştan temiz kalır ve eklentilerin işi çok hafifler. Kaynağı düzeltmek, sonradan temizlemeye her zaman yeğdir.

WebP ve AVIF: Modern Görsel Formatları#

Yıllarca web'in standardı JPEG ve PNG oldu, ancak ikisi de artık modern alternatiflerin gerisinde kalıyor. WebP, Google'ın geliştirdiği ve bugün tüm güncel tarayıcılar tarafından desteklenen bir formattır; aynı görsel kalitesinde JPEG'e göre ortalama yüzde 25-35, PNG'ye göre çok daha yüksek bir tasarruf sağlar. AVIF ise daha yeni bir formattır ve sıkıştırma verimliliği WebP'yi de geçer, fakat kodlama süresi daha uzundur ve tarayıcı desteği WebP kadar yaygın değildir.

Aşağıdaki tablo, tipik bir fotoğrafın farklı formatlardaki yaklaşık davranışını özetliyor:

Pratikte doğru strateji, görselleri WebP olarak sunmak ve formatı desteklemeyen çok eski bir tarayıcı gelirse otomatik olarak JPEG'e düşmektir (fallback). WordPress tarafında bunu elle kurmak zahmetlidir; iyi bir optimizasyon eklentisi ya da sunucu tarafı bir çözüm bu geri düşmeyi sizin yerinize halleder. Görselleri komut satırından toplu olarak dönüştürmek isterseniz de yine cwebp ve avifenc araçları basit bir döngüyle bunu yapar:

# Bir klasördeki tüm JPG dosyalarını WebP'ye toplu çevirir
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Otomatik Sıkıştırma Eklentileri: Smush, ShortPixel ve Imagify#

Görselleri her seferinde elle işlemek küçük siteler için mümkün olsa da, düzenli içerik üreten ya da çok yazarlı bir sitede sürdürülebilir değildir. İşte burada otomatik sıkıştırma eklentileri devreye girer. Bunlar, siz medya kütüphanesine bir görsel yüklediğiniz anda onu arka planda sıkıştırır, WebP kopyasını üretir ve gerektiğinde otomatik geri düşme mekanizmasını kurar. Mevcut kütüphanenizi de topluca (bulk) işleyebilirler.

En yaygın üç seçeneği kısaca karşılaştıralım:

Bu eklentilerin çoğu, sıkıştırmayı kendi sunucularında yaptığı için (bulut tabanlı) sizin sunucunuzun CPU'sunu yormaz; bu, paylaşımlı hosting kullananlar için önemli bir avantajdır. Kayıplı (lossy) sıkıştırma daha küçük dosya verir ama çok agresif ayarlarda görselde gözle görülür bozulma başlar; genel bir kural olarak fotoğraflar için orta düzey ("glossy" veya "normal") ayar, kalite ile boyut arasında en iyi dengeyi kurar.

Kurulumdan sonra mutlaka yapmanız gereken şey, "toplu optimizasyon" (bulk optimize) işlemini bir kez çalıştırıp kütüphanenizdeki eski, işlenmemiş görselleri de geçmişe dönük sıkıştırmaktır. Hangi eklentiyi seçeceğiniz konusunda kararsızsanız, genel eklenti seçimi ilkelerini ele aldığımız WordPress eklenti önerileri rehberimiz karar vermenizi kolaylaştırır.

srcset ve Doğru Boyutu Seçmek#

WordPress, siz bir görsel yüklediğinizde onu tek boyutta saklamaz; tema ve çekirdek ayarlarına göre thumbnail, medium, large gibi birden fazla kopya üretir. Bu kopyalar sayesinde tarayıcı, ekran boyutuna en uygun olanı seçebilir. Bu seçimi yapan mekanizmaya srcset denir. Modern WordPress temaları görselleri şuna benzer bir işaretlemeyle çıktı verir:

# WordPress'in ürettiği tipik responsive img etiketi (basitleştirilmiş)
<img src="kapak-1024.jpg"
     srcset="kapak-480.jpg 480w, kapak-768.jpg 768w, kapak-1024.jpg 1024w"
     sizes="(max-width: 768px) 100vw, 1024px" />

Buradaki mantık şudur: srcset tarayıcıya "elimde 480, 768 ve 1024 piksel genişliğinde kopyalar var" der; sizes ise "bu görsel şu koşulda şu kadar yer kaplayacak" bilgisini verir. Böylece bir telefon 480 piksellik küçük kopyayı indirirken, geniş bir masaüstü ekranı 1024 piksellik olanı çeker. Kimse ihtiyacından fazlasını indirmez.

Bu mekanizmanın sağlıklı çalışması için iki şeye dikkat edin. Birincisi, tema geliştiricinizin srcset desteğini düzgün uygulamış olması gerekir; kötü kodlanmış bazı temalar bunu es geçer. İkincisi, çok büyük bir orijinal görsel yüklerseniz WordPress ara boyutları üretse bile en büyük kopya gereksiz yere şişkin kalır. Bu yüzden bir önceki bölümdeki "yüklemeden önce boyutlandır" alışkanlığı, srcset ile birlikte çalıştığında en iyi sonucu verir. Ayarlar > Medya ekranından ara boyutların piksel değerlerini kendi tasarımınıza göre ayarlamayı da unutmayın.

Lazy Load ve LCP Dengesi#

WordPress 5.5 sürümünden bu yana görsellere loading="lazy" özniteliği varsayılan olarak eklenir. Bu, ekranın görünen alanının (viewport) dışında kalan görsellerin ziyaretçi aşağı kaydırana kadar hiç indirilmemesini sağlar. Uzun bir blog yazısında onlarca görsel varsa, ilk açılışta yalnızca ilk ekrandakiler yüklenir; bu da başlangıç yükünü ve dolayısıyla açılış süresini belirgin biçimde azaltır.

Ancak burada ince bir tuzak vardır. Sayfanın en üstündeki büyük kapak görseli çoğu zaman "En Büyük İçerikli Boyama" (Largest Contentful Paint / LCP) öğesidir ve bu, doğrudan bir Core Web Vitals metriğidir. Eğer bu kritik görseli de tembel yüklerseniz, tarayıcı onu geç fark eder ve LCP skorunuz kötüleşir. Bu yüzden altın kural şudur: ilk ekranda görünen ana görseli tembel yüklemeyin (loading="eager"), ekranın altındaki her şeyi tembel yükleyin.

İyi optimizasyon eklentileri bu ayrımı otomatik yapar; kritik görseli hariç tutup gerisini geciktirir. Görsellerdeki boyut kaymalarını (Cumulative Layout Shift / CLS) önlemek içinse görsellerin width ve height değerlerinin işaretlemede mutlaka bulunması gerekir — böylece tarayıcı görsel yüklenmeden önce yerini ayırır ve metin aşağı zıplamaz. Bu metriklerin ölçümü ve genel hız iyileştirmeleri için WordPress hız optimizasyonu rehberimiz kapsamlı bir yol haritası sunar.

Sunucu Tarafı Sıkıştırma ve CDN#

Görsellerin kendisini optimize ettikten sonra, bir de bunların ziyaretçiye ulaşırken izlediği yolu iyileştirebilirsiniz. Burada iki katman devreye girer: sunucu tarafı önbellek başlıkları ve CDN. Ziyaretçinin tarayıcısına "bu görseli uzun süre önbellekte tut" demek, tekrar eden ziyaretlerde görselin hiç indirilmemesi anlamına gelir. Nginx tarafında bu, birkaç satırlık bir yapılandırmayla halledilir:

# Statik görsellere uzun ömürlü tarayıcı önbelleği ve isteğe bağlı WebP servisi
location ~* \.(jpg|jpeg|png|gif|webp|avif)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
    access_log off;
}

expires 365d başlığı, dönen ziyaretçinin görselleri bir yıl boyunca yeniden indirmemesini sağlar; immutable ise tarayıcının önbellek doğrulaması için bile sunucuya sormamasını söyler. Bir CDN kullanmak ise bu görselleri ziyaretçiye coğrafi olarak en yakın sunucudan sunar. Türkiye'deki bir ziyaretçi için görselin İstanbul'daki bir uç noktadan gelmesi, okyanus ötesi bir kaynaktan gelmesinden çok daha hızlıdır. Cloudflare gibi çözümler ayrıca görselleri uçuş anında (on-the-fly) WebP'ye çevirip Polish gibi özelliklerle ek sıkıştırma da uygulayabilir.

Sunucunuzun bu tür başlıkları ve modern formatları desteklemesi, altyapının kalitesiyle doğrudan ilişkilidir. LiteSpeed tabanlı, WebP dönüşümünü sunucu düzeyinde yapabilen bir WordPress hosting paketi ile bu işin çoğu kutudan çıktığı gibi çalışır; yüksek trafikli bir görsel arşivi işletiyorsanız kaynakları size ayrılmış bir VDS sunucu daha kararlı bir seçim olur. Uygulama tarafında hazır bir CDN veya görsel işleme aracı arıyorsanız App Center üzerindeki self-hosted çözümlere de göz atabilirsiniz.

Yaptıklarınızı Ölçün ve Doğrulayın#

Görsel optimizasyonunun en tatmin edici yanı, sonucunun sayılarla net biçimde görünmesidir. Değişiklikleri uyguladıktan sonra sitenizi Google PageSpeed Insights veya GTmetrix ile test edin ve özellikle "Uygun boyutta görseller sunun" (properly size images) ile "Modern formatlarda görsel sunun" (serve images in modern formats) uyarılarının kaybolduğunu doğrulayın. LCP değerinin 2,5 saniyenin altına inmesi, çoğu sitede doğrudan görsel iyileştirmelerinin bir sonucudur.

Bir görselin gerçekte ne kadar ağır olduğunu ve hangi formatta sunulduğunu tarayıcının geliştirici araçlarından anında görebilirsiniz. Sayfayı açıp F12 ile araçları açın, "Ağ" sekmesine geçip yalnızca "Img" filtresini seçin ve sayfayı yenileyin:

# Komut satırından tek bir görselin boyutunu ve içerik tipini kontrol etmek
curl -sI https://siteniz.com/wp-content/uploads/2026/07/kapak.webp | grep -iE 'content-length|content-type'

Bu çıktıda content-type: image/webp ve makul bir content-length görüyorsanız işiniz iş demektir. Optimizasyonu bir kereye mahsus bir görev değil, süregelen bir alışkanlık olarak düşünün: her yeni içerik yüklemesinde aynı disipline sadık kalırsanız, siteniz zamanla yavaşlamak yerine hafif kalmaya devam eder.

Sıkça Sorulan Sorular#

WebP kullanmak görselin kalitesini bozar mı?#

Doğru kalite ayarında hayır. WebP kayıplı modda çalışsa bile, yüzde 75-82 aralığındaki bir kalite değeriyle çıplak gözle JPEG'den ayırt edilmesi neredeyse imkânsız bir sonuç verir; üstelik dosya belirgin biçimde küçülür. Kaliteyi çok agresif düşürmediğiniz sürece ziyaretçileriniz hiçbir fark hissetmez, yalnızca sayfanın daha hızlı açıldığını görür.

Eski görsellerimi de topluca sıkıştırabilir miyim?#

Evet, ve bunu mutlaka yapmalısınız. Smush, ShortPixel ve Imagify gibi eklentilerin hepsinde "toplu optimizasyon" (bulk optimize) düğmesi bulunur; bu düğme medya kütüphanenizdeki tüm eski görselleri geçmişe dönük olarak işler. İşlemi başlatmadan önce bir yedek almanız akıllıca olur, çünkü sıkıştırma orijinal dosyaların üzerine yazabilir; büyük kütüphanelerde işlem birkaç saat sürebilir, ama bir kez tamamlandığında tüm arşiviniz optimize edilmiş olur.

AVIF mi yoksa WebP mi tercih etmeliyim?#

Çoğu site için WebP en dengeli seçimdir çünkü desteği evrensele yakındır ve kodlaması hızlıdır. AVIF daha küçük dosya üretir, ancak dönüştürme işlemi daha yavaştır ve çok eski bazı tarayıcılarda geri düşme gerektirir. En sağlıklı yaklaşım, ikisini birden üretip tarayıcıya en iyi desteklediğini sunmaktır; iyi bir eklenti bu geri düşme zincirini sizin yerinize kurar, siz yalnızca ikisini de etkinleştirirsiniz.

Görsellerimi hem eklentiyle hem elle sıkıştırırsam sorun olur mu?#

Genellikle sorun olmaz, ama gereksiz olabilir. Yükleme öncesinde görseli doğru boyuta getirip hafifçe sıkıştırdıysanız, eklentinin agresif ayarda tekrar sıkıştırması bazı durumlarda görünür kalite kaybına yol açabilir. En temiz yöntem, elle yalnızca boyutlandırma ve EXIF temizliği yapmak, asıl kayıplı sıkıştırmayı ise tek bir katmana (tercihen eklentiye) bırakmaktır; böylece iki kez üst üste kayıplı işlem uygulanmaz.

Görsel optimizasyonu Core Web Vitals skorumu gerçekten etkiler mi?#

Kesinlikle, hem de en doğrudan etkileyen faktörlerden biridir. Sayfanın en üstündeki büyük kapak görseli çoğu sitede LCP (Largest Contentful Paint) öğesidir; onu küçültüp modern formata çevirmek LCP süresini saniyeler mertebesinde iyileştirebilir. Ayrıca görsellere width ve height değerleri eklemek CLS (düzen kayması) skorunu düzeltir. Yani görselleri düzenlemek, üç Core Web Vitals metriğinden ikisini birden aynı anda iyileştirir.

Şeffaflık gereken logolarımı da WebP yapmalı mıyım?#

Evet, WebP şeffaflığı (alpha kanalını) tıpkı PNG gibi destekler ve genellikle çok daha küçük dosya üretir. Keskin kenarlı logolar ve ikonlar için WebP'nin kayıpsız modunu kullanabilirsiniz; bu, PNG'nin şeffaflığını korurken dosyayı belirgin biçimde küçültür. Yalnızca çok eski tarayıcı desteği kritikse yanına bir PNG geri düşme kopyası bırakmanız yeterlidir.

Kapanış#

Görsel optimizasyonu, WordPress performansında en az emekle en çok kazandıran alandır: doğru boyut, modern format ve dengeli bir sıkıştırma üçlüsünü uyguladığınızda sayfa ağırlığınızın yarısından fazlasını, görsel kalitesinden ödün vermeden geri kazanabilirsiniz. Yüklemeden önce elle boyutlandırma alışkanlığını edinin, geri kalan tekrarlayan işi güvenilir bir eklentiye devredin ve değişikliklerinizi her zaman ölçerek doğrulayın.

Bütün bu iyileştirmelerin oturacağı sağlam bir zemin de en az optimizasyonun kendisi kadar önemlidir. WebP dönüşümünü ve modern önbellek başlıklarını sunucu düzeyinde destekleyen, NVMe diskli bir WordPress hosting altyapısıyla işe başlayabilir; büyüyen bir görsel arşiviniz varsa kaynakları size ayrılmış bir VDS ile daha rahat nefes alabilirsiniz. Sitenizi taşırken görsellerinizin ve ayarlarınızın kaybolmadan gelmesini istiyorsanız site taşıma hizmetimiz bu süreci sizin yerinize üstlenir. Hızlı açılan, hafif bir site hem ziyaretçilerinizi hem de arama motorlarını memnun eder — ve bu, uzun vadede en değerli yatırımlarınızdan biridir.