WebP ve AVIF ile Görsel Optimizasyonu; Boyut Küçültme İçin Pratik Rehber

TTFB'niz iyi ama sayfa hâlâ 4 saniyede mi yükleniyor?

Hosting değiştirdiniz, önbellek aktif, hatta CDN bile aldınız. Ama PageSpeed Insights hâlâ aynı 60 puanı gösteriyor ve Lighthouse raporu "Properly size images" diyor. Sorun sunucuda değil; PNG veya eski JPEG formatında sunucuda duran görsellerde. Mobil ile çekilmiş 2 MB'lık bir JPEG, WebP'ye dönüştürüldüğünde 150 KB'a düşer. Sadece bu değişiklik, İran mobil internetinde sayfa yükleme süresini 4 saniyeden 1.5 saniyeye indirir.

Bu makale, şu anda bir sitesi olan ve bunu tam olarak hangi komutla, hangi formatta ve hangi HTML yapısıyla yapacağını bilmek isteyenler içindir. Teori yok, tarihçe yok.

1403 yılında tarayıcı desteğinin gerçek durumu

WebP, 2020'den beri tüm modern tarayıcılarda desteklenmektedir. Chrome, Firefox, Safari, Edge ve hatta Android mobil tarayıcılar. AVIF ise farklı bir hikâye. Safari, AVIF'i 16.4 sürümünden itibaren (Mart 2023) destekliyor. Bu, iOS 15'li iPhone 8 kullanan birinin AVIF'i göremeyeceği anlamına gelir.

İran'daki gerçek tarayıcı kullanım istatistiklerinizi kontrol edin. Eski Safari veya eski WebView tabanlı tarayıcıların sitenizdeki payı %5'in üzerindeyse, yalnızca AVIF sunamazsınız. İşte burada hata yapıyorlar: Birçok kişi Chrome'un AVIF'i gösterdiğini görür, sonra tüm siteyi AVIF ile yeniden yazar ve bir ay sonra iPhone kullanıcısı arayıp "sitedeki görseller gelmiyor" der. Belirti şudur: Görsel tamamen yoktur, kalitesi düşük değildir. Eski tarayıcı formatı hiç tanımaz ve hiçbir şey render etmez.

Çözüm, <picture> etiketidir. Sadece <img src="image.avif"> koymak değil.

AVIF ve WebP'yi aynı anda sunmak için doğru picture etiketi yapısı

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="görsel açıklaması" width="800" height="600" loading="lazy">
</picture>

Tarayıcı tanıdığı ilk <source> etiketini seçer. Hiçbirini tanımazsa <img> etiketine geri döner. Bu, Chrome kullanıcısının AVIF, Firefox kullanıcısının WebP ve eski Safari kullanıcısının orijinal JPEG alacağı anlamına gelir. Kimse bozuk bir şey görmez.

Önemli bir not: width ve height değerlerini mutlaka <img> etiketine koyun. Bu ikisi olmadan tarayıcı, görselin alanını yüklemeden önce bilemez ve CLS (Cumulative Layout Shift) artar. Bu sayı, Core Web Vitals raporunuzda kaydedilir.

Gerçek boyut karşılaştırması: WebP, AVIF ve JPEG

Aşağıdaki sayılar, 1200×800 piksel boyutlarında ve %80 kalitede bir ürün fotoğrafı üzerinde yapılan gerçek bir testten alınmıştır:

AVIF, WebP'nin neredeyse yarısı kadar boyut sunar, ancak bir maliyeti vardır: dönüştürme süresi. 10 bin görsellik bir arşiviniz varsa, hepsini normal bir sunucu CPU'su ile AVIF'e dönüştürmek 8-10 saat sürebilir. WebP ise aynı donanımla 2 saatten kısa sürede biter.

Metin veya logo içeren görselleri bu iki formattan hiçbiriyle dönüştürmeyin. Metin içeren grafikler için PNG hâlâ en iyisidir. Her iki formatın sıkıştırma algoritması, metnin keskin kenarlarında artefakt oluşturur ve sonuç çirkin olur.

cwebp ve avifenc ile kesin dönüştürme komutları

Google'ın WebP için resmi aracı cwebp'dir. Ubuntu'da apt install webp ile kurulur. Temel komut:

cwebp -q 80 input.jpg -o output.webp

-q 80 bayrağı kaliteyi belirtir. Ürün fotoğrafları için 75-85 güvenli aralıktır. 70'in altında, insan cildinde veya gradyan gökyüzünde bantlanma (renk şeritleri) görürsünüz.

AVIF için avifenc aracı libavif projesindendir. Kurulum apt install avifenc veya kaynaktan derleme ile yapılır. Komut:

avifenc --min 20 --max 40 --speed 6 input.jpg -o output.avif

--speed 6 bayrağı hız ve kalite arasındaki dengeyi sağlar. Hız 10 çok hızlıdır ancak kalite düşer. Hız 2 mükemmel kalite verir ancak tek bir görsel için 5 saniye sürer. Toplu üretim için 6-8 hızını öneririm.

PHP ile çalışıyorsanız ve komut satırı aracı kurmak istemiyorsanız, imagick uzantısı 6.7.0 sürümünden itibaren WebP ile çalışır. AVIF, ImageMagick'te 7.0.27 sürümünden itibaren desteklenir, ancak paylaşımlı hosting kullanıyorsanız muhtemelen bu sürüme sahip değilsiniz. php -m | grep imagick ile kontrol edin.

WordPress ve Laravel'de dönüştürme otomasyonu

WordPress'te ShortPixel veya Imagify gibi optimizasyon eklentileri bunu otomatik olarak yapar. Ancak başka bir eklenti kurmak istemiyorsanız, basit bir hook ile yüklenen görselleri dönüştürebilirsiniz:

add_filter('wp_handle_upload', function($upload) {
    if (strpos($upload['type'], 'image/') !== 0) return $upload;
    $path = $upload['file'];
    $webp = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $path);
    exec("cwebp -q 80 " . escapeshellarg($path) . " -o " . escapeshellarg($webp));
    return $upload;
});

Bu kod basittir ve olası hataları yönetmez. Üretimde, exec komutunun kullanılabilir olduğunu kontrol etmeli ve hata çıktısını loglamalısınız.

Laravel'de, spatie/laravel-medialibrary paketi 10. sürümden itibaren dahili olarak WebP üretir. Sadece config'de çıktı formatını ayarlamanız yeterlidir.

Responsive görseller: sadece format yeterli değil

Format dönüştürme işin yarısıdır. 2000 piksellik bir görseli 360 piksellik bir mobil ekrana sunarsanız, yine 5 kat fazla boyut aktarırsınız. srcset ile sizes kombinasyonu bunu çözer:

<img srcset="image-360.webp 360w,
             image-768.webp 768w,
             image-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="image-1200.webp" alt="açıklama">

Tarayıcı, viewport genişliğine ve piksel yoğunluğuna göre en uygun sürümü seçer. 360 piksellik ekrana sahip mobil kullanıcı, 1200 piksellik sürümü değil, 360 piksellik sürümü alır.

İşte burada hata yapıyorlar: Birçok kişi sadece srcset koyar ama sizes etiketini unutur. sizes olmadan tarayıcı, görselin viewport'un tüm genişliğini kapladığını varsayar ve bu nedenle her zaman en büyük sürümü seçer. Sonuç: Hiçbir tasarruf sağlamazsınız ve etiketin çalışmadığını düşünürsünüz.

Sonucu ölçme: Hangi sayıyı görmelisiniz

Değişiklikleri uyguladıktan sonra, SEO ve webmaster araçları ile site hızınızı tekrar test edin. Görmeniz gereken sayı: Ana sayfa görsellerinin toplam ağırlığı 500 KB'ın altında olmalıdır. 1 MB'ın üzerindeyse, hâlâ bir yerde işi doğru yapmamışsınız demektir.

Ayrıca PageSpeed Insights'ta LCP (Largest Contentful Paint) metriği 2.5 saniyenin altında olmalıdır. Sayfanın ana görseli (genellikle hero veya içeriğin ilk görseli) yeni formatta sunulursa, bu sayı genellikle 0.5 ila 1 saniye düşer.

Tarayıcınızın gerçekten yeni formatı alıp almadığını kontrol etmek için Chrome geliştirici konsolunu (F12) açın, Network sekmesine bakın ve görsele tıklayın. Dosya türü image/avif veya image/webp ise iş doğru demektir.

Eski görsellerle ne yapmalı? Geçiş stratejisi

Siteniz 5 yaşındaysa ve arşivde 20 bin görsel varsa, hepsini bir gecede dönüştürmek mümkün değildir. Önceliklendirin:

1. Ana sayfa ve en çok satan açılış sayfalarının görsellerini önce dönüştürün. Bunlar en çok ziyaret edilenlerdir.
2. Yüksek trafikli blog yazılarının görsellerini ikinci olarak dönüştürün.
3. Geri kalanını bir cron job ile arka planda, günde 500 görsel olacak şekilde dönüştürün.

Toplu dönüştürme için aşağıdaki scripti find ve xargs ile çalıştırın:

find /var/www/html/wp-content/uploads -name "*.jpg" -mtime +30 | xargs -P 4 -I {} sh -c 'cwebp -q 80 "$1" -o "${1%.jpg}.webp"' _ {}

-P 4 bayrağı dört paralel işlem çalıştırır. Sunucu CPU'su zayıfsa, web sitesinin yavaşlamaması için bu sayıyı 2'ye düşürün.

Manuel geçiş yerine, tüm bu süreci hem formatları doğru sunacak hem de URL yapısını ve indekslemeyi yönetecek bir ekibe devretmeyi tercih ederseniz, SEO hizmetleri tam olarak bu senaryo için tasarlanmıştır. Ancak teknik ekibiniz varsa, bu makalede anlatılan manuel yol tamamen uygulanabilir.

Görseller ve SEO: Google'da ne değişir

Google, 2019'dan beri WebP'yi görsel arama sonuçlarında indekslediğini açıkladı. AVIF de 2021'den itibaren bu listeye eklendi. Ancak önemli nokta: Google, formatı doğrudan bir sıralama sinyali olarak kabul etmez. Önemli olan, formatın etkilediği sayfa yükleme hızıdır.

Teknik bir not: WebP görselini eski JPEG dosya adıyla yüklerseniz (örneğin, aslında WebP olan product.jpg), Google kafası karışabilir. Dosya adını değiştirmek veya picture etiketini kullanmak daha iyidir; böylece hem tarayıcı hem de Google botu doğru formatı görür.

Ayrıca, yeni görseller için alternatif metin (alt) yazın. Bu metin hem erişilebilirlik hem de Google'da görsel indeksleme için gereklidir. Görselin içeriğini doğru tanımlayan tam bir cümle olmalı, üç tekrarlayan kelime değil.

Sıkça sorulan sorular

WebP görsel kalitesini düşürür mü?

%80 kalitede, orijinal JPEG ile fark neredeyse fark edilmez. %70 kalitede, dikkatli bakarsanız gradyan alanlarda (örneğin gökyüzü) bantlanma görürsünüz. Ürün fotoğrafları için %80 kalite güvenli bir seçimdir. Kalitenin sizin için kritik olduğu sanatsal fotoğraflar için %90 koyun ve yine de nihai boyut JPEG'den daha küçük olacaktır.

AVIF, daha uzun dönüştürme süresine değer mi?

Siteniz görsel odaklıysa (ürün mağazası, çok görselli haber portalı) ve yüksek trafiğe sahipse, evet. Görsel boyutunun yarıya inmesi, bant genişliği maliyetinde belirgin bir düşüş ve LCP iyileşmesi anlamına gelir. Ancak küçük bir siteniz ve az sayıda görseliniz varsa, WebP yeterlidir ve iki format sunmanın karmaşıklığına gerek yoktur.

Kullanıcımın tarayıcısının AVIF destekleyip desteklemediğini nasıl anlarım?

picture etiketiyle artık bilmenize gerek yok. Tarayıcı kendisi karar verir. AVIF'i tanıyorsa onu alır. Tanımıyorsa WebP veya JPEG'e geri döner. Bu işi siz değil, tarayıcı yapar.

Sitenin eski görsellerini WebP'ye dönüştürmek SEO'yu olumsuz etkiler mi?

Hayır, görsel URL'sini değiştirmez ve yalnızca dosya formatını değiştirirseniz, Google aynı URL'yi görür ve önceki indeks korunur. URL'yi değiştirdiyseniz, link değerinin kaybolmaması için eski adresten yeniye mutlaka 301 yönlendirmesi koyun. İndeksleme durumunu ve alan adının teknik sağlığını kontrol etmek için alan adı ve DNS teknik kontrolü kullanabilirsiniz.