WebP i AVIF a la teva web d'empresa: com reduir el pes de les imatges sense perdre qualitat ni compatibilitat

Què són WebP i AVIF (i per què ja no són “opcionals”)

Si la web de la teva empresa encara serveix només JPEG i PNG, probablement estàs pagant un impost invisible a cada visita: més pes, més temps de càrrega i pitjor experiència en mòbil. WebP i AVIF són formats d'imatge moderns pensats per internet. Comprimeixen millor que el JPEG mantenint una qualitat visual similar, i l'AVIF sol anar un pas més en eficiència.

No substitueixen per si sols una bona estratègia d'imatges — convé combinar-los amb optimització d'imatges, lazy loading i, si escau, un CDN — però són una de les palanques més rendibles per accelerar pàgines amb moltes fotografies, catàlegs o portfolios.

Per què importen en una web d'empresa

En webs corporatives, les imatges solen concentrar-se a la home, serveis, casos d'èxit i blog. Cada visita descarrega desenes de recursos gràfics. Si cada foto pesa 400 KB en lloc de 180 KB, l'impacte es multiplica:

• Menys dades en mòbil — millor experiència amb connexions lentes o dades limitades.
• Millor percepció de velocitat — les pàgines es “senten” més lleugeres, sobretot a la primera impressió.
• Menys càrrega al servidor — menys ample de banda i millor rendiment global, especialment si combines formats moderns amb compressió Gzip/Brotli.
• SEO indirect — Google no posiciona per format, però sí valora pàgines ràpides i usables. Menys pes ajuda a millorar mètriques de rendiment.

WebP vs AVIF vs JPEG/PNG: diferències pràctiques

JPEG segueix sent l'estàndard universal: tot navegador l'entén. És un bon fallback, però la compressió amb pèrdua és menys eficient que WebP o AVIF.

PNG és ideal per gràfics amb transparència o línies molt definides, però pesa molt en fotografies. Per logos petits pot tenir sentit; per fotos d'equip o producte, rarament.

WebP ofereix compressió amb i sense pèrdua, transparència i animació. El suport en navegadors actuals és molt ampli (Chrome, Firefox, Safari, Edge). En la pràctica, és el format modern més segur per adoptar avui.

AVIF comprime encara millor que WebP en molts casos (de vegades 20–50 % menys pes amb qualitat similar). El inconvenient: suport algo més recent i temps de codificació més llargs. Per webs amb centenars d'imatges, convé automatitzar la conversió.

Com implementar-los sense trencar compatibilitat

La regla d'or: mai substituïs JPEG/PNG sense un pla B. La forma més robusta és l'element <picture> amb diverses fonts i un fallback clàssic:

1. Serveix AVIF a navegadors compatibles.
2. Ofereix WebP com segona opció.
3. Mantén JPEG o PNG com resposta final.

Exemple simplificat:

<picture>
  <source srcset="/img/equip.avif" type="image/avif">
  <source srcset="/img/equip.webp" type="image/webp">
  <img src="/img/equip.jpg" alt="Equip de l'empresa a l'oficina" loading="lazy" width="800" height="450">
</picture>

En catàlegs o blogs amb moltes imatges, combina picture amb srcset i sizes per servir la mida correcta segons el dispositiu. Si fas servir un CMS o framework, revisa si ja genera variants automàticament abans de muntar pipelines manuals.

On començar a la teva web (prioritats)

No cal convertir tot el lloc d'un dia per l'altre. Prioritza:

• Hero i banners principals — són les imatges més pesades i les primeres a carregar.
• Galeries de projectes i catàleg — moltes fotos d'alt impacte en pes total.
• Articles del blog — cada entrada pot incloure diverses imatges inline.
• Miniatures — petites però nombroses; WebP redueix molt l'acumulat.

Per la imatge LCP (la més gran visible en carregar), valora preload del recurs crític, però només si ja has optimitzat format i mida.

Errors freqüents que convé evitar

• Convertir sense revisar qualitat. AVIF amb compressió agressiva pot generar banding en fons degradats o pèrdua de detall en producte.
• Oblidar el fallback. Visitants amb navegadors antics o alguns lectors de correu veuran imatges trencades.
• Pujar el mateix fitxer gegant en tots els formats. Primer redimensiona a la mida màxima que realment es mostra en pantalla.
• Ignorar transparències. Si converteixes PNG amb alpha a JPEG, perdràs transparència. Usa WebP o AVIF amb canal alpha.
• No mesurar el resultat. Compara pes, LCP i percepció visual abans i després amb Lighthouse o WebPageTest.

Checklist ràpid per al teu equip

1. Audita les 10 imatges més pesades de la teva web.
2. Genera variants WebP (i AVIF si el teu stack ho permet) més un JPEG de resposta.
3. Implementa picture o la lògica equivalent al teu CMS.
4. Afegeix width, height i loading="lazy" on correspongui.
5. Verifica en mòbil real i en navegadors dels últims 2–3 anys.
6. Documenta el procés per futures pujades de contingut.

Conclusió: menys pes, mateixa marca

WebP i AVIF no canvien el teu disseny ni el teu missatge: fan que les mateixes fotografies arribin més ràpid als visitants. En una web d'empresa on la confiança es construeix en mil·lisegons, aquest detall tècnic es tradueix en millor experiència i més oportunitats de conversió.

Si vols revisar el rendiment visual del teu lloc o automatitzar l'entrega d'imatges modernes, a aatsoft ajudem empreses a optimitzar webs sense sacrificar qualitat de marca.