WebP vs AVIF: Optimització d'Imatges Web | Blog SEO Ighenatt

Les imatges segueixen sent la causa número u de webs lentes. HTTP Archive confirma que representen el 50% del pes total d’una pàgina mitjana. I en la majoria de llocs que auditem, la solució és la mateixa: passar de JPEG a WebP o AVIF i implementar correctament l’element picture.

No és magia. WebP redueix la mida un 30% respecte a JPEG. AVIF, un 20-50% addicional per a fotografies. En un lloc amb cinquanta imatges de producte, la diferència és mesurable al LCP en dades de camp.

El que sovint falla no és el format. Falla la implementació. Servir AVIF sense fallback trenca la pàgina en navegadors antics. Servir WebP sense les dimensions definides causa CLS. Els detalls importen.

Formats de Nova Generació: Beneficis i Evolució

Durant anys, hem fet servir formats com JPEG (ideal per a fotografies), PNG (perfecte per a transparència) i GIF (animacions simples). Les tecnologies de nova generació combinen el millor d’aquests formats amb tècniques de compressió avançades.

WebP: Format Estàndard de Google

Aquest format desenvolupat per Google ofereix compressió tant amb pèrdua com sense pèrdua, reduint significativament la mida dels arxius.

Avantatges del format Google:

1. Mida reduïda: Els arxius són aproximadament un 30% més petits que JPEG i un 45% més petits que PNG amb qualitat similar.
2. Suport per a transparència: Com PNG, però amb menor mida.
3. Suport per a animacions: Com GIF, però més eficient.
4. Ampli suport als navegadors: La majoria dels navegadors moderns el suporten.

Exemple de comparativa de mides:

Implementació al teu lloc:

<!-- Ús bàsic del format optimitzat -->
<img src="imatge.webp" alt="Descripció clara de la imatge">

<!-- Ús amb fallback per a navegadors antics -->
<picture>
  <source srcset="imatge.webp" type="image/webp">
  <img src="imatge.jpg" alt="Descripció clara de la imatge">
</picture>

AVIF: El Futur de les Imatges Web

Aquest format més recent basat en el còdec de vídeo AV1 ofereix una compressió encara més eficient.

Avantatges principals: compressió superior (20–50% addicional), millor preservació de detalls, suport per a HDR i característiques avançades com transparència i animacions.

Limitacions: compatibilitat limitada (tot i que creixent), major temps de codificació i menor maduresa de l’ecosistema d’eines.

Comparativa de rendiment:

Estratègia d’Adopció Progressiva

La clau és utilitzar tots dos formats de manera estratègica amb un enfocament progressiu:

1. Nivell bàsic: JPEG/PNG optimitzats per a compatibilitat universal
2. Nivell intermedi: WebP amb fallback a formats tradicionals
3. Nivell avançat: AVIF amb fallback a WebP i formats tradicionals

<!-- Implementació òptima amb suport gradual -->
<picture>
  <source srcset="imatge.avif" type="image/avif">
  <source srcset="imatge.webp" type="image/webp">
  <img src="imatge.jpg" alt="Descripció detallada de la imatge" loading="lazy">
</picture>

Eines de Conversió i Optimització

Conversió d’imatges:

Per a WebP: cwebp (eina oficial), Squoosh, ImageMagick, i connectors de WordPress com Express.

Per a AVIF: avifenc (codificador oficial), Squoosh (suport complet), i eines en línia especialitzades.

Optimitzacions addicionals:

• Dimensionament responsiu amb srcset
• Lazy loading per a càrrega sota demanda
• CDN especialitzat (Cloudinary, Imgix, Cloudflare)
• Sprites CSS/SVG per a icones petites

Conclusions i Recomanacions

L’adopció de formats de nova generació representa una oportunitat significativa per millorar el rendiment web. WebP ofereix un excel·lent equilibri entre compatibilitat i eficiència, mentre que AVIF representa el futur amb compressió superior. Executa PageSpeed Insights a les deu pàgines amb més trànsit ara mateix. Si alguna dona un LCP per sobre de 2,5 segons o un CLS superior a 0,1, tens un problema concret a resoldre. Digues-nos què has trobat i t’indiquem per on començar.