AVIF ve WebP ile Site Hızını Artırma: Tam Kılavuz

Fri, 10 Apr 2026 00:00:00 +0000

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 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

Özellik	AVIF	WebP
Köken	AV1 türevi (ISO/IEC 23000‑22, 2020)	Google’ın VP8 tabanlı formatı (2010)
Sıkıştırma	Kayıplı ve kayıpsız (her ikisi de AV1 tabanlı), alfa, HDR (10‑bit)	Kayıplı (VP8), kayıpsız, alfa, animasyon
Bit derinliği	8‑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 çözme	Artan 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
Animasyon	AVIF‑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. 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 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örev	AVIF komutu	WebP komutu
Kayıpsız kodlama	`avifenc -l -q 0 input.png output.avif`	`cwebp -lossless input.png -o output.webp`
Kayıplı kodlama (kalite 50)	`avifenc -q 50 input.jpg output.avif`	`cwebp -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üşüm	`avifenc --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

Senaryo	JPEG (referans)	WebP (kayıplı)	AVIF (kayıplı)	AVIF (kayıpsız)
1 MP fotoğraf, %90 kalite	120 KB	78 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

Mevcut görüntü yükünüzü denetleyin – Lighthouse “Görüntüleri yeni nesil formatlarda sun”.
AVIF (ve geri dönüş olarak WebP) üreten bir derleme adımı ekleyin sharp veya avifenc kullanarak.
HTML’yi güncelleyin bloğu ekleyerek veya sunucu‑tarafı Accept müzakeresini etkinleştirerek.
Uzun vadeli önbellek başlıkları ayarlayın (Cache‑Control: max-age=31536000, immutable).
Lazy‑loading’i etkinleştirin (loading="lazy" veya IntersectionObserver) ekran dışı AVIF’lerin kod çözülmesini önlemek için.
CDN kenar dönüşümünü açın AVIF’i yerel olarak depolamayı tercih etmiyorsanız.
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

next-gen-web-graphics-avif-webp on File Format Blog