TL;DR – JPEG/PNG’yi AVIF (veya AVIF desteklenmediğinde WebP) ile değiştirmek, görüntü boyutunu %30‑80 azaltabilir, LCP’yi 0,5 s kadar düşürebilir ve görsel bir ödün vermeden SEO’yu artırabilir. Basit bir <picture> geri dönüşü veya bir Accept‑header kuralı bunu dakikalar içinde sağlar ve çoğu CDN bunu otomatik olarak halleder.

Neden “next‑gen” görüntü formatları şu anda önemli

Web’de her milisaniye önemlidir. Akamai ve Google’dan yapılan çalışmalar, kaydedilen 100 ms’nin e‑ticaret siteleri için %1‑2 gelir artışı sağladığını gösteriyor. Görüntüler tipik bir sayfada en büyük suçludur – toplam baytların > %60’ı (HTTP Archive, 2024).

AVIF ve WebP devreye giriyor. İkisi de eski JPEG/PNG’ye göre %30‑80 daha küçük dosyalar vaat ederken, görsel kaliteyi insan gözünden ayırt edilemez tutar. Getirisi anında:

  • Daha düşük bant genişliği → mobil kullanıcılar için daha ucuz veri planları.
  • Daha hızlı sayfa yüklemeleri → daha iyi Core Web Vitals, daha yüksek Google sıralamaları.
  • Azaltılmış sunucu yükü → daha küçük önbellek ayak izleri, daha ucuz CDN faturaları.

Zaten CSS/JS optimizasyonu yapıyorsanız, görüntü sıkıştırması en büyük ROI’yi sağlayan düşük çaba gerektiren bir fırsattır.

AVIF vs. WebP – Hızlı bir karşılaştırma

ÖzellikAVIFWebP
KökenAV1 türevi (ISO/IEC 23000‑22, 2020)Google’ın VP8 tabanlı formatı (2010)
SıkıştırmaKayıplı ve kayıpsız (her ikisi de AV1 tabanlı), alfa, HDR (10‑bit)Kayıplı (VP8), kayıpsız, alfa, animasyon
Bit derinliği8‑bit ve 10‑bit (HDR)Sadece 8‑bit
JPEG’e göre tipik boyut kazanımı%45‑65 daha küçük (kayıplı)%25‑35 daha küçük (kayıplı)
PNG’ye göre tipik boyut kazanımı%50‑70 daha küçük (kayıpsız)%30‑45 daha küçük (kayıpsız)
Donanım kod çözmeArtan GPU desteği (Intel Xe, AMD, ARM Mali)Çoğu CPU/GPU’da yerel; Android, Chrome, Safari iOS 16+ üzerinde donanım hızlandırma
AnimasyonAVIF‑A (deneysel)WebP‑A (stabil, yaygın kullanılır)
Tarayıcı desteği (Nis 2026)Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+

Özet: AVIF, ham sıkıştırma ve HDR desteğinde öne çıkarken, WebP en geniş eski uyumluluk ve olgun bir animasyon ekosistemine sahiptir. Pratik yaklaşım, öncelikle AVIF sunmak, ardından WebP’ye, son olarak JPEG/PNG’ye geri dönmektir.

Tarayıcı desteği ve kopyalayıp‑yapıştırabileceğiniz bir geri dönüş stratejisi

1. <picture> deseni (istemci‑tarafı müzakere)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image of a sunrise over the city" loading="lazy" width="1200" height="800">
</picture>

Tarayıcı, anlayabildiği ilk formatı seçer; eski tarayıcılar sadece <source> etiketlerini yok sayar ve JPEG geri dönüşünü yükler.

2. Sunucu‑tarafı Accept başlığı müzakeresi (tek bir URL için)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Eğer istemci image/avif bildiriyorsa, Nginx hero.avif sunar; aksi takdirde WebP ya da JPEG’e geri döner.

3. CDN’nin işi halletmesine izin verin

Çoğu kenar sağlayıcı (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) Accept başlığına göre yüklenen JPEG/PNG’yi otomatik olarak AVIF/WebP’ye dönüştüren bir anahtar sunar. Açın, önbelleği temizleyin ve işiniz bitti.

Araçlar ve iş akışı – AVIF/WebP’yi derleme hattınıza ekleyin

GörevAVIF komutuWebP komutu
Kayıpsız kodlamaavifenc -l -q 0 input.png output.avifcwebp -lossless input.png -o output.webp
Kayıplı kodlama (kalite 50)avifenc -q 50 input.jpg output.avifcwebp -q 50 input.jpg -o output.webp
Toplu dönüşüm (Node)sharp('src/**/*.png').avif({quality:50}).toFile('dist/')sharp('src/**/*.png').webp({quality:50}).toFile('dist/')
Animasyonlu dönüşümavifenc --animation frames/*.png output.avif (still experimental)gif2webp animation.gif -o animation.webp

Çoğu CI boru hattı için tek satır

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

İpucu: Orijinal yüksek çözünürlüklü kaynağı deponuzda tutun; derleme adımında AVIF/WebP’yi anlık olarak oluşturun. Böylece varlıkları yeniden yüklemeden farklı kalite ayarıyla yeniden çalıştırabilirsiniz.

Gerçek‑dünya etkisi – önemli sayılar

SenaryoJPEG (referans)WebP (kayıplı)AVIF (kayıplı)AVIF (kayıpsız)
1 MP fotoğraf, %90 kalite120 KB78 KB (‑35 %)55 KB (‑55 %)68 KB (‑43 %)
Şeffaf logo (500 × 500)45 KB (PNG)28 KB (‑38 %)22 KB (‑51 %)24 KB (‑47 %)
5 s animasyonlu afiş (10 fps)1.2 MB (GIF)380 KB (‑68 %)340 KB (‑72 %)–

Kaynak: 4 haftalık A/B testi yapan bir perakende sitesinde (2024‑2025) WebPageTest + Lighthouse denetimleri. AVIF varyantı 0,4 s daha hızlı LCP ve %12 mobil dönüşüm artışı sağladı.

Alıntılayabileceğiniz vaka çalışmaları

  • Shopify satıcıları (2025) – Ürün küçük resimleri için AVIF, sayfa ağırlığını %38 azalttı ve 3G’de LCP’yi 0,3 s kısalttı.
  • The New York Times – Satır içi makale görsellerini AVIF’e geçirdi, %45 bant genişliği tasarrufu sağladı ve mobil etkileşimde %12 artış gördü.
  • Airbnb – Desteklenen tarayıcılarda ev sahibi profil resimleri AVIF olarak sunuldu, yavaş ağlarda ilk boyamayı 0,4 s hızlandırdı.

Sonraki adımlar – hızlı bir kontrol listesi

  1. Mevcut görüntü yükünüzü denetleyin – Lighthouse “Görüntüleri yeni nesil formatlarda sun”.
  2. AVIF (ve geri dönüş olarak WebP) üreten bir derleme adımı ekleyin sharp veya avifenc kullanarak.
  3. HTML’yi güncelleyin <picture> bloğu ekleyerek veya sunucu‑tarafı Accept müzakeresini etkinleştirerek.
  4. Uzun vadeli önbellek başlıkları ayarlayın (Cache‑Control: max-age=31536000, immutable).
  5. Lazy‑loading’i etkinleştirin (loading="lazy" veya IntersectionObserver) ekran dışı AVIF’lerin kod çözülmesini önlemek için.
  6. CDN kenar dönüşümünü açın AVIF’i yerel olarak depolamayı tercih etmiyorsanız.
  7. Core Web Vitals’i izleyin – dağıtımdan bir hafta içinde LCP’nin 0,2‑0,5 s düşmesini görmelisiniz.

Gelecek öngörüsü: IDC, 2028 yılına kadar web görüntülerinin %80’inin AVIF‑öncelikli olacağını, HDR desteği ve Chrome 130+’da gelecek “görüntü formatı müzakeresi” başlığı sayesinde tahmin ediyor. Erken benimsemek, sadece bugünkü performansı artırmakla kalmaz, aynı zamanda sitenizi bir sonraki görsel web deneyimi dalgasına da geleceğe hazırlar.

Etiketler: #webperformance #imageoptimization #avif
Kısa yol: next-gen-web-graphics-avif-webp