Utilizarea formatelor moderne de imagine: AVIF și WebP

Am publicat recent cartea Addy's Image Optimization cu tot ce trebuie să știți despre imagini , cum să comprimați, să difuzați și să întrețineți imaginile. Acum, expediere cu un mesaj personal scris de mână, semnat de Addy. Treceți la cuprins și obțineți cartea imediat.

Imaginile sunt cel mai popular tip de resursă de pe web și sunt adesea cele mai mari. Utilizatorii apreciază imaginile de înaltă calitate, dar trebuie să se acorde atenție pentru a oferi acele imagini cu eroi, fotografii ale produselor și meme-uri cu pisici cât mai eficient și eficient posibil.

Dacă optimizați pentru Web Vitals, s-ar putea să fiți interesat să auziți că imaginile reprezintă ~42% din cel mai mare element de vopsea de conținut pentru site-uri web. Valorile cheie centrate pe utilizator depind adesea de dimensiunea, numărul, aspectul și prioritatea de încărcare a imaginilor de pe pagină. Acesta este motivul pentru care o mare parte din ghidurile noastre privind performanța vorbește despre optimizarea imaginii.

Un tl;dr de recomandări pot fi găsite mai jos.

tl;dr

• AVIF este o primă alegere solidă dacă compresia cu pierderi, cu fidelitate scăzută este acceptabilă și economisirea lățimii de bandă este prioritatea numărul unu. Presupunând că vitezele de codificare/decodare corespund nevoilor dumneavoastră.
• WebP este acceptat mai pe scară largă și poate fi folosit pentru redarea imaginilor obișnuite în cazul în care nu sunt necesare funcții avansate, cum ar fi o gamă largă de culori sau suprapuneri de text.
• Este posibil ca AVIF să nu poată comprima imagini non-fotografice precum PNG sau WebP fără pierderi. Economiile de compresie de la WebP pot fi mai mici decât JPEG pentru compresia cu pierderi de înaltă fidelitate.
• Dacă atât AVIF, cât și WebP nu sunt opțiuni viabile, luați în considerare evaluarea MozJPEG (optimizare imagini JPEG), OxiPNG (imagini non-fotografice) sau JPEG 2000 (imagini fotografice cu pierderi sau fără pierderi).
• Îmbunătățirea progresivă prin <picture> permite browserului să aleagă primul format acceptat în ordinea preferințelor. Această implementare este considerabil simplificată atunci când se utilizează CDN-uri de imagine, unde antetul de acceptare și negocierea conținutului (de exemplu, formatarea automată și calitatea) pot servi cea mai bună imagine.

De ce avem nevoie de formate moderne?

Avem o selecție destul de largă de formate de imagine din care să alegeți atunci când redăm imagini pe web. Diferența esențială dintre formatele de imagine este că codecul de imagine folosit pentru a codifica sau decoda fiecare tip de imagine este diferit. Un codec de imagine reprezintă algoritmul utilizat pentru comprimarea și codificarea imaginilor într-un anumit tip de fișier și pentru a le decoda pentru afișare pe ecran.

Evaluarea codecurilor

Puteți evalua ce format de imagine este potrivit pentru dvs. pe baza diferiților parametri.

• Comprimare
  Eficiența unui codec poate fi măsurată în principal prin cât de multă compresie poate atinge. Compresia realizată este relevantă deoarece cu cât compresia este mai mare, cu atât dimensiunea fișierului este mai mică și datele necesare pentru a transfera imaginea în rețea sunt mai mici. Dimensiunea mai mică a fișierului are un impact direct asupra valorii Cea mai mare vopsea cu conținut (LCP) pentru pagină, deoarece resursele de imagine necesare paginii se încarcă mai rapid.
• Calitate
  În mod ideal, compresia nu ar trebui să aibă ca rezultat pierderea datelor de imagine; ar trebui să fie fără pierderi. Formatele de compresie care duc la pierderi de date ale imaginii, reducând astfel calitatea imaginii, sunt cunoscute sub numele de pierderi. Puteți utiliza instrumente precum DSSIM sau ssimulacra pentru a măsura similitudinea structurală dintre imagini și pentru a aprecia dacă pierderea calității este acceptabilă.
• Viteza de codificare/decodare
  Algoritmii de compresie complecși pot necesita o putere de procesare mai mare pentru a codifica/decoda imagini. Acest lucru poate fi complicat dacă codarea se face din timp (static/build) sau din mers (la cerere). În timp ce codificarea poate fi o singură dată în cazul imaginilor statice, browserul trebuie să decodeze imagini înainte de a le randa. Un proces complex de decodare poate încetini redarea imaginilor.

Gradul de compresie, calitatea imaginii și viteza de decodare sunt factori cheie care trebuie luați în considerare atunci când se compară performanța imaginii pentru web. Cazurile de utilizare specifice pot necesita formate de imagine care acceptă alte caracteristici, cum ar fi:

• Suport software: un format de imagine poate funcționa foarte bine, dar este inutil dacă browserele, CDN-urile și alte instrumente de manipulare a imaginii nu îl recunosc.
• Poate fi necesar suport pentru animații pentru unele imagini de pe web (de exemplu, GIF). Cu toate acestea, în mod ideal ar trebui să înlocuiți astfel de imagini cu videoclipuri.
• Alpha Transparency: Capacitatea de a crea imagini cu diferite niveluri de opacitate folosind canalul alfa. (de exemplu, imagini PNG cu fundal transparent)
• Ar trebui să accepte imagini cu gamă dinamică înaltă (HDR) și gamă largă de culori.
• Decodificarea progresivă pentru a încărca imaginile permite utilizatorilor să obțină o previzualizare rezonabilă a imaginii înainte de a fi rafinată.
• Hărți de adâncime care vă vor permite să aplicați efecte în prim-plan sau fundal al imaginii.
• Imagini cu mai multe straturi suprapuse, de exemplu, suprapuneri de text, chenare și așa mai departe.

Sfat: atunci când evaluăm calitatea, compresia și reglarea fină a formatelor moderne, capacitatea Squoosh.app de a efectua o comparație vizuală una lângă alta este utilă. Mărirea vă permite să apreciați mai bine locurile în care un format prezintă blocaj sau artefacte marginale pentru a argumenta despre compromisuri.

The Old Guards: JPEG și PNG

JPEG a fost cel mai larg suportat format de imagine timp de 25 de ani. Codificatoarele JPEG clasice duc la o compresie relativ slabă, în timp ce eforturile mai moderne de codare JPEG (cum ar fi MozJPEG) îmbunătățesc compresia, dar nu sunt la fel de optime ca formatele moderne. JPEG este, de asemenea, un format de compresie cu pierderi. În timp ce viteza de decodare pentru JPEG este excelentă, îi lipsesc alte caracteristici dorite necesare imaginilor de pe site-uri web moderne, atrăgătoare. Nu acceptă transparență în imagini, animații, hărți de adâncime sau suprapuneri.

JPEG funcționează cel mai bine cu fotografii, în timp ce PNG este omologul său pentru alte imagini statice. PNG este un format fără pierderi și poate suporta transparența alfa, dar compresia realizată, în special pentru fotografii, este considerabil scăzută. JPEG și PNG sunt ambele utilizate pe scară largă, în funcție de tipul de imagine dorit.

Ținta pentru formatele moderne de imagine este astfel depășirea limitărilor JPEG și PNG oferind o compresie și flexibilitate mai bune pentru a susține celelalte caracteristici discutate mai devreme. Cu acest context, să ne uităm la ce au de oferit AVIF și WebP.

AVIF

Formatul de fișier imagine AV1 (AVIF) este un format de imagine open-source pentru stocarea imaginilor statice și animate. A fost lansat în februarie 2019 de Alianța pentru Media Deschisă (AOMedia). AVIF este versiunea imagine a popularului format video AV1. Scopul a fost de a dezvolta un nou format de codare video open-source, care este atât de ultimă generație, cât și fără drepturi de autor.

Beneficii AVIF

AVIF acceptă compresie foarte eficientă cu pierderi și fără pierderi pentru a produce imagini de înaltă calitate după comprimare. Imaginile pot fi de până la zece ori mai mici decât JPEG-urile de calitate vizuală similară. Unele teste au arătat că AVIF oferă o economie de 50% în dimensiunea fișierului în comparație cu JPEG cu o calitate perceptivă similară . Rețineți că pot exista cazuri în care WebP fără pierderi poate fi mai bun decât AVIF fără pierderi, deci asigurați-vă că evaluați manual.

Aici, puteți vedea o comparație de dimensiune între o imagine JPEG și imaginea AVIF corespunzătoare (cu pierderi) convertită folosind aplicația Squoosh:

Pe lângă compresia superioară, AVIF oferă și următoarele caracteristici:

• AVIF acceptă animații, fotografii live și multe altele prin imagini multistrat stocate în secvențe de imagini.
• Oferă un suport mai bun pentru elemente grafice, logo-uri și infografice, unde JPEG are limitări.
• Oferă o compresie fără pierderi mai bună decât JPEG.
• Acceptă doisprezece biți de adâncime a culorii, permițând imagini cu o gamă dinamică înaltă (HDR) și o gamă largă de culori (WCG), cu o gamă mai bună de tonuri luminoase și întunecate și o gamă mai largă de luminozitate.
• Include suport pentru imagini monocrome și imagini multicanal, inclusiv imagini transparente care folosesc canalul alfa.

Compararea formatelor

Pentru a înțelege mai bine diferențele de calitate și compresie oferite de diferitele formate, putem compara vizual imaginile și evalua diferențele.

Evaluarea calității și compresiei

Vom începe evaluarea calității JPEG, WebP și AVIF utilizând setările implicite de ieșire de înaltă calitate ale Squoosh pentru fiecare format - neajustate intenționat pentru a imita experiența unui nou utilizator cu acestea. Ca o reamintire, ar trebui să urmăriți să evaluați configurația de calitate și formatele care se potrivesc cel mai bine nevoilor dvs. Dacă aveți puțin timp, CDN-urile de imagine automatizează unele dintre acestea.

În acest prim test, codificarea unei fotografii de 560 KB a unui apus de soare (cu multe texturi) produce o imagine care este destul de similară vizual și perceptiv pentru fiecare. Ieșirea vine la 289KB (JPEG@q75), 206KB (WebP@q75) și 101KB (AVIF@q30) - până la 81% în economii de compresie.

Lucruri grozave, dar haideți să săpăm mai adânc.

Există diverse instrumente pentru a compara diferențele dintre diferite formate de imagine (de exemplu, DSSIM, simulacre). Folosind aceste instrumente, puteți aproxima setarea de calitate comparabilă atunci când evaluați, de exemplu, JPEG la WebP sau WebP la AVIF. Mai jos sunt aceleași imagini codificate la o calitate comparabilă, vizând calitatea JPEG de 70%. Ieșirea este de 323KB (JPEG), 214KB (WebP@q75) și 117KB (AVIF@60) - dimensiunile sunt puțin mai mari decât încrederea în valorile implicite, dar câștigurile de compresie sunt încă semnificative.

De asemenea, putem privi calitatea mai scăzută în fiecare format, care este într-adevăr locul în care WebP și AVIF strălucesc. Iată JPEG@q10 (35KB), WebP@q1 (35KB), AVIF@q17 (36KB) - WebP are mult mai puține artefacte blocate în comparație cu JPEG, în timp ce AVIF este mai puțin blocat și este mai clar în detaliile cheie din imagine .

Notă: Acest apus de soare este o imagine cu rezoluție mai mare ( 2400 × 1595 ), iar pe ecranele 2×, calitatea ar putea fi mult mai scăzută și poate arăta totuși clar, în funcție de modul în care utilizatorii interacționează cu imaginea (de exemplu, cât de mult ciupesc și măresc).

Pentru un exemplu mai extrem al diferențelor dintre JPEG și AVIF, putem privi un exemplu din setul de date Kodak (evaluat de Netflix) care compară un JPEG (4:4:4) la 20KB cu un AVIF (4:4:4). la 19,8 KB. Observați cum JPEG are artefacte blocate vizibile pe cer și pe acoperiș. AVIF este vizibil mai bun, conținând mai puține artefacte de blocare. Există, totuși, un nivel de pierdere a texturii pe acoperiș și o oarecare neclaritate. Este încă destul de impresionant, având în vedere că factorul de compresie general este de 59x.

În continuare, să evaluăm calitatea unei imagini de plajă cu multe detalii fine, texturi și zone cu contrast scăzut în nori. Vom compara originalul (la 482KB) cu ceea ce JPEG, WebP și AVIF pot produce cu o limită de dimensiune a fișierului de 45KB (fără reglare avansată) - folosind Squoosh; acest lucru funcționează la JPEG (MozJPEG) la 50% calitate, WebP la 54% și AVIF la 36%.

JPEG are artefacte blocate și benzi de culoare vizibile în nori și apă, în timp ce WebP și AVIF au vizibil mai puțin din această blocare observabilă. După părerea mea, AVIF oferă cea mai bună experiență din toate trei.

Vorbind de texturi, putem efectua și o evaluare similară, de calitate inferioară, a unui poster Netflix pentru „The Witcher” (țintit 36KB). Observați blocarea în nori pentru JPEG și o oarecare neclaritate în jurul textului roșu pentru WebP (care acceptă doar subeșantionarea cromatică 4:2:0 fără soluții alternative). Cel mai bine arată AVIF, urmat de WebP.

În cele din urmă, să ne uităm la o fotografie cu mult mai multe elemente de text decât imaginile anterioare — un poster. Când coborâm la calități mai scăzute și vizam o dimensiune rezonabil de mică (25KB), putem observa că JPEG are benzi puternice de culoare și halouri în jurul textului. Există artefacte clare în blocuri în jurul marginilor. WebP evită o cantitate de blocaj, arătând treptat mai bine. AVIF păstrează marginile ascuțite puțin mai bine decât JPEG sau WebP, producând o imagine netedă.

Sunt disponibile comparații suplimentare între format și calitate pentru fotografie și ilustrații.

Instrumente și asistență AVIF

De la lansarea sa în 2019, suportul pentru AVIF a crescut considerabil. Deși nu a existat o metodă directă de a crea sau de a vizualiza fișiere AVIF mai devreme, puteți face acest lucru cu ușurință acum cu utilitățile open-source disponibile.

Imagini AVIF în browser

AVIF a fost introdus pe versiunea desktop a Chrome în august 2020 cu Chrome 85. Este acceptat și pe Chrome pentru Android, Opera și Firefox pentru desktop și Opera pentru Android.

Pentru a include o imagine AVIF pe pagina dvs., o puteți adăuga ca element de imagine. Cu toate acestea, browserele care nu acceptă AVIF nu pot reda această imagine.

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

O soluție pentru a vă asigura că cel puțin un format de imagine acceptat este livrat tuturor browserelor este aplicarea AVIF ca îmbunătățire progresivă . Există două moduri de a face acest lucru.

Îmbunătățire progresivă

1. Folosind elementul <picture>
   Deoarece <picture> permite browserelor să omite imaginile pe care nu le recunosc, puteți include imagini în ordinea preferințelor dvs. Browserul îl selectează pe primul pe care îl acceptă.

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

1. Utilizarea negocierii conținutului
   Negocierea conținutului permite serverului să servească diferite formate de resurse în funcție de ceea ce este acceptat de browser. Browserele care acceptă un anumit format îl pot anunța adăugând formatul la antetul de solicitare de acceptare. De exemplu, antetul de cerere de acceptare pentru imagini în Chrome este:
   Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   Codul pentru a verifica dacă AVIF este acceptat în handlerul de evenimente fetch poate arăta cam așa:
   const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);
   Puteți utiliza această valoare pentru a servi AVIF sau orice alt format implicit clientului.

Crearea markupului pentru îmbunătățirea progresivă poate fi descurajantă. Image CDN-urile oferă opțiunea de a servi automat cel mai bun format potrivit clientului. Cu toate acestea, dacă nu utilizați un CDN de imagine, puteți lua în considerare utilizarea unui instrument precum just-gimme-an-img. Acest instrument poate genera marcajul pentru elementul de imagine pentru o anumită imagine cu diferite formate și lățimi. De asemenea, creează imaginile corespunzătoare markupului folosind Squoosh în întregime pe partea clientului. Notă: codificarea mai multor formate poate dura ceva timp, așa că poate doriți să luați o cafea în timp ce așteptați.

Notă: CDN-urile imaginilor sunt menționate de câteva ori în acest articol. Serverele CDN sunt adesea situate mai aproape de utilizatori decât serverele de origine și pot avea un timp de călătorie dus-întors (RTT) mai scurt, îmbunătățind latența rețelei. Acestea fiind spuse, servirea dintr-o altă origine poate adăuga călătorii dus-întors și poate afecta câștigurile de performanță. Acest lucru poate fi în regulă dacă CDN-ul difuzează alt conținut de site, dar atunci când aveți îndoieli, experimentați și măsurați.

Codificarea și decodarea fișierelor AVIF

Mai multe proiecte open-source oferă diferite metode de codificare/decodare a fișierelor AVIF:

• Biblioteci
  Libaom este codificatorul și decodorul open-source întreținut de AOMedia, creatorii AVIF. Biblioteca este actualizată continuu cu noi optimizări care urmăresc reducerea costurilor de codificare AVIF, în special pentru imaginile încărcate frecvent sau cu prioritate ridicată. Libavif este un muxer și parser open-source pentru AVIF, folosit în Chrome pentru decodarea imaginilor AVIF. Puteți utiliza libavif cu libaom pentru a crea fișiere AVIF din imagini originale necomprimate sau pentru a le transcoda din alte formate. Există, de asemenea, Libheif, un popular codificator/decodor AVIF/HEIF și Cavif. Datorită lui Ben Morss, libgd acceptă AVIF și vine și în PHP în noiembrie.
• Aplicații web și aplicații desktop
  Squoosh, o aplicație web care vă permite să utilizați diferite compresoare de imagine, acceptă și AVIF, ceea ce face relativ simplă convertirea și crearea fișierelor .avif online. Pe desktop, GIMP acceptă exportul AVIF. ImageMagick și Paint.net acceptă și AVIF, în timp ce pluginurile comunității Photoshop pentru AVIF sunt de asemenea disponibile.
• Biblioteci JavaScript
  
  • AVIF.js este un polyfill AVIF pentru browsere care nu acceptă încă AVIF. Utilizează API-ul Service Worker pentru a intercepta evenimentul de preluare și pentru a decoda fișierele AVIF.
  • Avif.io este un alt utilitar web care poate converti fișiere din diferite tipuri de imagini în AVIF pe partea clientului. Apelează codul Rust în browser folosind un WebWorker. Biblioteca convertor este compilată în WASM folosind wasm-pack.
  • Sharp este un modul Node.js care poate converti imagini mari în formate standard în imagini mai mici, prietenoase pentru web, inclusiv imagini AVIF.
• Utilități
  Utilitarele de conversie sau transformare a imaginilor acceptă formatul AVIF. Puteți folosi MP4Box pentru a crea și decoda fișiere AVIF.
• În Cod
  go-avif implementează un codificator AVIF pentru Go folosind libaom . Vine cu un utilitar numit avif care poate codifica fișiere JPEG sau PNG în AVIF.

Oricine este interesat să învețe cum să creeze imagini AVIF folosind Squoosh sau să construiască codificatorul de linie de comandă avifenc poate face acest lucru la laboratorul de codificare pentru servirea fișierelor AVIF.

AVIF Și Performanță

AVIF poate reduce dimensiunea fișierului imaginilor datorită compresiei mai bune. Ca rezultat, fișierele AVIF se descarcă mai rapid și consumă lățime de bandă mai mică. Acest lucru poate îmbunătăți performanța prin reducerea timpului de încărcare a imaginilor.

Auditul celor mai bune practici Lighthouse consideră acum că compresia imaginii AVIF poate aduce îmbunătățiri semnificative. Colectează toate imaginile BMP, JPEG și PNG de pe pagină, le convertește în WebP și estimează dimensiunea fișierului AVIF. Această estimare ajută Lighthouse să raporteze potențialele economii în secțiunea „Difuzare imagini în formate de generație următoare”.

Tim Vereecke a raportat economii de 25% de octeți și un impact pozitiv asupra LCP (comparativ cu JPEG) după conversia a 14 milioane de imagini de pe site-ul web în AVIF măsurat folosind Real User Monitoring (RUM).

AVIF Gotchas

Cel mai mare dezavantaj pentru AVIF în prezent este că îi lipsește suportul uniform în toate browserele. Introducerea AVIF ca o îmbunătățire progresivă ajută la depășirea acestui lucru. Alte câteva aspecte în care AVIF nu îndeplinește standardele ideale pentru un format de fișier modern.

• Versiunile moderne de Chrome (Chrome 94+) acceptă redarea progresivă AVIF, în timp ce versiunile mai vechi nu. Deși la momentul scrierii nu există un codificator care să poată face aceste imagini cu ușurință, există speranța că acest lucru se va schimba.
• Codificarea și crearea imaginilor AVIF durează mai mult. Aceasta ar putea fi o problemă pentru site-urile care creează fișiere imagini în mod dinamic. Cu toate acestea, echipa AVIF lucrează la îmbunătățirea vitezelor de codare. Colaboratorii AVIF de la Google au raportat, de asemenea, niște câștiguri frumoase de performanță. De la 1 ianuarie 2021, codificarea AVIF a avut o îmbunătățire de ~47% a timpului de transcodare (aceasta este viteza 6, valoarea implicită curentă pentru libavif) și pe parcursul anului calendaristic o îmbunătățire cu 73%. Din iulie, a existat, de asemenea, o îmbunătățire cu 72% a timpilor de transcodare la viteza 9 (codificare din mers).

• Decodificarea imaginilor AVIF pentru afișare poate consuma, de asemenea, mai multă putere CPU decât alte codecuri, deși dimensiunile mai mici ale fișierelor pot compensa acest lucru.
• Unele CDN-uri nu acceptă încă AVIF în mod implicit pentru modurile lor de format automat, deoarece poate fi încă mai lent de generat la prima solicitare.

WebP

Am menționat WebP de câteva ori, dar haideți să acoperim pe scurt istoria acestuia. Google a creat formatul WebP în 2011 ca format de imagine care ar ajuta la accelerarea webului. De-a lungul anilor, a fost acceptat și adoptat pe scară largă datorită capacității sale de a comprima imaginile la dimensiuni mai mici ale fișierelor în comparație cu JPEG și PNG. WebP oferă atât compresie fără pierderi, cât și cu pierderi la o calitate vizuală acceptabilă și acceptă transparența și animația canalului alfa.

Compresia Lossy WebP se bazează pe codecul video VP8 și utilizează codificare predictivă pentru a codifica o imagine. Utilizează valorile din blocurile vecine de pixeli pentru a prezice valoarea dintr-un bloc și codifică doar diferența. Imaginile WebP fără pierderi sunt generate prin aplicarea mai multor tehnici de transformare imaginilor pentru a le comprima.

Beneficii WebP

Imaginile WebP fără pierderi sunt în general cu 26% mai mici decât PNG, iar imaginile WebP cu pierderi sunt cu 25–34% mai mici decât imaginile JPEG de calitate similară. Suportul pentru animație le face un înlocuitor excelent și pentru imaginile GIF. Următoarele arată o imagine PNG transparentă în stânga și imaginea WebP corespunzătoare în dreapta, generată de aplicația Squoosh, cu o reducere de dimensiune de 26%.

În plus, WebP oferă și alte beneficii precum:

• Transparenţă
  WebP are un canal de transparență pe 8 biți fără pierderi, cu doar 22% mai mulți octeți decât PNG. De asemenea, acceptă transparența RGB cu pierderi, care este o caracteristică unică pentru WebP.
• Metadate
  Formatul de fișier WebP acceptă metadatele foto EXIF ​​și metadatele documentelor digitale XMP (Extensible Metadata Platform). Poate conține, de asemenea, un profil de culoare ICC.
• Animaţie
  WebP acceptă imagini animate cu culori reale.

Notă: În cazul imaginilor transparente, asemănătoare unui vector, cum ar fi cele de mai sus, un SVG optimizat poate oferi în cele din urmă un fișier mai clar și mai mic în comparație cu un format raster.

Instrumente și asistență WebP

De-a lungul anilor, alte ecosisteme decât Google au adoptat WebP și există multe instrumente disponibile pentru a crea, vizualiza și încărca fișiere WebP.

Servirea și vizualizarea fișierelor WebP

WebP este acceptat astăzi pe cele mai recente versiuni ale aproape tuturor browserelor majore.

Dacă dezvoltatorii doresc să servească WebP pe alte browsere în viitor, ei pot face acest lucru folosind elementul <picture> sau solicită antete așa cum se arată în secțiunea despre AVIF.

Image Content Delivery Networks (CDN) acceptă, de asemenea, imagini receptive cu selectare automată a formatului pentru imaginile în WebP sau AVIF, în funcție de compatibilitatea browserului. Plug-in-urile WebP sunt disponibile pentru alte stive populare precum WordPress, Joomla, Drupal etc. Suportul inițial pentru WebP este disponibil și în nucleul WordPress, începând cu WordPress 5.8.

Puteți vizualiza cu ușurință imaginile WebP deschizându-le într-un browser care le acceptă. În plus, le puteți previzualiza și pe Windows și macOS folosind un supliment. Instalarea plug-in-ului Quick Look pentru WebP ( qlImageSize ) vă va permite să previzualizați fișierele WebP folosind utilitarul Quick Look. Echipa WebP a publicat biblioteci precompilate și utilitare pentru codecul WebP pentru Windows, macOS și Linux. Utilizarea acestora pe Windows vă permite să previzualizați imaginile WebP în File Explorer sau Windows Photo Viewer.

Conversia imaginilor în WebP

În plus față de bibliotecile furnizate de echipa WebP, mai multe instrumente gratuite, open-source și comerciale de editare a imaginilor acceptă WebP.

Utilitati:
La fel ca AVIF, Squoosh poate converti fișiere în WebP online, așa cum se arată în secțiunea anterioară. XnConvert este un utilitar pe care îl puteți instala pe desktop pentru a converti diferite formate de imagine, inclusiv WebP. XnConvert poate ajuta, de asemenea, la decuparea și editarea metadatelor, decuparea și redimensionarea, luminozitatea și contrastul, personalizarea adâncimii culorii, estomparea și clarificarea, măștile și filigranele și alte transformări.

Modulele Node.js:
Imagemin este un modul popular de minificare a imaginilor cu un add-on pentru conversia imaginilor în WebP (imagemin-webp). Suplimentul acceptă atât modurile WebP cu pierderi, cât și fără pierderi.

Alții:
Mai multe aplicații pentru conversia și manipularea imaginilor acceptă formatul WebP. Acestea includ Sketch, GIMP, ImageMagick etc. Este disponibil și un plugin Photoshop pentru WebP.

Utilizarea producției WebP

Datorită beneficiilor sale de compresie față de JPEG și PNG, multe companii mari folosesc WebP în producție pentru a reduce costurile și pentru a reduce timpii de încărcare a paginilor web. Google raportează economii de 30-35% folosind WebP față de alte scheme de compresie cu pierderi, deservind 43 de miliarde de solicitări de imagini pe zi, 26% dintre acestea fiind compresie fără pierderi.

Pentru a ajunge la baza sa mare de utilizatori pe piețele emergente unde datele sunt scumpe, Facebook a început să ofere imagini WebP utilizatorilor Android. Ei au observat „economii de date de 25 până la 35 la sută în comparație cu JPG și 80 la sută în comparație cu PNG”.

WebP Gotchas

La începuturile sale, un dezavantaj substanțial al WebP a fost lipsa suportului pentru browser și instrumente. Există încă puține compromisuri cu WebP atunci când luăm în considerare toate caracteristicile pe care un format modern ar trebui să le suporte în mod ideal.

• WebP este limitat la precizia culorii de 8 biți. Ca urmare, nu poate suporta imagini HDR/gamut largă.
• WebP nu acceptă imagini cu pierderi fără subeșantionare cromatică. Lossy WebP funcționează exclusiv cu un YCbCr de 8 biți 4:2:0, în timp ce WebP fără pierderi funcționează cu formatul RGBA. Acest lucru poate afecta imaginile cu detalii fine, texturi cromatice sau text colorat. Vezi mai jos pentru un exemplu.
• Nu acceptă decodarea progresivă, dar acceptă decodarea incrementală. Acest lucru poate compensa oarecum acest lucru, dar efectul asupra redării poate fi diferit.

În mod ideal, ar trebui să generați fișiere WebP din fișierele sursă de cea mai bună calitate disponibile. Conversia JPEG substandard în WebP nu este foarte eficientă, deoarece pierdeți calitatea de două ori.

rezumat

Rezumând toate informațiile despre cele patru formate JPEG, PNG, AVIF și WebP și comparând și cuantificând punctele forte și punctele slabe prezentate în secțiunea anterioară, am venit cu următorul tabel.

Notă: numărul de stele se bazează pe o opinie generală și poate diferi în anumite cazuri de utilizare.

Mai jos sunt câteva dintre punctele cheie care trebuie luate în considerare atunci când faceți referire la acest tabel.

• Compresia pentru imaginile fotografice și non-fotografice poate diferi în continuare în funcție de fidelitatea (calitatea) imaginilor. Am indicat aici un scor general.
• Ar trebui să alegeți setările de subeșantionare de calitate și croma în funcție de scopul imaginilor. Imaginile cu fidelitate scăzută până la medie pot fi acceptabile în majoritatea scenariilor de pe web, de exemplu, pentru știri, rețele sociale și comerț electronic. Site-urile web de arhivare de imagini, filme sau fotografie necesită imagini de înaltă fidelitate. Ar trebui să testați economiile reale datorate compresiei pentru fidelitate ridicată înainte de a le converti într-un alt format.
• Lipsa suportului pentru decodarea progresivă și viteza poate fi o problemă pentru codificarea/decodarea fișierelor AVIF. Pentru site-urile web cu imagini de dimensiuni medii, economiile de octeți datorate compresiei pot compensa viteza și absența decodării progresive pe măsură ce imaginile sunt descărcate rapid.
• Când comparați compresia oferită de formatele de imagine, comparați dimensiunile fișierelor la același DSSIM.
• Setarea de calitate utilizată la codificare nu trebuie să fie aceeași pentru diferite formate pentru a obține aceeași calitate a imaginilor. Un JPEG codificat la o setare de calitate de 60 poate fi similar cu un AVIF la o setare de calitate de 50 și un WebP la o setare de calitate de 65, așa cum sugerează această postare.
• Sunt încă necesare studii ample pentru a măsura impactul real asupra LCP atunci când se compară formatele.
• Nu am inclus alte formate precum JPEG XL și HEIC în această comparație. JPEG XL este încă într-un stadiu relativ incipient și numai dispozitivele Apple acceptă HEIC (în timp ce Safari nu o face). Drepturile de autor și taxele de licență complică și mai mult suportul pentru HEIC.

AVIF bifează majoritatea casetelor în general, iar WebP are un suport mai bun și oferă o compresie mai bună în comparație cu JPEG sau PNG. Ca atare, ar trebui, fără îndoială, să luați în considerare suportul WebP atunci când optimizați imaginile de pe site-ul dvs. web. Evaluarea AVIF dacă îndeplinește cerințele dvs. și introducerea acestuia ca o îmbunătățire progresivă ar putea oferi valoare pe măsură ce formatul este adoptat pe diferite browsere și platforme. Cu instrumente de comparare a calității și îmbunătățirea vitezelor de codare folosind AVIF ar deveni în cele din urmă mai ușoare.

Mulțumim Leenei Sohoni-Kasture pentru contribuția sa puternică în acest articol, precum și lui Patrick Meenan, Frank Galligan și Yoav Weiss pentru recenziile lor.

O notă zdrobitoare

La începutul acestui an, am publicat o carte nouă cu Addy, despre tot ce trebuie să știți pentru a optimiza modul în care comprimați, difuzați și mențineți imaginile - sporind performanța pe parcurs. Livrăm cărțile gratuit în toată lumea și, dacă primiți cartea acum, veți primi și o carte poștală scrisă de mână de Addy cu un mesaj personal.

• Salt la detalii ↓
• Descărcați un eșantion PDF gratuit (12MB)
• Transport aerian gratuit în întreaga lume pentru cărți tipărite.
• Ia cartea imediat.