Görselleri sıkıştırmak, çoğu küçük sitede hızı artırmanın en kolay ve en etkili yoludur. Telefonla çekilip olduğu gibi yüklenen birkaç megabaytlık bir fotoğraf, sayfadaki tüm metinden, stilden ve betikten daha ağır olabilir. Görseli doğru boyuta getirip WebP veya AVIF gibi modern bir biçimde kaydettiğinizde, gözle fark edilir bir kalite kaybı olmadan dosya boyutu çoğu zaman birkaç kat küçülür.

Bu rehber hangi biçimi ne zaman kullanacağınızı, kaliteyi nasıl ayarlayacağınızı ve WordPress gibi sistemlerde bu işi nasıl otomatikleştireceğinizi anlatıyor.

Görseller neden bu kadar önemli?

Bir sayfanın ilk ekranındaki en büyük öğe genellikle bir görseldir: kapak fotoğrafı, ürün resmi veya bir banner. Google'ın Core Web Vitals göstergelerinden LCP (en büyük içeriğin görünme süresi), çoğu sayfada tam olarak bu görselin yüklenme süresini ölçer. İyi sayılan değer 2,5 saniye veya altıdır.

Ağır görseller ayrıca:

  • Mobil veriyle gezen ziyaretçinin kotasını boşa harcar.
  • Yavaş bağlantılarda sayfanın parça parça açılmasına yol açar.
  • Sunucunuzun bant genişliğini ve barındırma maliyetinizi artırır.

Üç göstergenin tamamını Core Web Vitals nedir? rehberinde sade bir dille anlattık.

Biçimler: JPEG, PNG, WebP ve AVIF

Her biçimin güçlü olduğu bir alan vardır:

  • JPEG: Fotoğraflar için klasik biçim. Her yerde açılır, ama aynı kalitede modern biçimlerden daha büyüktür.
  • PNG: Kayıpsızdır; logo, ekran görüntüsü ve şeffaf arka planlı görseller için uygundur. Fotoğraflarda çok büyük dosyalar üretir.
  • WebP: Hem fotoğraf hem şeffaf görsel için kullanılabilen modern biçim. Aynı görünür kalitede JPEG ve PNG'den genellikle belirgin biçimde küçüktür ve bugün tüm yaygın tarayıcılarda desteklenir.
  • AVIF: Daha yeni bir biçim; çoğu fotoğrafta WebP'den de küçük dosya üretir. Güncel tarayıcıların büyük çoğunluğu destekler, ancak kodlaması daha yavaştır ve bazı eski cihazlarda açılmayabilir.
  • SVG: Logo ve simgeler gibi çizimler için vektör biçim. Her boyutta keskin kalır, dosya boyutu çok küçüktür.

Pratik bir kural: fotoğraflar için WebP'yi varsayılan yapın, destekleyen bir altyapınız varsa AVIF'i de ekleyin. Logo ve simgelerde SVG kullanın.

Adım 1: Görseli doğru boyuta getirin

Sıkıştırmadan önce en büyük kazanç boyuttan gelir. Telefon kameraları 4000 pikselin üzerinde genişlikte fotoğraf çeker; oysa bir blog yazısının içerik alanı çoğu zaman 800 ila 1200 piksel genişliğindedir.

  • Görseli, sayfada görüneceği en büyük genişliğe küçültün. Yüksek çözünürlüklü ekranlar için bu genişliğin bir buçuk ila iki katı yeterlidir.
  • Ürün galerisi gibi büyütülebilen görsellerde ayrı bir büyük sürüm hazırlayın, küçük resim için ise küçük bir sürüm kullanın.
  • İçerik yönetim sistemlerinin çoğu yüklenen görselden farklı boyutlarda kopyalar üretir ve tarayıcıya ekrana uygun olanı seçtirir (srcset). Bu özelliğin temanızda çalıştığından emin olun.

Adım 2: Kaliteyi ayarlayın

Sıkıştırma, dosyadaki gözün fark etmeyeceği ayrıntıları atarak boyutu küçültür. Kalite ayarı genellikle 0 ile 100 arasında bir sayıdır ve en yüksek değer gerekmez. Çoğu fotoğrafta orta-yüksek bir kalite ayarı, gözle ayırt edilemeyen bir sonuçla çok daha küçük bir dosya verir.

En doğru yöntem denemektir: aynı fotoğrafı farklı kalite ayarlarıyla kaydedin ve telefonunuzda yan yana karşılaştırın. Yüz, metin ve ince desen içeren görseller düşük kalitede ilk bozulanlardır; bunlarda ayarı biraz yüksek tutun.

Ücretsiz seçenekler:

  • Squoosh: Tarayıcıda çalışan, önce ve sonrayı yan yana gösteren ücretsiz bir araç. Görseller bilgisayarınızdan çıkmadan işlenir.
  • Görsel düzenleme programları: Çoğu güncel düzenleyici WebP olarak dışa aktarabilir.
  • Toplu dönüştürücüler: Çok sayıda görsel için komut satırı araçları veya masaüstü programları.

Adım 3: WordPress ve hazır altyapılarda otomatikleştirin

Her görseli elle işlemek yerine işi bir kez kurup unutabilirsiniz:

  • WordPress: Güncel WordPress sürümleri WebP yüklemeyi destekler. Görsel optimizasyon eklentileri, yüklediğiniz görselleri otomatik olarak sıkıştırıp WebP veya AVIF sürümlerini üretebilir. Mevcut görsel arşivini de toplu olarak dönüştürebilirler.
  • E-ticaret altyapıları: Hazır altyapıların çoğu görselleri kendi sunucularında otomatik olarak boyutlandırır ve modern biçime çevirir. Yine de yüklediğiniz orijinal dosyanın gereksiz büyük olmamasına dikkat edin.
  • CDN hizmetleri: Bazı CDN'ler görselleri ziyaretçinin tarayıcısına göre anında uygun biçime çevirir.

Hangi yolu seçerseniz seçin, eklenti eklemeden önce mevcut eklentilerinizin aynı işi zaten yapmadığını kontrol edin.

Adım 4: Yükleme davranışını doğru ayarlayın

Doğru sıkıştırılmış bir görsel bile yanlış zamanda yüklenirse sayfayı yavaşlatır:

  • Tembel yükleme (lazy loading): Sayfanın aşağısındaki görseller, ziyaretçi oraya yaklaşınca yüklensin. HTML'de görsele loading="lazy" özelliği eklemek yeterlidir; WordPress bunu birçok görsele kendiliğinden ekler.
  • İlk ekrandaki görsele tembel yükleme uygulamayın: Kapak görselini geciktirmek LCP'yi kötüleştirir.
  • Genişlik ve yükseklik verin: Görselin boyutları belirtilmezse sayfa yüklenirken içerik kayar ve CLS puanı bozulur.

Sunucu yanıt süresini, sayfa boyutunu ve sıkıştırma durumunu ölçmek için site hızı testi aracını kullanabilirsiniz. Diğer hız adımları için site hızı nasıl artırılır? rehberine bakın.

Paylaşım görselleri ve bannerlar

Sayfa içindeki görsellerin dışında iki görsel türü daha dikkat ister:

  • Paylaşım görseli (og:image): Bağlantınız WhatsApp veya sosyal medyada paylaşıldığında görünen görseldir. 1200×630 piksel önerilir; aşırı büyük bir dosya bazı uygulamalarda önizlemenin hiç görünmemesine yol açabilir. Paylaşım görseli oluşturucu ile doğru boyutta hazırlayabilir, nasıl göründüğünü meta etiketleri rehberinde anlatılan adımlarla kontrol edebilirsiniz.
  • Banner reklamlar: organikhit.io'da 468×60 banner için PNG, JPEG, GIF veya WebP kabul edilir; görsel tam 468×60 piksel ve en fazla 150 KB olmalıdır, SVG kabul edilmez. WebP biçimi bu sınırın içinde net bir banner hazırlamayı kolaylaştırır. Tasarım ipuçları için 468×60 banner tasarımı rehberine, kredi paketleri için fiyatlar bölümüne bakabilirsiniz.

Sık sorulan sorular

Tüm görsellerimi AVIF'e çevirmeli miyim?

Şart değildir. WebP, desteği ve kodlama hızı açısından bugün için güvenli bir varsayılandır. AVIF'i, altyapınız otomatik olarak üretiyor ve desteklemeyen tarayıcılara yedek bir biçim sunuyorsa ekleyin. Elle tek tek dönüştürüyorsanız WebP ile başlamak yeterli kazancı sağlar.

Sıkıştırma görselin kalitesini bozar mı?

Aşırıya kaçmadıkça hayır. Doğru boyuta getirilmiş ve orta-yüksek kaliteyle kaydedilmiş bir fotoğraf telefon ekranında orijinalinden ayırt edilmez. Sıkıştırmadan önce orijinal dosyaların bir yedeğini saklayın; böylece ileride farklı bir ayarla yeniden işleyebilirsiniz.

Görselin dosya adı ve alternatif metni SEO için önemli mi?

Evet. "IMG_4821.jpg" yerine "izmir-kombi-bakimi.webp" gibi açıklayıcı bir dosya adı ve görseli anlatan kısa bir alternatif metin (alt text), görselin anlaşılmasına ve görsel aramalarda bulunmasına yardım eder. Alternatif metin aynı zamanda görme engelli ziyaretçiler için gereklidir; anahtar kelime doldurmak yerine görseli gerçekten anlatın.

Sitenizin karnesini çıkarın