Ce este WebP și Cum să Utilizați Acest Format de Imagine în WordPress

Ce este WebP și Cum să Utilizați Acest Format de Imagine

Cuprins: arată

Deoarece imaginile reprezintă de obicei 50% din greutatea medie a unei pagini web, orice puteți face pentru a vă optimiza imaginile nu numai că vă economisește spațiu pe server, ci vă asigură că paginile dvs. sunt difuzate mai rapid.

Din fericire, cu formatul de imagine WebP, puteți crea imagini mai mici, mai bogate, cu dimensiuni cu 26% mai mici decât PNG-urile și cu 25-34% mai mici decât JPEG-urile – păstrând în același timp aceeași calitate.

În această postare, vom analiza ce este WebP și cum să utilizați acest format de imagine pe site-ul dvs. WordPress pentru a reduce dramatic dimensiunea imaginilor.

Ce este WebP?

WebP este un format de fișier de imagine creat de echipa de performanță web de la Google, dezvoltat ca înlocuitor pentru JPEG, PNG și GIF, acceptând în același timp o bună compresie, transparență și animații.

A fost anunțat pentru prima dată în septembrie 2010 ca un nou standard deschis pentru grafica de culoare adevărată comprimată, cu pierderi de pe web, producând dimensiuni mai mici de fișiere de calitate comparabilă cu JPEG.

Suportul pentru imagini fără pierderi și translucide a fost anunțat în 2012, făcând din WebP o alternativă la formatul PNG.

Compresia cu pierderi WebP utilizează codificare predictivă pentru a codifica o imagine – aceeași metodă utilizată de codecul video VP8 pentru a comprima cadrele cheie din videoclipuri. Codificarea predictivă funcționează utilizând valorile din blocurile vecine de pixeli pentru a prezice valoarea într-un bloc și apoi codifică doar diferența.

Compresia fără pierderi a WebP utilizează fragmente de imagine deja văzute pentru a reconstrui noi pixeli și poate utiliza o paletă locală dacă nu se găsește nicio potrivire.

După cum puteți vedea în exemplele de mai jos din galeria WebP Google, nu există nicio diferență vizibilă între calitatea imaginilor JPEG din stânga și versiunile WebP din dreapta. Ceea ce nu vedeți, cu excepția cazului în care verificați dimensiunea fișierului, este că imaginile WebP sunt cu peste 30% mai mici decât cele JPEG.

Așa cum am discutat anterior pe acest blog, atunci când vine vorba de greutatea paginii, dimensiunea contează. La urma urmei, cu cât dimensiunea fișierului unei pagini web este mai mică, cu atât se va încărca mai repede. Este o nebunie, dar este adevărat.

Prin urmare, reducând dimensiunile fișierelor imaginilor dvs. utilizând un format precum WebP, în combinație cu alte tehnici, cum ar fi caracteristica de Lazy loading a WP Rocket, puteți difuza imagini mai mici și vă puteți asigura că paginile dvs. sunt livrate mai rapid vizitatorilor site-ului dvs. Nu în ultimul rând, utilizând formatul WebP, veți optimiza metrica Largest Contentful Paint, unul dintre scorurile Core Web Vitals.

Suport Pentru Browser și Pentru Formatul WebP

S-ar putea să vă întrebați, deoarece WebP există de opt ani, de ce nu este mai popular? De ce mai folosim JPEG și PNG atunci când WebP poate produce dimensiuni mai mici de fișiere de calitate comparabilă?

La fel ca multe tehnologii de pe web care se luptă să-și găsească locul, nu toate browserele moderne acceptă WebP. Potrivit Can I use …, browserele care acceptă formatul WebP sunt Chrome, Opera, Opera Mini, browserul Android și Chrome pentru Android.

Microsoft a anunțat că va sprijini formatul WebP în browserul Edge în octombrie anul trecut, Mozilla făcând un anunț similar la scurt timp pentru Firefox. Acum, este doar Safari-ul de la Apple care rămâne în urmă, fără nicio compatibilitate.

După ce a arătat inițial interesul în susținerea formatului de imagine când a adăugat suport pentru WebP în iOS 10 și macOS Sierra, Apple l-a înlocuit ulterior cu HEIF, un format de imagine bazat pe standardul de compresie video HEVC (cunoscut și sub numele de H.265 și partea MPEG-H 2).

Deși nu au existat indicații recente că Apple va sprijini formatul WebP în viitor, compania are puține opțiuni acum, deoarece toate celelalte browsere majore și software-ul de editare a imaginilor îl acceptă.

Utilizarea WebP – cu JPEG/PNG ca Alternativă

Doar pentru că Apple nu acceptă formatul WebP nu înseamnă că nu ar trebui să utilizați formatul. Este posibil să livrați fișiere WebP vizitatorilor care utilizează browsere acceptate în timp ce afișați JPEG-uri și PNG-uri ca o rezervă pentru utilizatorii Safari.

În acest fel, în loc să livrați WebP tuturor utilizatorilor și să riscați ca utilizatorii Safari să vadă imagini sparte, vă puteți asigura că toți vizitatorii site-ului dvs. vă văd imaginile – în timp ce utilizatorii cu browsere acceptate au o experiență mai rapidă.

Dar înainte de a decide dacă utilizați sau nu formatul WebP pe site-ul dvs., trebuie să țineți cont de câteva lucruri.

În primul rând, să știți că Chrome este cel mai popular browser cu o cotă de piață de 64%. Deci, este foarte probabil ca majoritatea vizitatorilor site-ului dvs. să poată vizualiza orice imagini WebP pe site-ul dvs.

Este o idee bună să verificați în Google Analytics pentru a vedea ce browsere utilizează vizitatorii dvs. înainte de a efectua această manevră pentru a merge cu această metodă sau pentru a afișa WebP ca pe urmă să aveți surprize.

Aici, puteți vedea vizitatorii site-ului care utilizează în mod covârșitor Chrome și Firefox, ceea ce înseamnă că 83% dintre vizitatorii mei ar beneficia dacă aș folosi formatul WebP.

Pe de altă parte, Safari este al treilea cel mai popular browser care beneficiază de o opțiune de imagine de rezervă.

Cum se Folosește WebP cu WordPress

WordPress 5.8 a adăugat suport WebP, așa că acum puteți încărca imaginile dvs. WebP din tabloul de bord. Cu toate acestea, WordPress nu convertește formatul original în WebP.

Puteți oricând să vă convertiți imaginile în format WebP – trebuie să utilizați un plugin.

Cu plugin-ul WebP Express gratuit, puteți difuza imagini WebP generate automat către browserele care acceptă WebP, în timp ce servesc în continuare JPEG-uri / PNG-uri utilizatorilor Safari. Această opțiune funcționează pe orice imagine de pe site-ul dvs., inclusiv pe cele din biblioteca media, galerii și teme.

Funcția Jetpack’s Site Accelerator (cunoscută anterior ca Photon) convertește automat JPEG și PNG în formatul de imagine WebP.

Iată un exemplu de calitate a compresiei pe care API-ul Photon o oferă atunci când este setată la 50%:

Alternativ, puteți utiliza CDN-ul. Utilizatorii Cloudflare cu planuri plătite pot accesa funcția Polish a CDN, care oferă conversie automată WebP. La fel ca celelalte soluții pe care le-am menționat mai sus, polish funcționează schimbând imaginile JPEG și PNG ale unei pagini cu versiunile WebP pentru browserele care acceptă acest tip de fișier.

Pluginul Imagify acceptă acum imagini WebP!

La începutul lunii mai 2019, WP Media (compania din spatele WP Rocket) a lansat Imagify 1.9.

Această versiune majoră a introdus în cele din urmă caracteristica pe care mulți dintre clienții lor o așteptau: asistență WebP!

Acum, pentru fiecare imagine pe care o optimizați cu pluginul Imagify, veți obține și versiunea sa WebP (dacă bifați opțiunea din setări); în biblioteca dvs. media, va rezulta următoarele versiuni de imagine:

Imagine optimizată de dimensiuni complete
Imagine WebP de dimensiuni mari
Miniaturi optimizate
Miniaturi WebP

Optimizarea va funcționa și pentru imaginile incluse în temele și pluginurile dvs.

Dacă doriți, Imagify poate afișa și imagini WebP pe front-end în două moduri:

etichetă <picture>
rescrie reguli în fișierul .htaccess.

Prima opțiune înlocuiește etichetele <img> cu etichetele <picture>.

Aceasta ar trebui să fie soluția preferată, dar rețineți că unele teme se pot rupe: deci, dacă alegeți această opțiune, asigurați-vă că verificați dacă totul se afișează corect pe front-end.

A doua opțiune adaugă reguli de rescriere în fișierul de configurare al site-ului dvs. (.htaccess) și nu modifică codul paginilor dvs. Un detaliu important de luat în considerare: această opțiune nu funcționează cu CDN-urile!

Dar imaginile deja optimizate?

Dacă ați păstrat o copie de rezervă a imaginilor originale, aveți posibilitatea de a crea versiunea lor WebP separat (una câte una sau prin optimizare în bloc).

Descărcați gratuit Imagify!

Comparație JPG/PNG vs WebP

Echipa Google de performanță web promite imagini fără pierderi WebP cu 26% mai mici decât PNG-urile și imagini fără pierderi WebP cu 25-34% mai mici decât imaginile JPEG. Așa că am făcut câteva teste de comparație pentru a vedea diferențele de mărime care ar putea fi realizate cu WebP.

Comparând JPEG cu WebP

Descărcat șase imagini JPEG aleatorii de pe Unsplash, le-am comprimat pentru a vedea ce fel de economii aș putea obține și apoi am convertit imaginile originale în WebP pentru a le compara.

Conversia la WebP a dus la o scădere medie cu 50% a dimensiunii imaginii.

Am fost surprins să văd diferența de dimensiune între versiunile JPEG și WebP pentru image4.jpg, dar fundalul roz bate mult în explicarea diferenței mari de dimensiuni. Mai jos, puteți vedea cele două versiuni una lângă alta. Imaginea JPEG din stânga este ușor mai clară decât imaginea WebP din dreapta.

Comparând PNG cu WebP

Din nou, am ales șase imagini la întâmplare, de data aceasta fișiere PNG de pe freepngs.com. Le-am comprimat și apoi am convertit imaginile originale în WebP pentru a le compara.

Cele mai mari diferențe în dimensiunea fișierului au fost pentru imaginile detaliate ale frunzelor și ale unui aparat de cafea (image4.png și image5.png, respectiv), în timp ce cea mai mică diferență a fost pentru imaginile alb-negru ale unei pisicuțe (image3.png).

În general, conversia de la PNG la WebP a dus la o scădere medie cu 67% a dimensiunii fișierului.

Concluzie

Formatul de fișier WebP continuă să crească în popularitate și asistență, dar există multe de câștigat din acest format de fișier. Poate înlocui formatele de fișiere JPEG și PNG (și GIF!) Cu compresie fără pierderi, dar oferă dimensiuni de fișiere dramatic mai mici.

Într-adevăr, nu există un alt format de imagine sau instrument de optimizare a imaginii pentru web care să poată obține dimensiuni mai mici de fișiere, fără pierderi notabile de calitate, la fel ca WebP. De aceea, vă recomandăm să începeți să utilizați formatul WebP pentru a vă îmbunătăți performanța site-ului. Mai ales că acum știți ce este WebP!