JPG vs PNG vs WebP vs AVIF: la guia completa de formats

La pregunta «quin format faig servir?» té una resposta diferent segons què estiguis desant, i la majoria de guies que hi ha per aquí la responen malament perquè tracten els quatre formats com si competissin entre ells en igualtat de condicions. No és així: JPG i PNG resolen problemes diferents des de fa 30 anys, i WebP i AVIF són, cadascun, una millora directa sobre un dels dos. Anem a pams.

JPG: fotografies, mai gràfics amb text o vores dures

JPG comprimeix «amb pèrdua» — descarta informació real de la imatge per reduir el pes, apostant que l'ull no ho notarà. Funciona molt bé en fotografies perquè tenen transicions de color suaus i contínues, que és exactament on l'algorisme de JPG (basat en la transformada discreta del cosinus) és més eficient. Falla de manera visible en dos casos: text o línies rectes amb molt contrast (on apareixen aquells halos borrosos al voltant de les vores, anomenats artefactes de bloc), i qualsevol imatge que necessiti transparència, perquè JPG simplement no la suporta.

Fes-lo servir per a: fotografies, imatges de producte amb fons, qualsevol cosa amb molts tons de color.

PNG: gràfics, captures de pantalla, qualsevol cosa amb transparència

PNG comprimeix «sense pèrdua» — l'arxiu descomprimit és, píxel a píxel, idèntic a l'original. Això el fa perfecte per a logotips, icones, captures de pantalla i qualsevol imatge amb transparència real (el famós canal alfa), però té un cost: en fotografies, un PNG sense pèrdua pot pesar entre 5 i 10 vegades més que un JPG de qualitat visualment equivalent, perquè intenta preservar perfectament una cosa que no necessita aquesta perfecció per veure's bé.

Fes-lo servir per a: logotips, icones, captures de pantalla, gràfics amb text, qualsevol cosa amb transparència.

WebP: la millora directa sobre els dos anteriors

WebP, creat per Google el 2010, fa una cosa poc habitual: suporta tant compressió amb pèrdua (com JPG, però més eficient — entre un 25 i un 35% més lleuger a qualitat visual similar, segons les pròpies xifres de Google) com sense pèrdua amb transparència (com PNG, però també més eficient). A la pràctica, això vol dir que WebP pot substituir tant els teus JPG com els teus PNG amb un estalvi de pes notable, sense que es noti la diferència a simple vista. El suport dels navegadors va deixar de ser un problema fa anys — avui és pràcticament universal.

Fes-lo servir per a: pràcticament tot, tret que necessitis compatibilitat amb programari molt antic que no el reconegui.

AVIF: encara més lleuger, amb una salvetat

AVIF (2019) fa servir el còdec de compressió de vídeo AV1 aplicat a imatges fixes, i en les proves de compressió sol superar WebP — sovint entre un 20 i un 50% més lleuger a qualitat comparable, depenent molt del contingut de la imatge. La salvetat és doble: codificar un AVIF és computacionalment més lent que WebP (una cosa que només importa si processes milers d'imatges en un servidor, no si en converteixes unes poques de manera puntual), i tot i que el suport dels navegadors ja és alt, encara va un pas per darrere de WebP en compatibilitat universal.

Fes-lo servir per a: quan el pes de l'arxiu és la prioritat absoluta i pots assumir el petit risc de compatibilitat, o com a millora progressiva al costat d'un WebP de reserva.

La taula ràpida

• Fotografia per a web → WebP (o AVIF si vols exprimir l'últim byte)
• Logo o icona → PNG, o WebP sense pèrdua si el pes importa
• Captura de pantalla amb text → PNG
• Imatge amb transparència → PNG o WebP, mai JPG
• Màxima compatibilitat amb qualsevol programari antic → JPG per a fotos, PNG per a la resta