AVIF ve WebP: Doğru Görsel Formatı Seçimi ve Site Hızı

AVIF, AV1 video kodeğine dayanan açık kaynaklı bir görsel formatıdır; aynı görsel kalitesinde JPEG'e göre çok daha küçük dosya üretir. WebP ise Google tarafından geliştirilen, hem kayıplı hem kayıpsız sıkıştırmayı ve şeffaflığı destekleyen bir formattır; tarayıcı desteği AVIF'ten daha geniştir.

İkisi de eski JPEG ve PNG formatlarının yerini almak için tasarlanmıştır ama birbirinin yerine geçmez. AVIF daha agresif sıkıştırma sağlar ama kodlama süresi daha uzundur; WebP daha hızlı kodlanır ve daha geniş tarayıcıda çalışır. Çoğu site ikisini birlikte, öncelik sırasıyla sunar.

Format seçimi görselin türüne bağlıdır: fotoğraf, logo, ikon ve animasyonun her biri farklı bir formatta daha iyi sonuç verir. Tek bir formatı her görsele uygulamak, bazı dosyaları gereksiz yere büyütür, bazılarında ise kaliteyi düşürür.

• Fotoğraf ve ürün görseli: AVIF öncelik, WebP yedek
• Şeffaf logo ve ikon: WebP, şeffaflığı hem kayıplı hem kayıpsız destekler
• Basit çizim, az renkli grafik: SVG, hiç bir raster formata gerek kalmadan
• Kısa animasyon: WebP'nin animasyonlu sürümü, GIF yerine

En basit yöntem picture etiketidir; tarayıcıya sırasıyla AVIF, WebP ve JPEG kaynağı sunulur, tarayıcı desteklediği ilkini seçer. Kurulum üç düzeyden birinde yapılabilir.

• Next.js kullanan bir sitede yerleşik Image bileşeni isteğe göre doğru formatı otomatik üretir, ek kurulum gerekmez
• WordPress ya da statik bir sitede sharp, squoosh-cli gibi araçlarla build sırasında AVIF ve WebP kopyaları üretilir
• CDN seviyesinde bir görsel servisi format=auto seçeneğiyle isteği yapan tarayıcıya göre formatı kendisi seçer
• Her üç yöntemde de orijinal JPEG ya da PNG yedek olarak saklanır, hiçbir tarayıcı görselsiz kalmaz

Bir dönüştürme kurulumu tamamlandıktan sonra tarayıcının geliştirici araçlarındaki ağ sekmesi hangi formatın gerçekten sunulduğunu gösterir; dosya adı ya da uzantısına bakmak yetmez, sunucunun döndürdüğü içerik türü kontrol edilmelidir. Bir zemin kaplama üreticisinin ürün kataloğu güncellendiğinde bu kontrolü kampanya öncesi bir kez yapmak, canlıya çıktıktan sonra sorunla karşılaşmaktan daha ucuza gelir.

AVIF ve WebP güncel tarayıcıların büyük çoğunluğunda çalışır ama kurumsal ağlarda kullanılan eski tarayıcı sürümleri, bazı e-posta istemcileri ya da tarayıcı içi önizlemeler bu formatları tanımayabilir. Yedek olmadan yayınlanan bir AVIF görseli bu istemcilerde hiç görünmez, kırık bir simgeye dönüşür.

MDN'in görsel format rehberi bu yüzden her yeni formatın yanında bir yedek önerir; picture etiketi ya da sunucu tarafı içerik pazarlığı bu yedeği otomatik hale getirir, elle iki kere yükleme yapmaya gerek kalmaz.

Görsel dönüştürmeyi build sürecine değil CDN'e bırakmanın avantajı, kaynak görsel değişmeden kalırken sunulan formatın tarayıcıya göre kendiliğinden seçilmesidir. Cloudflare'ın görsel optimizasyon servisleri format=auto seçeneğiyle bunu yapar; isteği yapan tarayıcı AVIF destekliyorsa AVIF, desteklemiyorsa WebP döner.

Burada dikkat edilecek nokta güncel belgeyi takip etmektir; Cloudflare 2026 içinde eski Polish servisini yeni bölgeler için kapatıp görsel yeniden boyutlandırma ve Cloudflare Images servislerine yönlendirdi. Hangi servisin kullanıldığı, AVIF desteğinin olup olmadığını doğrudan etkiler.

Bir dönüştürme kurulduktan sonra iş bitmiş sayılır ama üç noktada hâlâ hata yapılır.

• Yedeksiz AVIF yayınlamak, eski istemcide görseli tamamen kaybetmek
• Sıkıştırmayı en agresif ayarda bırakıp kaliteyi gözle kontrol etmemek
• Görselin gerçek gösterim boyutundan çok daha büyük bir kaynak yüklemek, format ne olursa olsun dosyayı şişirmek
• Format dönüşümünü yapıp görsel genişlik ve yükseklik değerlerini HTML'e yazmamak, sayfa yüklenirken içerik kaymasına yol açmak