Avand unul dintre cele mai ciudate si scurte nume pentru o tehnologie noua, WebP este un nou format de imagine, dezvoltat initial de Google. Motivul aparitiei acestui nou standard al fisierelor este de a imbunatati eficienta compresiei imaginii si de a reduce considerabil dimensiunea acestora.
Desigur, acest lucru inseamna mai putina latime de banda pentru a incarca un website si, prin urmare, site-uri web mai rapide – acesta fiind unul dintre obiectivele cheie pe care Google le doreste din partea dezvoltatorilor web. Prin urmare, oricine doreste sa se asigure ca are cea mai buna optimizare SEO pentru website-ul sau ar trebui sa faca din implementarea WebP o prioritate.
Avand incorporate atat formatele .JPG (si similare), cat si PNG (si similare), WebP este un format universal cu algoritmi de compresie diferiti pentru optimizarea ambelor stiluri de imagini.
Cum este comprimarea?
WebP este un format de imagine modern care furnizeaza comprimare cu sau fara pierderi pentru imaginile mici si imbogatite de pe web. Utilizand formatul WebP, puteti reduce dramatic dimensiunea imaginii, Google afirmand ca in medie se observa o reducere de 25-35% a dimensiunii acesteia (desi in practica veti avea si aproape 60% reducere!).
Se pierde din calitate in urma comprimarii?
Exista doua tipuri de scheme de comprimare a imaginii, lossless (ceea ce inseamna ca nu exista pierderi in calitate) si lossy. Imaginile precum JPEG au deja formatul lossy, ceea ce inseamna ca reduc dimensiunea fisierului incercand sa „combine” pixelii de culoare similara, mai degraba decat sa ii stocheze individual.
Aceasta este o simplificare importanta a modului de functionare, dar ca regula generala, cu cat este mai mare comprimarea, cu atat mai mare este si pierderea de calitate.
Ce browsere suporta formatul WebP?
Desigur, pentru a fi afisate imaginile, browserele web trebuie sa suporte in primul rand formatul imaginii. Vestea buna este ca toate browserele principale suporta formatul WebP, cu o singura exceptie, potrivit website-ului https://caniuse.com (mai, 2020).
Din pacate, Apple s-a alaturat tarziu sprijinului WebP (Google Chrome ofera suport incepand cu 2012), astfel incat pentru utilizatorii Apple va trebui sa oferiti compatibilitate inversa (nu este o limitare tehnica, la mijloc stand considerente politice).
Cum puteti oferi compatibilitate inversa?
In timp ce Apple si unele departamente coporative si/sau guvernamentale obligate sa utilizeze IE 11 vor fi singurele afectate de utilizarea WebP, din fericire tag-ul HTML img va permite sa adaugati compatibilitate inversa (backwards compatibility). Compatibilitatea inversa a unei aplicaţii, a unui tip de fisier sau echipament cu o versiune anterioara permite accesarea unui fisier creat intr-un program scris pentru o versiune mai veche a unui sistem de operare.
Iata un exemplu de cod in acest sens:
<img alt=”This is a webP image” src=”/wp-content/uploads/2020/05/testimage.webp” />
Atributul src spune browserului unde sa gaseasca fisierul, iar atributul alt furnizeaza pur si simplu un descriptor non-vizual al imaginii.
Pentru a oferi o compatibilitate inversa, putem schimba aceasta intr-o eticheta <picture>, care ar arata similar cu:
<picture> <source srcset="/wp-content/uploads/2020/05/testimage.webp" type="image/webp"> <source srcset="/wp-content/uploads/2020/05/testimage.jpg" type="image/jpeg"> <img alt=”This is a webP image” src=”/wp-content/uploads/2020/05/testimage.jpg” /> </picture>
Eticheta <picture> permite adaugarea mai multor etichete <source>, permitand browserului sa detecteze ce suporta si sa revina la un fisier JPEG sau PNG standard, dupa cum este necesar.
Desigur, acest lucru adauga complexitati semnificative daca aveti abilitati de codare a website-ului dvs., insa utilizarea unui plugin pentru site-ul dvs. va fi cea mai rapida cale de a realiza acest lucru.
Cum puteti testa si masura cat spatiu economisiti pe website?
Pentru a determina cat de mult spatiu veti economisi pe website-ul dvs., puteti utiliza Google Pagespeed Insights pentru a testa si masura diferenta.
Pentru exemplificare, am utilizat website-ul blogului nostru https://blog.hostx.ro/, iar dupa ce introduceti aceasta adresa in Google Pagespeed Insights, in sectiunea Difuzeaza imagini in formate moderne (Serve images in next-gen formats) veti putea observa:
De asemenea, Google ofera o estimare a economiei de timp pe baza dimensiunii reduse a descarcarilor, insa acesta poate varia desigur in functie de conexiunea generala la Internet.
WebP – o optiune in software-ul de editare foto?
Desi imbunatatirea formatului si a dimensiunilor este excelenta, WebP este inca o tehnologie relativ „noua” in ceea ce priveste sistemele traditionale de editare a fotografiilor. Plugin-uri precum WebPShop ofera posibilitatea de a deschide si exporta imagini WebP din Adobe Photoshop, dar deocamdata majoritatea editoarelor de imagini nu au un asemenea suport.
La un moment dat in viitor, speram sa vedem mai multe sisteme care utilizeaza WebP, astfel incat nu doar site-urile web sa poata profita de economisirea de spatiu. Pentru moment, va sugeram sa pastrati originalele in format JPEG sau PNG si sa utilizati WebP doar pentru site-ul dvs. web.
Cum utilizati WebP pe site-ul dvs. web?
Versiunea Plesk Obsidian 18.0.27 din mai 2020 prevede ca toate versiunile PHP folosesc acum cea mai recenta biblioteca de imagini GD, astfel incat toate sistemele care utilizeaza acest panou de control ofera acum suport pentru generarea acestor imagini.
Pentru website-urile construite pe WordPress, aceasta inseamna ca pluginuri precum WebP Converter for Media si WebP Express, iar multe altele pot genera aceste imagini direct de pe site-ul dvs. si va optimizeaza automat site-ul.
Desigur, va recomandam sa faceti mai intai o copie de rezerva inainte de a continua, insa toate pluginurile bune creeaza o noua imagine WebP, lasand imaginea originala neatinsa.
Va recomandam apoi sa testati site-ul dvs. atat cu propriul browser pentru a va asigura ca nu exista anomalii, cat si sa folositi Google Pagespeed Insights, astfel incat sa aveti o comparatie inainte si dupa.
Ce se intampla daca furnizorul dvs. de hosting nu accepta inca WebP?
Mai intai, intrebati furnizorul dvs. de hosting daca accepta WebP, iar daca nu, cand vor face acest lucru. Daca este vorba de un furnizor de gazduire bazat pe Plesk, atunci probabil au in plan acest lucru in curand sau intrebati daca puteti fi mutat pe un server care il accepta deja.
Daca niciunul din scenariile de mai sus nu sunt viabile, mai aveti totusi doua optiuni:
- Utilizarea unei platforme externe pentru a optimiza imaginile
Unele plugin-uri ofera aceasta optiune gratuita pentru un numar limitat de imagini, in timp ce altele percep o taxa lunara mica pentru a accesa optimizarea lor bazata pe cloud. Exista, de asemenea, servicii terte, cum ar fi Cloudflare, care pot optimiza automat imaginile pentru dvs., alegand unul din planurile sale platite.
- Mutarea la un alt furnizor de hosting
Desi aceasta este o optiune drastica pentru multi, este posibil sa gasiti un furnizor de hosting mai bun, care ofera lucruri precum cele mai recente versiuni PHP, si care sa se potriveasca mai bine afacerii dvs. daca urmariti sa oferiti experiente mai bune pentru clienti. Mai mult, furnizorii de hosting de nivel superior asigura migrare gratuita, astfel incat sa nu existe costuri suplimentare si sa nu fie implicate perioade de oprire (downtime).
Fiind acceptat de majoritatea browserelor web, acum este momentul potrivit ca website-ul dvs. sa utilizeze WebP. Prin faptul ca bibliotecile de imagini de pe serverul dvs. web accepta direct WebP, inseamna ca puteti rula conversiile gratuit.
Chiar si cu o reducere modesta a dimensiunii imaginii de 30% (desi este posibil sa vedeti 60% sau mai mult!), acest lucru poate reprezenta un castig semnificativ pentru utilizatori pe conexiuni mai putin optime, cum ar fi cazul utilizatorilor de telefonie mobila.