Modern Görüntü Formatlarını Kullanma: AVIF ve WebP

Yakın zamanda, resimler, resimlerin nasıl sıkıştırılacağı, sunulacağı ve korunacağı hakkında bilmeniz gereken her şeyi içeren Addy'nin Resim Optimizasyonu kitabını yayınladık. Şimdi, Addy tarafından imzalanmış, elle yazılmış kişisel bir mesajla gönderiliyor. İçindekiler bölümüne atlayın ve kitabı hemen alın.

Görüntüler, web'deki en popüler kaynak türüdür ve genellikle en büyüğüdür. Kullanıcılar yüksek kaliteli görselleri takdir ediyor, ancak bu kahraman görsellerini, ürün fotoğraflarını ve kedi memelerini mümkün olduğunca verimli ve etkili bir şekilde sunmaya özen gösterilmesi gerekiyor.

Web Verileri için optimizasyon yapıyorsanız, web siteleri için En Büyük İçerikli Boya öğesinin ~%42'sini bu görsellerin oluşturduğunu duymak ilginizi çekebilir. Anahtar kullanıcı merkezli ölçümler genellikle sayfadaki resimlerin boyutuna, sayısına, düzenine ve yükleme önceliğine bağlıdır. Bu nedenle performans konusundaki rehberliğimizin çoğu görüntü optimizasyonu hakkında konuşuyor.

Bir tl; dr tavsiye aşağıda bulunabilir.

tl; dr

• Kayıplı, düşük kaliteli sıkıştırma kabul edilebilirse ve bant genişliği tasarrufu bir numaralı öncelikse AVIF sağlam bir ilk tercihtir. Kodlama/kod çözme hızlarının ihtiyaçlarınızı karşıladığını varsayarsak.
• WebP daha yaygın olarak desteklenir ve geniş renk gamı ​​veya metin bindirmeleri gibi gelişmiş özelliklerin gerekli olmadığı durumlarda normal görüntülerin işlenmesi için kullanılabilir.
• AVIF, PNG veya kayıpsız WebP'nin yanı sıra fotoğrafik olmayan görüntüleri sıkıştıramayabilir. WebP'den elde edilen sıkıştırma tasarrufu, yüksek doğrulukta kayıplı sıkıştırma için JPEG'den daha düşük olabilir.
• Hem AVIF hem de WebP uygun seçenekler değilse, MozJPEG (JPEG görüntülerini optimize et), OxiPNG (fotoğrafik olmayan görüntüler) veya JPEG 2000'i (kayıplı veya kayıpsız fotoğrafik görüntüler) değerlendirmeyi düşünün.
• <picture> aracılığıyla aşamalı geliştirme, tarayıcının tercih sırasına göre desteklenen ilk biçimi seçmesini sağlar. Bu uygulama, Kabul Edilen Başlık ve içerik anlaşmasının (örn. otomatik format ve kalite) en iyi görüntüyü sunabileceği görüntü CDN'leri kullanıldığında oldukça basitleştirilmiştir.

Neden Modern Formatlara İhtiyaç Duyarız?

Web'de görüntüler oluştururken aralarından seçim yapabileceğiniz oldukça geniş bir görüntü formatı yelpazesine sahibiz. Görüntü biçimleri arasındaki temel fark, her görüntü türünü kodlamak veya kodunu çözmek için kullanılan görüntü codec bileşeninin farklı olmasıdır. Bir görüntü codec bileşeni, görüntüleri belirli bir dosya türüne sıkıştırmak ve kodlamak ve ekranda görüntülemek için kodunu çözmek için kullanılan algoritmayı temsil eder.

Codec'leri Değerlendirmek

Hangi görüntü formatının size uygun olduğunu farklı parametrelere göre değerlendirebilirsiniz.

• Sıkıştırma
  Bir codec bileşeninin verimliliği, esas olarak ne kadar sıkıştırma elde edebileceğiyle ölçülebilir. Elde edilen sıkıştırma önemlidir, çünkü sıkıştırma ne kadar yüksek olursa dosya boyutu o kadar küçük ve görüntüyü ağ üzerinde aktarmak için gereken veri o kadar düşük olur. Daha küçük dosya boyutu, sayfanın ihtiyaç duyduğu görüntü kaynakları daha hızlı yüklendiğinden, sayfanın En Büyük içerikli Boya (LCP) metriğini doğrudan etkiler.
• Kalite
  İdeal olarak, sıkıştırma herhangi bir görüntü verisi kaybına neden olmamalıdır; kayıpsız olmalıdır. Bir miktar görüntü verisi kaybına neden olan ve dolayısıyla görüntünün kalitesini düşüren sıkıştırma biçimleri, kayıplı olarak bilinir. Görüntüler arasındaki yapısal benzerliği ölçmek ve kalite kaybının kabul edilebilir olup olmadığına karar vermek için DSSIM veya ssimulacra gibi araçları kullanabilirsiniz.
• Kodlama/Kod Çözme Hızı
  Karmaşık sıkıştırma algoritmaları, görüntüleri kodlamak/kodunu çözmek için daha yüksek işlem gücü gerektirebilir. Bu, kodlamanın önceden mi (statik/yapı) yoksa anında mı (istek üzerine) yapıldığına göre karmaşık olabilir. Statik görüntüler söz konusu olduğunda kodlama tek seferlik olsa da, tarayıcının görüntüleri oluşturmadan önce yine de kodunu çözmesi gerekir. Karmaşık bir kod çözme işlemi, görüntülerin oluşturulmasını yavaşlatabilir.

Sıkıştırma derecesi, görüntü kalitesi ve kod çözme hızı, web için görüntü performansını karşılaştırırken dikkate alınması gereken temel faktörlerdir. Belirli kullanım durumları, aşağıdakiler gibi diğer özellikleri destekleyen görüntü biçimleri gerektirebilir:

• Yazılım desteği: Bir görüntü formatı çok iyi performans gösterebilir ancak tarayıcılar, CDN'ler ve diğer görüntü işleme araçları onu tanımıyorsa işe yaramaz.
• Web'deki bazı görüntüler için animasyon desteği gerekebilir (örn. GIF). Ancak ideal olarak bu tür görüntüleri videolarla değiştirmelisiniz.
• Alfa Şeffaflığı: Alfa kanalını kullanarak farklı opaklık seviyelerine sahip görüntüler oluşturma yeteneği. (ör. şeffaf arka plana sahip PNG görüntüleri)
• Yüksek dinamik aralık (HDR) görüntülemeyi ve geniş renk gamını desteklemelidir.
• Görüntüleri aşamalı olarak yüklemek için aşamalı kod çözme, kullanıcıların görüntünün rafine edilmeden önce makul bir önizlemesini almalarına olanak tanır.
• Görüntünün ön planına veya arka planına efekt uygulamanızı sağlayacak derinlik haritaları.
• Birden çok örtüşen katmana sahip görüntüler, örneğin metin kaplamaları, kenarlıklar vb.

İpucu: Modern biçimlerin kalitesini, sıkıştırmasını ve ince ayarını değerlendirirken, Squoosh.app'in görsel bir yan yana karşılaştırma yapma yeteneği yardımcı olur. Yakınlaştırma, bir formatın nerede blokluluk veya kenar artifaktları sergilediğini daha iyi anlamanıza olanak tanır.

Eski Muhafızlar: JPEG ve PNG

JPEG, 25 yıldır en çok desteklenen görüntü formatıdır. Klasik JPEG kodlayıcılar nispeten zayıf sıkıştırmaya yol açarken, daha modern JPEG kodlama çabaları (MozJPEG gibi) sıkıştırmayı iyileştirir ancak modern formatlar kadar optimal değildir. JPEG aynı zamanda kayıplı bir sıkıştırma formatıdır. JPEG'ler için kod çözme hızı mükemmel olsa da, modern, göz alıcı web sitelerindeki görüntüler için gereken diğer istenen özelliklerden yoksundur. Resimlerde, animasyonda, derinlik haritalarında veya bindirmelerde şeffaflığı desteklemez.

JPEG, fotoğraflarla en iyi sonucu verirken PNG, diğer hareketsiz görüntülerin karşılığıdır. PNG kayıpsız bir formattır ve alfa şeffaflığını destekleyebilir, ancak özellikle fotoğraflar için elde edilen sıkıştırma oldukça düşüktür. Gereken görüntünün türüne bağlı olarak hem JPEG hem de PNG yaygın olarak kullanılır.

Modern görüntü formatlarının hedefi, daha önce tartışılan diğer özellikleri desteklemek için daha iyi sıkıştırma ve esneklik sunarak JPEG ve PNG'nin sınırlamalarının üstesinden gelmektir. Bu arka planla, AVIF ve WebP'nin neler sunabileceğine bir göz atalım.

AVIF

AV1 görüntü dosyası formatı (AVIF), hareketsiz ve hareketli görüntüleri depolamak için açık kaynaklı bir görüntü formatıdır. Alliance for Open Media (AOMedia) tarafından Şubat 2019'da piyasaya sürüldü. AVIF, popüler AV1 video formatının görüntü versiyonudur. Amaç, hem son teknoloji hem de telif ücretsiz olan yeni bir açık kaynaklı video kodlama formatı geliştirmekti.

AVIF'in Faydaları

AVIF, sıkıştırmadan sonra yüksek kaliteli görüntüler üretmek için çok verimli kayıplı ve kayıpsız sıkıştırmayı destekler. Görüntüler, benzer görsel kalitedeki JPEG'lerden on kata kadar daha küçük olabilir. Bazı testler, AVIF'in benzer algısal kaliteye sahip JPEG'e kıyasla dosya boyutunda %50 tasarruf sağladığını göstermiştir. WebP'nin kayıpsız AVIF'den daha iyi olabileceği durumlar olabileceğini unutmayın, bu nedenle manuel olarak değerlendirdiğinizden emin olun.

Burada, bir JPEG görüntüsü ile Squoosh uygulaması kullanılarak dönüştürülen karşılık gelen (kayıplı) AVIF görüntüsü arasında bir boyut karşılaştırması görebilirsiniz:

AVIF, üstün sıkıştırmaya ek olarak aşağıdaki özellikleri de sağlar:

• AVIF, görüntü dizilerinde depolanan çok katmanlı görüntüler aracılığıyla animasyonları, canlı fotoğrafları ve daha fazlasını destekler.
• JPEG'in sınırlamaları olduğu durumlarda grafik öğeler, logolar ve bilgi grafikleri için daha iyi destek sunar.
• JPEG'den daha iyi kayıpsız sıkıştırma sağlar.
• Daha iyi bir parlak ve koyu ton aralığı ve daha geniş bir parlaklık aralığı ile yüksek dinamik aralık (HDR) ve geniş renk gamı ​​(WCG) görüntüleri sağlayan on iki bit renk derinliğini destekler.
• Alfa kanalını kullanan şeffaf görüntüler de dahil olmak üzere tek renkli görüntüler ve çok kanallı görüntüler için destek içerir.

Formatları Karşılaştırma

Farklı formatların sunduğu kalite ve sıkıştırma farklılıklarını daha iyi anlamak için görüntüleri görsel olarak karşılaştırabilir ve farklılıkları değerlendirebiliriz.

Kalite ve Sıkıştırmanın Değerlendirilmesi

JPEG, WebP ve AVIF kalite değerlendirmemize, her format için Squoosh'un varsayılan yüksek kaliteli çıktı ayarlarını kullanarak başlayacağız - yeni bir kullanıcının deneyimini taklit etmek için kasıtlı olarak ayarlanmamış. Bir hatırlatma olarak, ihtiyaçlarınıza en uygun kalite konfigürasyonunu ve formatlarını değerlendirmeyi hedeflemelisiniz. Zamanınız kısıtlıysa, görüntü CDN'leri bunun bir kısmını otomatik hale getirir.

Bu ilk testte, bir gün batımının (birçok dokuya sahip) 560KB'lık bir fotoğrafını kodlamak, her biri için görsel ve algısal olarak oldukça benzer bir görüntü üretir. Çıktı 289KB (JPEG@q75), 206KB (WebP@q75) ve 101KB (AVIF@q30) olarak gelir — sıkıştırma tasarrufunda %81'e kadar.

Harika şeyler, ama daha derine inelim.

Farklı görüntü formatları (örneğin, DSSIM, simulacra) arasındaki farklılıkları karşılaştırmak için çeşitli araçlar mevcuttur. Bu araçları kullanarak, örneğin JPEG'den WebP'ye veya WebP'den AVIF'e değerlendirme yaparken karşılaştırılabilir kalite ayarına yaklaşabilirsiniz. Aşağıda, JPEG'in %70 kalitesini hedefleyen, karşılaştırılabilir kalitede kodlanmış aynı resimler bulunmaktadır. Çıktı 323KB (JPEG), 214KB (WebP@q75) ve 117KB (AVIF@60) — boyutlar varsayılanlara güvenmekten biraz daha büyük, ancak sıkıştırma kazançları hala önemli.

WebP ve AVIF'in gerçekten parladığı yer olan her formatta daha düşük kaliteye de bakabiliriz. İşte JPEG@q10 (35KB), WebP@q1 (35KB), AVIF@q17 (36KB) — WebP, JPEG'e kıyasla önemli ölçüde daha az bloklu yapaylığa sahipken, AVIF hem daha az bloklu hem de görüntüdeki önemli ayrıntılarda daha keskin .

Not: Bu gün batımı daha yüksek çözünürlüklü bir görüntüdür ( 2400 × 1595 ) ve 2× ekranlarda kalite çok daha düşük olabilir ve kullanıcıların görüntüyle nasıl etkileşime girdiğine (ör. ne kadar sıkıştırıp yakınlaştırdıklarına) bağlı olarak yine de keskin görünebilir.

JPEG ve AVIF arasındaki farkların daha uç bir örneği için, 20KB'de bir JPEG (4:4:4) ile bir AVIF (4:4:4) karşılaştıran Kodak veri setinden (Netflix tarafından değerlendirilen) bir örneğe bakabiliriz. 19.8KB'de. JPEG'in gökyüzünde ve çatıda nasıl görünür bloklu eserler olduğuna dikkat edin. AVIF gözle görülür şekilde daha iyi, daha az engelleme eseri içeriyor. Bununla birlikte, çatıda bir miktar doku kaybı ve biraz bulanıklık var. Genel sıkıştırma faktörünün 59x olduğu göz önüne alındığında, hala oldukça etkileyici.

Ardından, bulutlarda birçok ince ayrıntı, doku ve düşük kontrastlı alan içeren bir plaj görüntüsünün kalitesini değerlendirelim. Orijinali (482 KB'da) JPEG, WebP ve AVIF'nin 45 KB dosya boyutu sınırıyla (gelişmiş ayar olmadan) üretebilecekleriyle karşılaştıracağız — Squoosh kullanarak; bu, JPEG'de (MozJPEG) %50 kalitede, WebP'de %54'te ve AVIF'de %36'da çalışır.

JPEG, bulutlarda ve suda bloklu eserler ve görünür renk bantlarına sahipken, WebP ve AVIF bu blokluluktan gözle görülür şekilde daha azına sahip. Bana göre, AVIF, üçünün de genel olarak en sorunsuz deneyimini sunuyor.

Dokulardan bahsetmişken, “The Witcher” (36KB'yi hedefleyen) için bir Netflix posterinde de benzer bir düşük kaliteli değerlendirme yapabiliriz. JPEG için bulutlardaki tıkanıklığa ve WebP için kırmızı metnin çevresinde bir miktar bulanıklığa dikkat edin (bu, geçici çözümler olmadan yalnızca 4:2:0 renk alt örneklemesini destekler). AVIF en iyi görünüyor, ardından WebP geliyor.

Son olarak, önceki resimlerden çok daha fazla metin öğesi içeren bir fotoğrafa bakalım - bir poster. Daha düşük kalitelere inip oldukça küçük bir boyutu (25KB) hedeflediğimizde, JPEG'in metnin çevresinde güçlü renk bantları ve haleler olduğunu gözlemleyebiliriz. Kenarlarda net bloklu eserler var. WebP, kademeli olarak daha iyi görünerek bir miktar blokajdan kaçınır. AVIF, keskin kenarları JPEG veya WebP'den biraz daha iyi koruyarak pürüzsüz bir görüntü üretir.

Fotoğraf ve illüstrasyonlar için ek biçim ve kalite karşılaştırmaları mevcuttur.

AVIF Takımları ve Desteği

2019'da piyasaya sürülmesinden bu yana, AVIF'e verilen destek önemli ölçüde arttı. Daha önce AVIF dosyalarını oluşturmanın veya görüntülemenin doğrudan bir yöntemi olmasa da, şimdi mevcut açık kaynaklı yardımcı programlarla bunu kolayca yapabilirsiniz.

Tarayıcıda AVIF Görüntüleri

AVIF, Chrome'un masaüstü sürümünde Ağustos 2020'de Chrome 85 ile tanıtıldı. Android için Chrome, masaüstü için Opera ve Firefox ve Android için Opera'da da desteklenir.

Sayfanıza bir AVIF görüntüsü eklemek için onu bir görüntü öğesi olarak ekleyebilirsiniz. Ancak, AVIF'i desteklemeyen tarayıcılar bu görüntüyü oluşturamaz.

 <img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

En az bir desteklenen görüntü biçiminin tüm tarayıcılara teslim edilmesini sağlamaya yönelik bir geçici çözüm, aşamalı bir geliştirme olarak AVIF'yi uygulamaktır. Bunu yapmanın iki yolu vardır.

Aşamalı Geliştirme

1. <picture> Öğesini Kullanma
   <picture> , tarayıcıların tanımadıkları görüntüleri atlamalarına izin verdiği için, görüntüleri tercih sıranıza göre dahil edebilirsiniz. Tarayıcı, desteklediği ilkini seçer.

 <picture> <source type="image/avif"> <source type="image/webp"> <img src="img/photo.jpg" alt="Description" width="360" height="240"> </picture>

1. İçerik Pazarlığını Kullanma
   İçerik anlaşması, sunucunun, tarayıcı tarafından desteklenenlere bağlı olarak farklı kaynak biçimleri sunmasına olanak tanır. Belirli bir biçimi destekleyen tarayıcılar, Biçimi Kabul Etme İsteği Başlıklarına ekleyerek bunu duyurabilir. Örneğin, Chrome'daki resimler için Kabul İsteği Başlığı:
   Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   Getirme olay işleyicisinde AVIF'nin desteklenip desteklenmediğini kontrol eden kod şöyle görünebilir:
   const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);
   Bu değeri, istemciye AVIF veya başka bir varsayılan biçimi sunmak için kullanabilirsiniz.

Aşamalı geliştirme için işaretleme oluşturmak göz korkutucu olabilir. Görüntü CDN'leri, müşteriye uygun en iyi formatı otomatik olarak sunma seçeneği sunar. Ancak, bir görüntü CDN'si kullanmıyorsanız, just-gimme-an-img gibi bir araç kullanmayı düşünebilirsiniz. Bu araç, belirli bir görüntü için farklı biçim ve genişliklerde resim öğesi için işaretleme oluşturabilir. Ayrıca tamamen istemci tarafında Squoosh kullanarak işaretlemeye karşılık gelen görüntüleri oluşturur. Not: Birden çok biçimi kodlamak, onu kullanmak biraz zaman alabilir, bu nedenle beklerken bir kahve içmek isteyebilirsiniz.

Not: Görüntü CDN'lerinden bu makalede birkaç kez bahsedilmiştir. CDN sunucuları genellikle kullanıcılara başlangıç ​​sunucularından daha yakın yerleştirilir ve daha kısa gidiş-dönüş sürelerine (RTT) sahip olabilir, bu da ağ gecikmesini artırır. Bununla birlikte, farklı bir kaynaktan hizmet vermek gidiş-dönüşler ekleyebilir ve performans kazanımlarını etkileyebilir. CDN başka site içeriği sunuyorsa bu iyi olabilir, ancak şüpheye düştüğünüzde deney yapın ve ölçün.

AVIF Dosyalarını Kodlayın ve Çözün

Birkaç açık kaynaklı proje, AVIF dosyalarını kodlamak/kodunu çözmek için farklı yöntemler sağlar:

• kütüphaneler
  Libaom, AVIF'in yaratıcıları AOMedia tarafından sağlanan açık kaynaklı kodlayıcı ve kod çözücüdür. Kitaplık, özellikle sık yüklenen veya yüksek öncelikli görüntüler için AVIF kodlama maliyetini düşürmeyi amaçlayan yeni optimizasyonlarla sürekli olarak güncellenir. Libavif, Chrome'da AVIF görüntülerinin kodunu çözmek için kullanılan AVIF için açık kaynaklı bir muxer ve ayrıştırıcıdır. Orijinal sıkıştırılmamış görüntülerden AVIF dosyaları oluşturmak veya bunları diğer formatlardan dönüştürmek için libavif'i libaom ile birlikte kullanabilirsiniz. Ayrıca popüler bir AVIF/HEIF kodlayıcı/kod çözücü olan Libheif ve Cavif de vardır. Ben Morss sayesinde libgd, AVIF'i destekliyor ve ayrıca Kasım ayında PHP'ye geliyor.
• Web Uygulamaları ve Masaüstü Uygulamaları
  Farklı görüntü sıkıştırıcıları kullanmanıza izin veren bir web uygulaması olan Squoosh, AVIF'yi de destekleyerek çevrimiçi .avif dosyalarını dönüştürmeyi ve oluşturmayı nispeten basit hale getirir. Masaüstünde GIMP, AVIF dışa aktarımını destekler. ImageMagick ve Paint.net ayrıca AVIF'i desteklerken, AVIF için Photoshop topluluk eklentileri de mevcuttur.
• JavaScript Kitaplıkları
  
  • AVIF.js, henüz AVIF'i desteklemeyen tarayıcılar için bir AVIF çoklu dolgudur. Fetch olayını engellemek ve AVIF dosyalarının kodunu çözmek için Service Worker API'sini kullanır.
  • Avif.io, istemci tarafında farklı görüntü türlerinden dosyaları AVIF'e dönüştürebilen başka bir web yardımcı programıdır. Bir WebWorker kullanarak tarayıcıda Rust kodunu çağırır. Dönüştürücü kitaplığı wasm-pack kullanılarak WASM'ye derlenir.
  • Sharp, standart formatlardaki büyük görüntüleri AVIF görüntüleri de dahil olmak üzere daha küçük web dostu görüntülere dönüştürebilen bir Node.js modülüdür.
• Araçlar
  Görüntü dönüştürme veya dönüştürme yardımcı programları AVIF biçimini destekler. AVIF dosyalarını oluşturmak ve kodunu çözmek için MP4Box'ı kullanabilirsiniz.
• Kodda
  go-avif , libaom kullanarak Go için bir AVIF kodlayıcı uygular. JPEG veya PNG dosyalarını AVIF'e kodlayabilen avif adlı bir yardımcı programla birlikte gelir.

Squoosh kullanarak AVIF görüntülerinin nasıl oluşturulacağını veya komut satırı kodlayıcı avifenc nasıl oluşturulacağını öğrenmek isteyen herkes, AVIF dosyalarının sunulmasıyla ilgili kod laboratuvarında bunu yapabilir.

AVIF ve Performans

AVIF, daha iyi sıkıştırma nedeniyle görüntülerin dosya boyutunu azaltabilir. Sonuç olarak, AVIF dosyaları daha hızlı indirilir ve daha düşük bant genişliği tüketir. Bu, görüntüleri yükleme süresini azaltarak performansı potansiyel olarak artırabilir.

Lighthouse-en iyi uygulamalar denetimi artık AVIF görüntü sıkıştırmanın önemli iyileştirmeler getirebileceğini düşünüyor. Sayfadaki tüm BMP, JPEG ve PNG resimlerini toplar, bunları WebP'ye dönüştürür ve AVIF dosya boyutunu tahmin eder. Bu tahmin, Lighthouse'un "Görüntüleri yeni nesil biçimlerde sunun" bölümündeki olası tasarrufları raporlamasına yardımcı olur.

Tim Vereecke, Real User Monitoring (RUM) kullanılarak ölçülen web sitesindeki 14 milyon görüntüyü AVIF'ye dönüştürdükten sonra %25 bayt tasarrufu ve LCP üzerinde (JPEG'e kıyasla) olumlu bir etki bildirdi.

AVIF yakalandı

AVIF'in şu anda en büyük dezavantajı, tarayıcılar arasında tek tip desteğin olmamasıdır. AVIF'i aşamalı bir geliştirme olarak sunmak, bunun üstesinden gelmeye yardımcı olur. AVIF'in modern bir dosya formatı için ideal standartları karşılamadığı diğer birkaç husus.

• Chrome'un modern sürümleri (Chrome 94+), AVIF aşamalı oluşturmayı desteklerken eski sürümler desteklemez. Yazma sırasında bu görüntüleri kolayca oluşturabilecek bir kodlayıcı olmasa da, bunun değişeceğine dair bir umut var.
• AVIF görüntülerinin kodlanması ve oluşturulması daha uzun sürer. Bu, dinamik olarak görüntü dosyaları oluşturan siteler için bir sorun olabilir. Ancak, AVIF ekibi kodlama hızlarını iyileştirmek için çalışıyor. Google'daki AVIF katkıda bulunanlar da bazı güzel performans kazanımları bildirdiler. 1 Ocak 2021'den bu yana, AVIF kodlaması, kod dönüştürme süresinde ~ %47'lik bir iyileşmeye (bu hız 6, libavif için geçerli varsayılan değerdir) ve takvim yılı boyunca %73'lük bir iyileşmeye sahipti. Temmuz ayından bu yana, 9 hızında (anında kodlama) kod dönüştürme sürelerinde de %72'lik bir iyileşme oldu.

• Görüntülemek için AVIF görüntülerinin kodunun çözülmesi, daha küçük dosya boyutları bunu telafi etmesine rağmen, diğer codec bileşenlerinden daha fazla CPU gücü tüketebilir.
• Bazı CDN'ler, otomatik biçimlendirme modları için varsayılan olarak AVIF'yi henüz desteklememektedir, çünkü ilk istekte oluşturulması daha yavaş olabilir.

WebP

WebP'den birkaç kez bahsettik ama kısaca tarihine değinelim. Google, WebP biçimini 2011'de web'i daha hızlı hale getirmeye yardımcı olacak bir resim biçimi olarak oluşturdu. Yıllar boyunca, JPEG ve PNG'ye kıyasla görüntüleri daha düşük dosya boyutlarına sıkıştırma yeteneği nedeniyle yaygın olarak kabul edildi ve benimsendi. WebP, kabul edilebilir bir görsel kalitede hem kayıpsız hem de kayıplı sıkıştırma sunar ve alfa kanalı şeffaflığını ve animasyonu destekler.

Kayıplı WebP sıkıştırması, VP8 video codec bileşenine dayanır ve bir görüntüyü kodlamak için tahmine dayalı kodlamayı kullanır. Bir bloktaki değeri tahmin etmek için komşu piksel bloklarındaki değerleri kullanır ve yalnızca farkı kodlar. Kayıpsız WebP görüntüleri, sıkıştırmak için görüntülere çoklu dönüştürme teknikleri uygulanarak oluşturulur.

WebP Avantajları

WebP kayıpsız görüntüler genellikle PNG'den %26 daha küçüktür ve WebP kayıplı görüntüler, benzer kalitedeki JPEG görüntülerden %25–34 daha küçüktür. Animasyon desteği, onları GIF görüntüleri için de mükemmel bir yedek yapar. Aşağıda, solda şeffaf bir PNG resmi ve sağda Squoosh uygulaması tarafından %26 boyut küçültmeyle oluşturulan ilgili WebP resmi gösterilmektedir.

Ek olarak, WebP aşağıdakiler gibi başka avantajlar da sunar:

• şeffaflık
  WebP, PNG'den yalnızca %22 daha fazla bayta sahip kayıpsız bir 8 bit şeffaflık kanalına sahiptir. Ayrıca WebP'ye özgü bir özellik olan kayıplı RGB şeffaflığını da destekler.
• meta veri
  WebP dosya biçimi, EXIF ​​fotoğraf meta verilerini ve Genişletilebilir Meta Veri Platformu (XMP) dijital belge meta verilerini destekler. Ayrıca bir ICC renk profili içerebilir.
• Animasyon
  WebP, gerçek renkli animasyonlu görüntüleri destekler.

Not: Yukarıdaki gibi şeffaf, vektör benzeri görüntüler söz konusu olduğunda, optimize edilmiş bir SVG, bir tarama formatına kıyasla sonuçta daha keskin, daha küçük bir dosya sağlayabilir.

WebP Araçları ve Desteği

Yıllar içinde, Google dışındaki ekosistemler WebP'yi benimsedi ve WebP dosyalarını oluşturmak, görüntülemek ve yüklemek için kullanılabilecek birçok araç var.

WebP Dosyalarını Sunma ve Görüntüleme

WebP, günümüzde neredeyse tüm büyük tarayıcıların en son sürümlerinde desteklenmektedir.

Geliştiriciler gelecekte WebP'yi diğer tarayıcılarda sunmak isterse, bunu AVIF bölümünde gösterildiği gibi <picture> öğesini veya istek başlıklarını kullanarak yapabilirler.

Görüntü İçeriği Dağıtım Ağları (CDN), tarayıcı desteğine bağlı olarak WebP veya AVIF'deki görüntüler için otomatik format seçimi ile duyarlı görüntüleri de destekler. WebP eklentileri WordPress, Joomla, Drupal vb. gibi diğer popüler yığınlar için mevcuttur. WebP için başlangıç ​​desteği WordPress 5.8'den başlayarak WordPress çekirdeğinde de mevcuttur.

WebP görüntülerini destekleyen bir tarayıcıda açarak kolayca görüntüleyebilirsiniz. Ek olarak, bir eklenti kullanarak bunları Windows ve macOS'ta da önizleyebilirsiniz. WebP için Quick Look eklentisini ( qlImageSize ) yüklemek, Quick Look yardımcı programını kullanarak WebP dosyalarını önizlemenize olanak tanır. WebP ekibi, Windows, macOS ve Linux için WebP codec bileşeni için önceden derlenmiş kitaplıklar ve yardımcı programlar yayınladı. Bunları Windows'ta kullanmak, WebP görüntülerini Dosya Gezgini veya Windows Fotoğraf Görüntüleyici'de önizlemenize olanak tanır.

Görüntüleri WebP'ye dönüştürme

WebP ekibi tarafından sağlanan kitaplıklara ek olarak, birkaç ücretsiz, açık kaynaklı ve ticari görüntü düzenleme aracı WebP'yi destekler.

Araçlar:
AVIF gibi, Squoosh da önceki bölümde gösterildiği gibi dosyaları çevrimiçi WebP'ye dönüştürebilir. XnConvert, WebP dahil olmak üzere farklı görüntü biçimlerini dönüştürmek için masaüstüne yükleyebileceğiniz bir yardımcı programdır. XnConvert ayrıca meta verileri çıkarma ve düzenleme, kırpma ve yeniden boyutlandırma, parlaklık ve kontrast, renk derinliğini özelleştirme, bulanıklaştırma ve keskinleştirme, maskeler ve filigranlar ve diğer dönüşümlerde yardımcı olabilir.

Node.js Modülleri:
Imagemin, görüntüleri WebP'ye (imagemin-webp) dönüştürmek için bir eklenti içeren popüler bir görüntü küçültme modülüdür. Eklenti, hem kayıplı hem de kayıpsız WebP modlarını destekler.

Diğerleri:
Görüntü dönüştürme ve işleme için çeşitli uygulamalar WebP biçimini destekler. Bunlara Sketch, GIMP, ImageMagick vb. dahildir. WebP için bir Photoshop eklentisi de mevcuttur.

WebP Üretim Kullanımı

JPEG ve PNG'ye göre sıkıştırma avantajları nedeniyle, birçok büyük şirket, maliyetleri azaltmak ve web sayfası yükleme sürelerini azaltmak için üretimde WebP'yi kullanır. Google, WebP kullanarak diğer kayıplı sıkıştırma şemalarına göre %30-35 tasarruf bildiriyor ve günde 43 milyar görüntü isteğine hizmet ediyor, bunların %26'sı kayıpsız sıkıştırma.

Verilerin pahalı olduğu gelişmekte olan pazarlarda geniş kullanıcı tabanına ulaşmak için Facebook, Android kullanıcılarına WebP görüntüleri sunmaya başladı. “JPG ile karşılaştırıldığında yüzde 25 ila 35 ve PNG ile karşılaştırıldığında yüzde 80 oranında veri tasarrufu” gözlemlediler.

WebP Yakalamaları

İlk günlerinde, WebP'nin önemli bir dezavantajı, tarayıcı ve araç desteğinin olmamasıydı. Modern bir formatın ideal olarak desteklemesi gereken tüm özellikler göz önüne alındığında, WebP ile hala çok az değiş tokuş var.

• WebP, 8 bit renk hassasiyetiyle sınırlıdır. Sonuç olarak, HDR/geniş gamlı görüntüleri destekleyemez.
• WebP, renk alt örneklemesi olmayan kayıplı görüntüleri desteklemez. Kayıplı WebP, yalnızca 8 bitlik bir YCbCr 4:2:0 ile çalışırken kayıpsız WebP, RGBA biçimiyle çalışır. Bu, ince ayrıntılara, kromatik dokulara veya renkli metinlere sahip görüntüleri etkileyebilir. Örnek için aşağıya bakın.
• Aşamalı kod çözmeyi desteklemez, ancak artımlı kod çözmeyi destekler. Bu biraz bunu telafi edebilir, ancak işleme üzerindeki etkisi farklı olabilir.

İdeal olarak, mevcut en kaliteli kaynak dosyalardan WebP dosyaları oluşturmalısınız. Standart altı JPEG'leri WebP'lere dönüştürmek, kaliteyi iki kez kaybettiğinizden çok verimli değildir.

Özet

Dört format JPEG, PNG, AVIF ve WebP hakkındaki tüm bilgileri özetleyerek ve önceki bölümde sunulduğu gibi güçlü ve zayıf yönleri karşılaştırarak ve nicelleştirerek aşağıdaki tabloyu oluşturduk.

Not: Yıldız sayısı genel bir kanıya dayanmaktadır ve belirli kullanım durumları için farklılık gösterebilir.

Aşağıda, bu tabloya atıfta bulunulurken dikkate alınması gereken bazı önemli noktalar bulunmaktadır.

• Fotoğrafik ve fotoğrafik olmayan görüntüler için sıkıştırma, görüntülerin aslına (kalitesine) bağlı olarak ayrıca farklılık gösterebilir. Burada genel bir puan belirttik.
• Görüntülerin amacına göre kalite ve renk alt örnekleme ayarlarını seçmelisiniz. Web'deki çoğu senaryoda, örneğin haberler, sosyal medya ve e-ticaret için, düşük ila orta doğrulukta görüntüler kabul edilebilir. Görüntü arşivi, film veya fotoğrafçılık web siteleri, aslına uygun görüntüler gerektirir. Başka bir biçime dönüştürmeden önce yüksek doğruluk için sıkıştırmadan kaynaklanan gerçek tasarrufları test etmelisiniz.
• Aşamalı kod çözme desteği ve hızının olmaması, AVIF dosyalarının kodlanması/kodunun çözülmesi için bir sorun olabilir. Ortalama boyutlu görüntülere sahip web siteleri için, sıkıştırmadan kaynaklanan bayt tasarrufları, görüntüler hızlı bir şekilde indirildiğinden hızı ve aşamalı kod çözmenin olmamasını telafi edebilir.
• Görüntü biçimleri tarafından sunulan sıkıştırmayı karşılaştırırken, aynı DSSIM'deki dosya boyutlarını karşılaştırın.
• Aynı kalitede görüntü elde etmek için kodlama sırasında kullanılan kalite ayarının farklı formatlar için aynı olması gerekmez. 60 kalite ayarında kodlanmış bir JPEG, bu gönderide önerildiği gibi, kalite ayarı 50 olan bir AVIF'ye ve 65 kalite ayarındaki bir WebP'ye benzer olabilir.
• Formatları karşılaştırırken LCP üzerindeki gerçek etkiyi ölçmek için hala kapsamlı çalışmalara ihtiyaç vardır.
• Bu karşılaştırmaya JPEG XL ve HEIC gibi diğer formatları dahil etmedik. JPEG XL hala nispeten yeni bir aşamadadır ve yalnızca Apple cihazları HEIC'i destekler (Safari desteklemezken). Telif hakkı ve lisans ücretleri, HEIC desteğini daha da karmaşık hale getirir.

AVIF genel olarak kutuların çoğunu kontrol eder ve WebP daha iyi desteğe sahiptir ve JPEG veya PNG ile karşılaştırıldığında daha iyi sıkıştırma sunar. Bu nedenle, web sitenizdeki görüntüleri optimize ederken şüphesiz WebP desteğini göz önünde bulundurmalısınız. AVIF'yi gereksinimlerinizi karşılayıp karşılamadığını değerlendirmek ve aşamalı bir geliştirme olarak sunmak, biçim farklı tarayıcılar ve platformlar arasında benimsendikçe değer sağlayabilir. Kaliteli karşılaştırma araçları ve AVIF kullanarak kodlama hızlarının iyileştirilmesi sonuçta daha kolay hale gelecektir.

Bu makaleye yoğun katkıları için Leena Sohoni-Kasture'a ve incelemeleri için Patrick Meenan, Frank Galligan ve Yoav Weiss'a teşekkür ederiz.

Çarpıcı Bir Not

Bu yılın başlarında, Addy ile birlikte, görüntüleri sıkıştırma, sunma ve koruma şeklini optimize etmek için bilmeniz gereken her şey hakkında yepyeni bir kitap yayınladık ve yol boyunca performansı artırdık. Kitapları dünya çapında ücretsiz olarak gönderiyoruz ve kitabı şimdi alırsanız, Addy tarafından kişisel bir mesajla elle yazılmış bir kartpostal da alacaksınız.

• Ayrıntılara atla ↓
• Ücretsiz bir PDF örneği indirin (12MB)
• Basılı kitaplar için dünya çapında ücretsiz uçak postası gönderimi .
• Kitabı hemen alın.