Kısa cevap: WebP ve AVIF, web sayfalarında görsel veri miktarını azaltmak için kullanılabilen modern biçimlerdir. Sıkıştırma başarımı, görselin türüne ve seçilen kodlayıcı ayarlarına göre değişir. AVIF her durumda mutlaka en küçük dosyayı üretmez; WebP de her görselde JPEG’den iyi sonuç vermeyebilir. En doğru seçim, hedef cihazlarda görüntü kalitesini ve gerçek dosya boyutunu karşılaştırarak yapılır.
JPEG, PNG, WebP ve AVIF karşılaştırması
| Biçim | Yaygın kullanım | Kontrol edilmesi gereken |
|---|---|---|
| JPEG | Fotoğraf ve geniş destek | Sıkıştırma sonrası bozulma, dosya boyutu |
| PNG | Keskin çizimler, saydamlık | Fotoğraflarda aşırı büyük dosya oluşması |
| WebP | Fotoğraf ve saydam görseller | Çıktı kalitesi, uygun geri dönüş biçimi |
| AVIF | Uyumlu tarayıcılarda sıkıştırılmış görseller | Kodlama maliyeti, kalite ve destek senaryosu |
Örneğin düz renkli küçük bir ikon için basit bir SVG uygun olabilirken, büyük bir fotoğraf için WebP veya AVIF denemesi anlamlıdır. Fotoğrafı yalnızca dosya uzantısını değiştirerek yeniden adlandırmak gerçek biçim dönüşümü değildir.
Görseller neden yalnızca format değiştirerek hızlanmaz?
1200 piksel genişliğinde görüntülenen bir alan için 6000 piksel boyutunda dosya indirmek, sıkıştırma yapılsa bile gereksiz veri aktarabilir. Aynı zamanda görselin tarayıcıda kapladığı alan önceden bilinmiyorsa CLS oluşabilir. Bu nedenle üç karar birlikte alınmalıdır: doğru boyut, doğru biçim ve doğru yükleme önceliği.
HTML ile yedek biçim sunma örneği
<picture> öğesi tarayıcıya desteklediği kaynağı seçme fırsatı verir. En sonda bir img bulunur. Aşağıdaki örnek öğretim amaçlıdır; dosyaların sunucuda gerçekten var olması gerekir:
<picture>
<source srcset="/images/kapak.avif" type="image/avif">
<source srcset="/images/kapak.webp" type="image/webp">
<img src="/images/kapak.jpg" width="1200" height="675"
alt="Örnek web sayfası kapağı">
</picture>Bu düzen aynı görselin üç ayrı dosyasını sunmayı gerektirir. Çok sayıda dönüşüm dosyasının sunucu depolaması ve içerik yönetimi maliyeti de hesaba katılmalıdır.
Responsive görsellerde srcset ne işe yarar?
srcset ve sizes, tarayıcının ekran ve yerleşime göre uygun çözünürlükte dosyayı seçmesine yardımcı olur. Örneğin mobil ekranda 400 piksel genişlikte gösterilen bir görselin her kullanıcıya 2000 piksel sürümünü göndermek gereksiz olabilir. Ancak retina ekranlar ve gerçek yerleşim boyutu hesaba katılmalıdır.
LCP görseli ile ekran altı görseller aynı şekilde mi yüklenir?
Genellikle hayır. İlk ekranda görünen, LCP adayı olan büyük kapak görselini gereksiz yere loading="lazy" ile ertelemek yüklemeyi geciktirebilir. Ekran altı görsellerde tembel yükleme veri tasarrufu sağlayabilir. Öncelik kararı gerçek sayfa ölçümüne göre verilir. LCP rehberi ve CLS rehberi birlikte incelenebilir.
WordPress görselleri için güvenli uygulama sırası
- Mevcut görsel kitaplığı ve dosyaları yedekleyin.
- En çok görüntülenen veya LCP’yi etkileyen örnek sayfaları belirleyin.
- İki ya da üç görsel üzerinde farklı sıkıştırma düzeylerini karşılaştırın.
- Mobil ekranda görünen kaliteyi ve dosya aktarımını ölçün.
- Tema, önbellek, CDN ve dönüşüm eklentilerinin aynı görseli çift işlemediğini doğrulayın.
- Kırık görsel bağlantısı olmadığını ve alt metinlerin korunduğunu test edin.
- Tüm siteye yaymadan önce küçük pilot grubun sonuçlarını inceleyin.
WebP ve AVIF seçiminde küçük bir pilot test yapın
Tek bir görselin dönüşüm sonucu tüm siteye genellenmemelidir. Bir fotoğraf, bir metin içeren grafik ve bir saydam görsel seçin. Aynı kaynak görseller için farklı biçimler üretip hem aktarılan dosya boyutunu hem telefon ekranındaki görünür kaliteyi karşılaştırın.
| Örnek görsel | Kontrol | Karar |
|---|---|---|
| Fotoğraf | Dosya boyutu, detay kaybı ve yükleme önceliği | En dengeli çıktıyı seçin. |
| Üzerinde yazı olan grafik | Küçük metnin keskinliği ve sıkıştırma izi | Okunabilirliği koruyun. |
| Saydam görsel | Şeffaf kenarlar ve farklı arka planlarda görünüm | Bozulma varsa ayarı değiştirin. |
Ölçümü tarayıcı ağ panelinde gerçek aktarılan dosyalar üzerinden yapın; yalnız dönüştürme aracındaki tahmini tasarruf oranına güvenmeyin. LCP adayı kapak görseli ile ekran altındaki dekoratif görseli farklı yükleme öncelikleriyle değerlendirin. Önce küçük bir grupta test edip kırık bağlantı veya görsel kalite sorunu yoksa kalan sayfalara geçin.
Sık sorulan sorular
AVIF her zaman WebP’den daha mı küçüktür?
Hayır. Görsel içeriği ve sıkıştırma ayarları karşılaştırmayı değiştirebilir.
WebP yüklemek SEO sıralamasını garanti eder mi?
Hayır. İyi görsel performansı deneyimi iyileştirebilir; sıralama tek bir dosya biçimine bağlı değildir.