Görsel Optimizasyonu: WebP ve AVIF ile Sitenizi Hızlandırma

Görsel optimizasyonu, bir siteyi hızlandırmanın en yüksek getirili adımıdır. Sebebi basit: görseller sayfa ağırlığının çoğunu oluşturur ve kullanıcının “sayfa açıldı” dediği an (LCP) genellikle bir görselin yüklenmesiyle gelir.

Bu rehberde görsel optimizasyonunu uçtan uca ele alıyorum. Modern formatlardan (WebP ve AVIF) doğru boyutlandırmaya, lazy loading’in doğru kullanımından CLS önlemeye ve WordPress’te pratik uygulamaya kadar her adımı işliyorum. Bu çalışma, WordPress site hızı ana rehberinde özetlediğim katmanlardan en getirili olanının derinlemesine uygulamasıdır.

Görsel Optimizasyonu Neden En Yüksek Getirili İştir?

Bir web sayfasını açtığınızda inen verinin çoğu metin değil, görseldir. Tipik bir sayfada görseller toplam ağırlığın yarısından fazlasını, bazı e-ticaret sayfalarında dörtte üçünü oluşturur.

Bunun hız üzerindeki etkisi doğrudandır. Optimize edilmemiş tek bir hero görseli LCP’yi iki saniye geciktirebilir. LCP, Google’ın sıralama sinyali olarak kullandığı Core Web Vitals metriklerinden biridir ve neredeyse her zaman bir görsel öğedir.

Yani görsel optimizasyonu iki cephede birden kazandırır: sayfa fiziksel olarak hızlanır ve Core Web Vitals skoru yükselir. Üstelik bu çalışma, eklenti kurmak veya sunucu değiştirmek kadar maliyetli değildir; çoğu zaman mevcut görselleri doğru formata çevirmek ve doğru boyutlandırmak yeterlidir.

Görsel Formatları: JPEG, PNG, WebP ve AVIF

Doğru formatı seçmek, optimizasyonun ilk adımıdır. Her formatın kendine göre bir kullanım alanı ve sınırı vardır.

Eski Formatlar: JPEG ve PNG

JPEG, fotoğraflar için uzun süre standart olmuş kayıplı bir formattır. İyi sıkıştırır ama şeffaflık (transparan arka plan) desteklemez. PNG ise şeffaflık sunar ve kaliteyi korur, fakat dosya boyutu yüksektir. İkisi de modern alternatiflerin yanında artık verimsiz kalır.

WebP

WebP, Google tarafından geliştirilen modern bir formattır. Aynı görsel kalitesinde JPEG’e göre belirgin şekilde küçük dosyalar üretir; tipik olarak üçte bir oranında tasarruf sağlar. Hem kayıplı hem kayıpsız sıkıştırmayı, şeffaflığı ve animasyonu destekler.

En büyük avantajı yaygın tarayıcı desteğidir. Chrome, Firefox, Edge, Opera ve Safari’nin güncel sürümleri WebP’yi sorunsuz görüntüler. Bu yüzden bugün için WebP, çoğu site için en güvenli modern format seçimidir.

AVIF

AVIF (AV1 Image File Format), AV1 video codec’ine dayanan daha yeni bir formattır. WebP’den de ileri bir sıkıştırma verimliliği sunar; JPEG’e kıyasla yüzde 50’ye varan boyut küçültmesi sağlayabilir. Yüksek dinamik aralık (HDR) ve gelişmiş renk doğruluğu destekler.

Google, Netflix ve Apple gibi büyük şirketler AVIF’i destekler. Ancak tarayıcı desteği WebP kadar geniş değildir ve kodlama (dönüştürme) süresi daha uzundur. Chrome, Firefox ve güncel Safari AVIF görüntüler, ama eski cihazlarda sorun çıkabilir.

Format Karşılaştırma Tablosu

WebP mi AVIF mi? Pratik Karar

Bu, konuyla ilgili en çok sorulan sorudur ve cevabı “ikisini birden” şeklindedir. İkisi birbirinin rakibi değil, bir öncelik sırasının parçalarıdır.

Pratik önerim şu: WebP’yi birincil modern format olarak kullanın çünkü tarayıcı desteği neredeyse evrenseldir. AVIF’i ise özellikle ağır ve yüksek öncelikli görseller (hero görseli, büyük banner) için ekleyin. Her iki durumda da eski tarayıcılar için JPEG yedeği hazır bulundurun.

Bu katmanlı yaklaşımın doğru uygulaması <picture> etiketidir. Tarayıcı, desteklediği en iyi formatı otomatik seçer:

<picture>
  <source srcset="gorsel.avif" type="image/avif">
  <source srcset="gorsel.webp" type="image/webp">
  <img src="gorsel.jpg" width="1200" height="675" alt="Açıklayıcı metin">
</picture>

Bu yapıda AVIF destekleyen tarayıcı AVIF’i, WebP destekleyen WebP’yi, eski tarayıcı ise JPEG’i indirir. Seçim otomatik yapılır ve hiçbir kullanıcı bozuk görsel görmez. İyi haber şu ki çoğu önbellek ve optimizasyon eklentisi bu yapıyı sizin yerinize kurar; elle uğraşmanıza gerek kalmaz.

Doğru Boyutlandırma: En Sık Yapılan Hata

Format kadar önemli, belki daha da önemli olan konu boyutlandırmadır. En sık gördüğüm hata, devasa bir görseli yükleyip CSS ile küçültmektir.

Şöyle düşünün: 2000 piksel genişliğinde bir görseli CSS ile 400 piksele sıkıştırmak, tarayıcının 2000 piksellik dosyayı indirip hafızada 400 piksele ölçeklendirmesi demektir. Fazladan veri iner, gereksiz işlemci gücü harcanır ve kullanıcı bekler. Görselin görünen boyutu küçük olsa da indirilen dosya kocamandır.

Doğru yaklaşım, görseli kullanılacağı alanda ihtiyaç duyulan boyuta yakın üretmektir. Kategori sayfasında 300 piksel gösterilecek bir görseli 300 ile 400 piksel aralığında üretin, 1500 piksel değil.

Farklı Ekranlar İçin srcset

Mobil ve masaüstü için farklı boyutlar gerekiyorsa srcset kullanın. Bu özellik, tarayıcının cihaz ekranına göre en uygun boyuttaki görseli seçmesini sağlar. WordPress bunu varsayılan olarak birçok görsel için otomatik üretir:

<img src="urun-800.webp"
     srcset="urun-400.webp 400w,
             urun-800.webp 800w,
             urun-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     width="800" height="800" alt="Ürün açıklaması">

Bu yapıda telefon kullanıcısı 400 piksellik dosyayı, masaüstü kullanıcısı 800 veya 1200 piksellik dosyayı indirir. Herkese aynı büyük dosyayı göndermek yerine, cihazına uygun olanı sunarsınız.

Lazy Loading: Doğru Yerde, Yanlış Yerde

Lazy loading (tembel yükleme), ekranın altındaki görsellerin ancak kullanıcı oraya kaydırdıkça yüklenmesini sağlar. Bu, ilk yükleme yükünü azaltan çok değerli bir tekniktir. WordPress 5.5’ten beri görsellere otomatik loading="lazy" ekler.

Ama burada kritik bir istisna var. İlk ekranda görünen, yani LCP öğesi olan görsele lazy loading uygulamak zarar verir. Çünkü tarayıcı o görseli geç keşfeder ve LCP doğrudan gecikir.

Yani kural şudur: ekranın altındaki görsellere lazy loading uygulayın, ilk ekrandaki ana görsele (hero, ürün ana görseli) uygulamayın. WordPress’in otomatik davranışını bu görsel için geçersiz kılmanız gerekir.

LCP Görselini Önceliklendirin

İlk ekrandaki ana görsele lazy loading’i kaldırmakla kalmayın, ona öncelik de verin. fetchpriority="high" özniteliği tarayıcıya “bu kaynağı diğerlerinin önüne al” der ve LCP üzerinde ölçülebilir etki yaratır:

<img src="hero.webp"
     width="1600" height="900"
     fetchpriority="high"
     decoding="async"
     alt="Açıklayıcı metin">

Kritik Görseli Preload Edin

Görsel CSS arka planı olarak geliyorsa veya HTML’de geç keşfediliyorsa, tarayıcı onu bulmakta gecikir. Bu durumda <head> içine preload ekleyin:

<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high">

Yalnızca bir kaynağı preload edin. Her şeyi preload etmek, hiçbir şeyi preload etmemekle aynı sonucu verir çünkü öncelik sırası anlamsızlaşır.

CLS Önleme: width ve height Şart

Görsel optimizasyonunun görünmeyen ama kritik bir boyutu düzen kararlılığıdır. Boyutu belirtilmemiş bir görsel yüklendiğinde, altındaki içeriği aşağı iter. Kullanıcı okurken metin zıplar veya tıklamak istediği buton kayar. Bu, Cumulative Layout Shift (CLS) puanını bozar.

Çözüm basittir: her <img> etiketinde width ve height özniteliği bulunsun. Tarayıcı bu iki değerden en-boy oranını hesaplar ve görsel indirilmeden önce yerini ayırır.

CSS’te width: 100%; height: auto; kullansanız bile HTML öznitelikleri kalmalıdır. Biri düzeni, diğeri oran rezervasyonunu sağlar. Aynı mantık iframe’ler, video gömmeleri ve reklam alanları için de geçerlidir; bu konteynerlere sabit bir aspect-ratio verin.

Sıkıştırma ve Kalite Dengesi

Görsel optimizasyonunda amaç, dosyayı mümkün olduğunca küçültürken gözle fark edilir bir kalite kaybı yaşamamaktır. Bu denge, sıkıştırma oranıyla kurulur.

Somut bir örnek: geleneksel bir JPEG görsel 300 KB iken, aynı kaliteyi koruyan WebP sürümü yaklaşık 180 KB olabilir. AVIF ile bu 120 KB’ye kadar düşebilir. Yani aynı görsel, formatı değiştirerek yarı yarıya küçülür ve kullanıcı hiçbir kalite farkı hissetmez.

Sıkıştırma oranını görsel türüne göre ayarlayın. Fotoğraflarda daha agresif sıkıştırma göz için fark edilmez; ama keskin çizgiler içeren grafiklerde, logolarda veya metin içeren görsellerde aşırı sıkıştırma bozulma yaratır. Bu yüzden her görsele tek bir sıkıştırma oranı uygulamak yerine, önemli görsellerin sonucunu gözle kontrol etmek en sağlıklısıdır.

Pratik hedef şu: tek bir görselin ideal olarak 200 KB’ın altında kalması. Hero görselleri gibi büyük alanları kaplayanlar biraz daha ağır olabilir, ama küçük ürün ve içerik görselleri bu sınırın altında tutulmalıdır.

WordPress’te Pratik Uygulama

Yukarıdaki tekniklerin çoğunu elle kodlamanıza gerek yok. WordPress ekosisteminde bu işi otomatikleştiren araçlar var. Üç yaklaşım öne çıkar.

Görsel Optimizasyon Eklentileri

ShortPixel, Imagify veya Smush gibi eklentiler mevcut görselleri toplu halde WebP’ye (ve bazıları AVIF’e) dönüştürür, yeni yüklemeleri otomatik işler. Sıkıştırma oranını ayarlayabilir, orijinal dosyayı yedekte tutabilirsiniz. Küçük ve orta ölçekli siteler için en pratik çözüm budur.

Önbellek Eklentisi Üzerinden

Bazı önbellek eklentileri görsel dönüşümünü dahili yapar. Örneğin önbellek eklentileri karşılaştırmasında ele aldığım LiteSpeed Cache, JPEG ve PNG görsellerini otomatik olarak WebP’ye çevirir. Zaten bir önbellek eklentisi kullanıyorsanız, ayrı bir görsel eklentisine gerek kalmayabilir.

CDN Tabanlı Dönüşüm

Cloudinary gibi CDN tabanlı çözümler, orijinal görsele dokunmadan gerçek zamanlı dönüşüm yapar. Ziyaretçinin tarayıcısına göre en uygun formatı anında sunar. Yüksek trafikli ve çok görselli siteler (özellikle e-ticaret) için güçlü bir seçenektir.

Manuel Kontrol: Squoosh

Tek tek görselleri elle optimize etmek isterseniz, Google’ın Squoosh aracı tarayıcı üzerinden çalışır. WebP, AVIF ve diğer formatlara dönüşüm yapar, sıkıştırma öncesi ve sonrasını yan yana karşılaştırma imkânı sunar. Özellikle önemli görsellerin kalitesini gözle kontrol etmek için idealdir.

E-Ticaret İçin Özel Not

Ürün görselleri e-ticaret sitelerinde ayrı bir hassasiyet gerektirir. Tedarikçiden gelen 3000 piksel, 4 MB’lık görsellerin doğrudan yüklenmesi en sık görülen hatadır. Ayrıca varyasyonlu ürünlerde WooCommerce tüm varyasyon görsellerinin bilgisini sayfaya gömer ve bu ciddi bir yük oluşturur.

Ürün görsellerinin doğru boyutlandırılması, varyasyon görsel yükü ve kategori sayfası optimizasyonu gibi WooCommerce’e özgü konuları WooCommerce hız optimizasyonu rehberinde ayrıntılı ele aldım.

Görsel Optimizasyonunda En Sık Yapılan 5 Hata

Devraldığım sitelerde tekrar tekrar gördüğüm, görsel performansını boşa çıkaran hatalar:

1. Devasa görseli CSS ile küçültmek. 2000 piksellik görseli 400 piksel alanda göstermek, tarayıcıya koca dosyayı indirtip boşa işlem yaptırır. Görseli kullanılacağı boyutta üretin.
2. LCP görseline lazy loading uygulamak. WordPress’in otomatik lazy loading davranışı ilk ekrandaki ana görsele de uygulanırsa, LCP doğrudan gecikir. Hero görselinde bunu geçersiz kılın.
3. width ve height atlamak. Boyut belirtilmemiş görsel, yüklendiğinde içeriği iter ve CLS’yi bozar. Her img etiketinde bu iki öznitelik bulunmalıdır.
4. Orijinal büyük dosyayı sunucuda bırakmak. WooCommerce ve bazı galeri eklentileri lightbox’ta orijinal dosyayı gösterir. Yükleme öncesi maksimum boyutu sınırlamazsanız, kullanıcı 4 MB’lık orijinali indirir.
5. Her şeyi preload etmek. Preload, öncelik vermek demektir. Beş görseli birden preload ederseniz hiçbirine öncelik vermemiş olursunuz. Yalnızca tek LCP görselini preload edin.

Görsel Optimizasyonu Kontrol Listesi

Yeni bir görsel yayınlarken veya mevcut siteyi denetlerken kullandığım liste:

Sıkça Sorulan Sorular

Bu yazıları da okumak isteyebilirsiniz ...

Sağlık Turizmi Web Sitesi: Yetki, Hasta Akışı ve Ülke Stratejisi

Diş Kliniği Web Sitesi: Yerel Görünürlük ve Randevu Kurulumu

Estetik Klinik Web Sitesi: Galeri, İşlem Sayfaları ve Güven Kurulumu

Saç Ekimi Kliniği Web Sitesi: Çok Dilli ve Mevzuata Uygun Kurulum

Yazar Hakkında

Barış Dayak

2014'ten bu yana web tasarım, WordPress ve SEO & AI görünürlük alanlarında 500'den fazla işletmeye hizmet veriyorum.