Les imatges dels nostres ecommerce, o dels llocs web en general, suposen una gran part del pes total de les pàgines i, per tant, són en bona mesura responsables de la seva velocitat de càrrega
És important i necessari tractar i comprimir correctament aquestes imatges.
Una botiga excessivament pesada carregarà més lentament, cosa que perjudica la navegació dels usuaris.
Per aquest motiu, cada vegada rebem més interès per l’assessorament sobre el processament correcte d’imatges, i part d’aquest interès se centra en aquests tres formats, aparentment nous i fins ara tan desconeguts.
Avui ens centrarem a parlar-ne i, concretament, de WebP, que bé podria ser el pròxim estàndard per a imatges a internet.
Però abans de res farem un breu repàs a aquests 3 formats, per saber què són i què ens poden oferir.
Formats de pròxima generació
JPEG 2000
Creat l’any 2000 pel grup Joint Photographic Experts Group, JPEG 2000 va néixer amb l’objectiu de superar el mateix JPEG, oferint una millor compressió d’imatge, amb pèrdua de qualitat o sense.
Aquest format és compatible amb bona part del programari d’edició d’imatges, i la seva popularitat varia entre sectors de l’entorn offline.
No obstant això, a l’entorn online aquest format només és compatible amb els navegadors Safari d’Apple, tant a MacOS com a IOS.
Font: www.caniuse.com
JPEG XR
Creat per Microsoft l’any 2009, amb la mateixa intenció d’aportar més qualitat d’imatge amb una mida d’arxiu més petita que el format JPEG. El seu suport en entorns online es limita als navegadors de Microsoft: Edge i Explorer.
Font: www.caniuse.com
WebP
Finalment, tenim el format WebP, creat l’any 2010 per Google amb la idea d’oferir un format específic per al web.
Igual que els altres dos formats, WebP ofereix una millor qualitat de compressió d’imatge que el format JPEG, i és compatible amb la majoria de navegadors, de manera que arriba a un 77% dels usuaris.
Per aquest motiu, el format WebP és un bon candidat a ser el pròxim estàndard de compressió d’imatges a internet.
Font: www.caniuse.com
Llavors, ja fem servir el format WebP?
Aquest format d’imatge té una bona compatibilitat entre navegadors; no obstant això, els navegadors d’Apple encara no l’admeten i això afecta un 19% dels usuaris.
Per aquest motiu, per poder fer servir aquest format (o qualsevol altre) cal afegir fallbacks al nostre codi HTML / CSS, per garantir que cap navegador es quedi sense poder mostrar les imatges.
Per exemple, fins ara, si volem inserir una imatge al nostre codi HTML, ho fem més o menys així:
<img alt=”This is my face” src=”images/mypicture.jpg”>
En canvi, si fem servir el format WebP, haurem d’invocar la imatge de la manera següent:
<picture>
<source srcset=”images/mypicture.webp” type=”image/webp”><source srcset=”images/mypicture.jpg” type=”image/jpeg”><img alt=”This is my face” src=”images/mypicture.jpg”></picture>
Com podeu veure, hem de tenir dues còpies de la imatge, una en format WebP, i una altra en JPEG per al fallback, a més d’afegir diverses línies de codi addicionals.
Amb les imatges inserides mitjançant codi CSS, haurem de crear una classe específica per a cada format i, mitjançant javaScript, amb algun plug-in com Modernizr. aplicar una classe o l’altra al nostre HTML segons si el navegador del client és compatible o no amb el nou format. Quedaria més o menys així:
.no-webp .container { background-image: url(“mypicture.jpg”); }.webp .container { background-image: url(“mypicture.webp”); }
L’ús del nou format encara requereix un volum de feina addicional que convé valorar, i per aquest motiu encara no el recomanem al 100%.
Hi ha algunes webs que han de mostrar quantitats enormes d’imatges, com seria el cas de Shutterstock, i ja han invertit en l’automatització del procés d’implementació.
Amb el temps, la compatibilitat amb aquest nou format s’anirà estenent a tots els navegadors, i serà llavors —quan puguem invocar un arxiu WebP de la mateixa manera que ho faríem amb un JPEG o un PNG— que en recomanarem l’ús.
Fins aleshores, els formats clàssics JPEG i PNG són els que tenen compatibilitat completa en tots els navegadors i, aplicant una bona compressió d’imatge des del vostre editor d’imatges preferit o amb eines online com tinypng.com, podrem oferir una navegació ràpida, d’acord amb les expectatives dels usuaris.
