AVIF görüntüyü kabaca sıkıştırır WebP'den yüzde 20 daha küçük aynı kalitede, WebP ise birkaç kat daha hızlı kodluyor ve daha fazla yerde çalışıyor. Her ikisi de video codec'lerinden türetilen yeni nesil formatlardır: 2010'da VP8'den WebP, 2019'da daha yeni AV1'den AVIF. AVIF, HDR ve 12 bit renk desteğiyle daha güçlü bir sıkıştırıcıdır. WebP, daha geniş yazılım desteği ve daha hızlı kodlamayla pragmatik varsayılandır. Bu karşılaştırma, her formatın nereden geldiğini, sıkıştırmayı, kodlama hızını, renk derinliğini, tarayıcı desteğini, şeffaflığı ve animasyonu ve belirli bir kullanım için hangi formatın kazanacağını kapsar.

Hiçbiri doğrudan kazanamaz. AVIF en küçük dosyaları ve en geniş rengi üretir; WebP bugün daha hızlı ve daha güvenli hizmet veriyor. Pek çok site, AVIF'yi ilk sırada, WebP'yi ikinci sırada listeleyerek, JPG veya PNG geri dönüşüyle birlikte her ikisini de sunar; böylece her tarayıcı okuyabildiği en iyi formatı alır.

Her formatın nereden geldiği

Her iki format da video sıkıştırmasından alınan sabit görüntülerdir. WebP kodlamasını şuradan alır: VP82010 Google video codec'i olduğundan artık on yıldan daha eskidir ve kapsamlı bir şekilde desteklenmektedir. AVIF kodlamasını şuradan alır: AV1Üyeleri arasında Google, Netflix ve Apple'ın da bulunduğu Alliance for Open Media'nın 2019 telifsiz codec bileşeni. AV1, VP8'den bir nesil ileridedir, bu nedenle AVIF daha fazla sıkıştırır ancak aynı zamanda daha fazla bilgi işlem gücü gerektirir.

Sıkıştırma: AVIF kazanır

Sıkıştırma AVIF'i tercih eder çünkü AV1 daha yeni ve daha akıllıdır. AVIF, aynı kalitede, aynı fotoğrafta yaklaşık olarak WebP'den yüzde 20 daha küçükve JPG'den çok daha küçüktür. AVIF aynı zamanda düz renk ve degradeleri temiz bir şekilde işleyerek daha zayıf formatlarda görülen şeritlenmeyi ortadan kaldırır. Mümkün olan en küçük dosya için AVIF kazanır ve geniş pürüzsüz alanlara sahip görüntülerde boşluk büyür.

Görüntü ağırlıklı bir sitedeki tasarruf bileşikleri. WebP, görsellerinizi zaten JPG'nin üçte bir oranında altında kesiyorsa, AVIF üstte beşte bir oranında daha kırpar, böylece orijinal JPG'ye kıyasla toplam azaltma yarıya yaklaşabilir. Core Web Vitals'ta ölçülen sayfalar için bu anlamlı bir hız artışıdır.

Kodlama hızı: WebP kazanır

Kodlama, AVIF'in sıkıştırma masrafını ödediği yerdir. AV1 hesaplama açısından ağırdır, dolayısıyla AVIF, WebP'den birkaç kat daha yavaş kodlar. Bir site binlerce görüntüyü işlediğinde, bunları anında oluşturduğunda veya sınırlı sunucu kaynaklarıyla çalıştığında bu durum önemlidir. WebP, gerçek zamanlı kullanım için yeterince hızlı kodlar; bu da onun varsayılan haline gelmesinin nedenlerinden biridir. Tarayıcının görüntüyü görüntülemek için yaptığı kod çözme işlemi her ikisi için de hızlıdır, dolayısıyla ziyaretçiler her iki durumda da yavaşlama hissetmezler.

Renk derinliği ve HDR: AVIF kazandı

Renk derinliği ikisini net bir şekilde ayırıyor. AVIF'i destekler Kanal başına 12 bit'e kadar ve HDR, böylece WebP'nin yapamayacağı geniş gamlı ve yüksek dinamik aralıklı görüntüleri tutar. WebP, JPG ile aynı şekilde kanal başına 8 bit ile sınırlıdır. Fotoğrafçılık, modern geniş gamlı ekranlar ve HDR içeriği için AVIF bu ikisi arasında tek seçenektir. Standart 8 bitlik bir ekranda fark görünmez, ancak yetenekli donanımda AVIF, WebP'nin depolayamadığı renkleri gösterir.

Şeffaflık ve animasyon

Her iki format da şeffaflığı ve animasyonu kapsar, dolayısıyla burada ikisi de kazanmaz. Her biri bir taşır tam alfa kanalıBöylece her ikisinde de şeffaf bir logo görünür durumda kalır ve her ikisi de GIF'ten çok daha küçük animasyonlu klipleri destekler. AVIF'in animasyonu AV1 sayesinde daha sıkı sıkıştırılırken WebP'nin animasyonu daha hızlı üretilir. Basit bir animasyonlu grafik için her ikisi de GIF'i kesin bir şekilde yener.

Tarayıcı ve yazılım desteği: WebP kazanır

Destek WebP'nin avantajıdır. Her modern tarayıcı yıllardır WebP'yi okumaktadır ve derin bir yazılım, eklenti ve CDN kaynağı bunu yönetmektedir. AVIF desteği artık tarayıcılarda genişlediChrome, Firefox ve Safari dahil, ancak WebP'yi takip ediyor ve masaüstü düzenleyicileri, eski sistemler ve bazı CDN'ler daha da geride kalıyor. Bugün karma yazılımlarda güvenilir bir şekilde açılması gereken bir dosya için WebP daha güvenli bir bahistir.

Gerçek anlamda dosya boyutu

Gerçek rakamlar ticareti somut hale getiriyor. JPG olarak 400 KB olan bir fotoğraf, aynı kalitede WebP olarak 280 KB, AVIF olarak ise yaklaşık 220 KB olabilir. PNG olarak 120 KB olan şeffaf bir grafik, WebP olarak 80 KB, AVIF olarak 60 KB olabilir. Kesin rakamlar görüntüye bağlıdır ancak sıralama şu şekildedir: AVIF en küçük, WebP orta, eski formatlar en büyük. Ekstra yüzde 20'nin AVIF'in daha yavaş kodlamasına ve daha dar desteğine değip değmeyeceğine göre seçim yapın.

Kod çözme hızı ve ziyaretçilerin bunu nasıl hissettiği

Bir ziyaretçinin deneyimlediği şey kodlama değil kod çözmedir ve burada iki format birbirine yakındır. Bir tarayıcı bir görüntüyü görüntülediğinde, bu görüntünün kodunu çözmesi gerekir ve hem AVIF hem de WebP Sorunsuz sayfa yüklemeleri için yeterince hızlı kod çözme. AVIF'deki yoğun AV1 hesaplaması, kodlama tarafında yer alır ve her yüklendiğinde değil, görüntü oluşturulduğunda bir kez yapılır. Yani bir ziyaretçi hiçbir zaman AVIF'in kodlama maliyetini ödemez; yalnızca daha küçük indirme işleminden yararlanırlar.

Bu bölünme, her formatı nasıl dağıttığınız açısından önemlidir. AVIF'yi önceden bir derleme adımında veya CDN'de kodlayın ve sonucu önbelleğe alın. Asla her istekte kodlamayın, çünkü bu, sunucunuzun ziyaretçiye faydası olmayacak şekilde vergilendirilmesine neden olur. WebP anında kodlama yapacak kadar bağışlayıcıdır, ancak AVIF ön oluşturmayı ödüllendirir.

Geri dönüşü HTML'de oluşturma

Her iki formatın da güvenli bir şekilde sunulması, tarayıcının anladığı en iyi kaynağı seçmesine olanak tanıyan resim öğesini kullanır. Önce AVIF'yi, ikinci olarak WebP'yi ve son olarak JPG veya PNG'yi listelersiniz. Tarayıcı listeyi okur ve kodunu çözebileceği ilk format, gerisini görmezden geliyoruz. Modern bir tarayıcı AVIF'i alır, daha eski bir tarayıcı WebP'ye düşer ve eski bir tarayıcı JPG'yi alır. Hiçbir ziyaretçi bozuk bir görüntü görmez ve her ziyaretçi, yazılımının izin verdiği en küçük dosyayı alır.

Çoğu içerik yönetimi sistemi ve görüntü CDN'si bu işaretlemeyi sizin için oluşturur; böylece bir dosya yüklersiniz ve sistem, formatları ve geri dönüş zincirini oluşturur. Küçük bir site için bunu elle yapmak iyidir, ancak otomasyon yüzlerce görüntüde daha iyi ölçeklenir.

Fotoğrafçılık ve HDR için AVIF

AVIF'in renk avantajı en çok fotoğrafçılıkta önemlidir. onun 12 bit renk ve HDR desteği Modern bir kameranın geniş ton aralığını ve HDR ekranın canlı çıkışını barındırır; bunların hiçbiri WebP'de saklanamaz. Parlak gökyüzüne ve derin gölgelere sahip bir manzara, her ikisinde de AVIF olarak daha fazla ayrıntıyı korur. Geniş gamlı bir ekranda, WebP'nin keseceği doymuş kırmızılar ve yeşiller gerçek kalır.

Standart ekranlardaki günlük web grafikleri için bu avantaj görünmez çünkü 8 bitlik bir ekran ekstra aralığı gösteremez. Ancak fotoğraf siteleri, HDR içeriği ve üst düzey ekranlar için AVIF, görüntünün hakkını veren iki üründen yalnızca biridir.

AVIF'in sunucu ve araç maliyeti

AVIF'in sıkıştırması, oluşturma noktasında ücretsiz değildir. Daha yavaş kodlaması şu anlama gelir: daha yüksek CPU maliyeti ve daha uzun yapım süreleri, bir site binlerce görsel oluşturduğunda bu da eklenir. Daha eski görüntü kitaplıkları ve bazı düzenleyiciler de henüz AVIF yazamıyor, dolayısıyla araçlarınızın bunu desteklemesi gerekiyor. Buna karşılık WebP, hemen hemen her görüntü kitaplığı tarafından yönetiliyor ve hızlı bir şekilde kodlanıyor, bu da onu şimdilik düşük sürtünmeli bir seçenek haline getiriyor.

Pratik çıkarım, ekstra yüzde 20'lik boyut tasarrufunu kodlama maliyeti ve takım boşluklarına karşı tartmaktır. Her baytı optimize eden büyük bir medya operasyonu için AVIF yerini alır. Küçük bir site için WebP, hiçbir sorun yaşamadan faydanın çoğunu sağlar.

Hangi format kazanır

İkisi de her işte kazanmaz. Seç En küçük dosyalar, HDR ve geniş renk için AVIF takımınız bunu desteklediğinde ve kodlama süresi bir darboğaz olmadığında. Seç Hızlı kodlama, geniş destek ve güvenli varsayılan için WebP Bu, günümüzde daha fazla yazılımda işe yarıyor. En güçlü kurulum her ikisine de hizmet eder: Önce AVIF, ikinci olarak WebP ve son olarak JPG veya PNG geri dönüşü; böylece her ziyaretçi, tarayıcısının kodunu çözebileceği en iyi formatı alır.

Bu formatlar nasıl oluşturulur?

Modern formatlar oluşturmak, WebP için ağır araçlar gerektirmez. Bizim PNG'den WebP'ye dönüştürücü tarayıcınızda çalışır, dosyaları toplu olarak işler ve filigran eklemez. AVIF kodlaması daha zorlu olduğundan, hızlı bir tarayıcı aracı yerine genellikle bir görüntü CDN'si veya bir oluşturma adımıyla gerçekleştirilir. Çoğu site için WebP'yi şimdi oluşturmak ve AVIF'yi daha sonra CDN'niz aracılığıyla eklemek pratik yoldur.

Sık sorulan sorular

AVIF yüklendiğinde web sitemi yavaşlatır mı?

Hayır. AVIF kodunu hızlı çözer; yalnızca kodlama yavaşve kodlama, her sayfa yüklemesinde değil, görüntü oluşturulduğunda bir kez gerçekleşir. Ziyaretçiler yalnızca daha küçük indirmeleri alır.

AVIF'e WebP geri dönüşüyle nasıl hizmet verebilirim?

Resim öğesini kullanın. Önce AVIF'yi, ikinci olarak WebP'yi, son olarak JPG veya PNG'yi listeleyinve tarayıcı kodunu çözebildiği ilk biçimi yükler.

AVIF küçük bir web sitesi için buna değer mi?

Çoğunlukla henüz değil. WebP, tasarrufun çoğunu daha az sorunla sağlarAVIF'in yavaş kodlama ve araç boşlukları, küçük bir sitenin nadiren ihtiyaç duyduğu maliyeti artırdığından.

AVIF WebP'den daha mı iyi?

Sıkıştırma konusunda evet. AVIF yaklaşık yüzde 20 daha küçüktür ve HDR'yi destekler. WebP daha hızlı kodlar ve daha geniş bir desteğe sahiptir, bu nedenle günümüzde daha güvenli bir varsayılandır.

AVIF, WebP'den ne kadar küçüktür?

Etrafında Yüzde 20 daha küçük AVIF daha yeni AV1 codec bileşenini kullandığından, aynı kalitede ve JPG'den çok daha küçüktür.

AVIF'in yapımı neden daha yavaş?

Çünkü AV1 kodlaması hesaplama açısından ağırdır. AVIF, görüntüleri toplu olarak veya sınırlı sunucularda işlerken önemli olan daha iyi sıkıştırma için kodlama hızını değiştirir.

WebP HDR'yi destekliyor mu?

Hayır. WebP, kanal başına 8 bit ile sınırlıdırdolayısıyla HDR'yi veya geniş gamlı rengi depolayamaz. AVIF, 12 bit'e kadar ve HDR'yi destekler.

Hangi tarayıcılar AVIF'i destekliyor?

Chrome, Firefox ve Safari AVIF'yi destekliyorAncak benimsenme WebP'nin gerisinde kalıyor ve bazı CDN'ler ve editörler gecikiyor. Daha eski istemciler için bir WebP veya JPG yedeği sunun.

Hem AVIF hem de WebP şeffaflığı koruyor mu?

Evet. Her ikisi de tam bir alfa kanalı taşıyorböylece şeffaf bir grafik, JPG'den farklı olarak her iki formatta da şeffaf kalır.

Animasyon için AVIF mi yoksa WebP mi daha iyi?

Her ikisi de GIF'i yendi; AVIF daha sıkı sıkıştırır. AVIF animasyonu daha küçüktür, WebP'nin yapımı daha hızlıdır, bu nedenle boyutun mu yoksa kodlama hızının mı daha önemli olduğuna göre seçim yapın.

Sitem için AVIF mi yoksa WebP mi kullanmalıyım?

İkisine de servis yapın. En küçük dosya için AVIF ilk, WebP ikinci uyumluluk için, geri kalanı için bir JPG veya PNG yedeklemesi kullanın.

AVIF, WebP'nin yerini alacak mı?

Yakında değil. AVIF daha iyi sıkıştırır ancak WebP daha hızlı kodlar ve daha geniş bir desteğe sahiptiryani her ikisinin de yıllarca bir arada var olması ve birlikte hizmet etmesi muhtemeldir.

Eski tarayıcılar AVIF'i açabilir mi?

Çoğu zaman hayır. AVIF desteği WebP'den daha genç, bu nedenle eski yazılımı kullanan ziyaretçiler için JPG veya PNG yedeğini almak çok önemlidir.

AVIF ve WebP'nin her ikisi de video codec bileşenlerinden oluşturulmuş yeni nesil formatlardır, ancak AVIF yaklaşık yüzde 20 daha küçük sıkıştırır ve HDR ve 12 bit renk eklerken, WebP daha hızlı kodlar ve daha geniş bir desteğe sahiptir. Her ikisi de şeffaflığı ve animasyonu korur, bu nedenle seçim en küçük dosyayı mı yoksa en güvenli, en hızlı olanı mı istediğinize bağlıdır. Boyut için önce AVIF'yi, uyumluluk için ikinci olarak WebP'yi ve geri kalanı için JPG veya PNG yedeğini sunun. Yukarıdaki dönüştürücümüzle tarayıcınızda WebP oluşturun ve görüntü hattınız aracılığıyla AVIF'yi ekleyin.

Hızlı başvuru: AVIF veya WebP

Ulaşın AVIF Mutlak en küçük dosyayı istediğinizde, görüntünün HDR'ye veya geniş renge ihtiyacı olduğunda ve CDN'niz veya derleme adımınız her isteği yavaşlatmadan dosyayı önceden kodlayabildiğinde. Ulaşın WebP hızlı kodlama, en geniş yazılım desteği ve neredeyse her aracın halihazırda kullandığı düşük sürtünmeli varsayılan değer istediğinizde. En güçlü kurulum, biri ya da diğeri değil, her ikisidir ve sırayla sunulur: boyut için önce AVIF, erişim için ikinci olarak WebP ve son olarak JPG veya PNG geri dönüşü, böylece hiçbir ziyaretçinin bozuk bir görüntüyle kalmaması sağlanır.

AVIF'ten sonra ne gelir?

Görüntü formatları gelişmeye devam ediyor ve JPEG XL, kayıpsız JPG kod dönüştürme ile güçlü sıkıştırma vaat eden bir sonraki yarışmacıdır. Tarayıcı desteği günümüzde sınırlıdır, dolayısıyla henüz pratik bir seçim değildir. Şimdilik AVIF ve WebP dağıtılmaya değer, JPEG XL ise izlemeye değer iki yeni nesil formattır. Bir geri dönüş zinciri oluşturmak, daha sonra eski tarayıcıları bozmadan daha yeni bir format ekleyebileceğiniz anlamına gelir; bu nedenle resim öğesi yaklaşımı geleceğe yöneliktir.