Comparació de formats: JPEG, PNG, WebP i AVIF
Quatre formats cobreixen més del 99 % de les imatges a la xarxa moderna. Fan equilibris diferents entre compressió, transparència, animació i compatibilitat. Guia pràctica per triar el correcte.
Comparació al costat
Resum ràpid; a sota, l'anàlisi complet de cada format.
| Propietat | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| Compressió | Amb pèrdua | Sense pèrdues | Amb i sense pèrdues | Amb i sense pèrdues |
| Alfa (transparència) | No | Sí (8 bits) | Sí (8 bits) | Sí (complet) |
| Animació | No | Només APNG | Sí | Sí |
| Profunditat màx. de bits | 8 bits | 16 bits | 8 bits | 10/12 bits |
| Mida típica front a JPEG (fotos) | 100 % | 300–1000 % | 65–75 % | 40–60 % |
| Suport als navegadors | Universal | Universal | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| Velocitat de codificació típica | Ràpida | Ràpida | Mitjana | Lenta |
JPEG — la base universal
Com funciona
El JPEG (Joint Photographic Experts Group) es va estandarditzar el 1992 i és el més antic dels quatre. Utilitza una DCT amb pèrdua en blocs de 8×8 píxels, seguida de quantització i codificació entròpica. La qualitat es controla amb un nombre de 1 a 100. Codificadors moderns com MozJPEG n'extreuen un 10–20 % més sense canviar el bitstream, de manera que qualsevol decodificador JPEG els llegeix.
Millor per a
Contingut fotogràfic amb degradats suaus i molt de detall: retrats, paisatges, fotos de producte, imatges principals.
Pros
- Compatible amb pràcticament qualsevol visor d'imatges.
- Decodificació accelerada per maquinari gairebé a tot arreu.
- Ecosistema madur d'optimitzadors (MozJPEG, jpegli).
Contras
- Sense canal alfa: els fons s'han d'aplanar a opacs.
- Artefactes de bloc en text, traços i vores nítides.
- Només 8 bits per canal.
PNG — sense pèrdues i amb transparència
Com funciona
El PNG (Portable Network Graphics) va néixer a mitjans dels 90 com a substitut lliure del GIF. És estrictament sense pèrdues: compressió DEFLATE damunt filtres de píxels per files. Optimitzadors com oxipng (Rust) proven combinacions de filtre/compressió per a la representació mínima sense canviar un sol píxel.
Millor per a
UI, icones, captures, diagrames, traços, logotips de colors plans i tot allò que necessiti un alfa fidel.
Pros
- Sense pèrdues: els píxels tornen íntegres d'anada i tornada.
- Alfa de 8 bits, fins a 16 bits per canal.
- Suport universal.
Contras
- Gran en fotos: sovint diverses vegades més que JPEG/WebP/AVIF.
- Sense animació a l'especificació original (l'APNG és ampliació posterior).
WebP — el format web de Google
Com funciona
El WebP (2010) es basa en el còdec de vídeo VP8 i afegeix un mode sense pèrdues a banda. Ofereix un sol contenidor amb compressió amb o sense pèrdues, amb alfa i animació opcionals. Amb pèrdues sol superar el JPEG en un 25–35 % a qualitat similar. Sense pèrdues sol superar el PNG en un 20–30 %.
Millor per a
Lliurament web general quan l'AVIF encara no és segur a l'objectiu: fotos, sprites amb transparència, substituts d'GIF animat i capa de reserva sota l'AVIF.
Pros
- Un sol format per a fotos, gràfics, alfa i animació.
- Clarament més petit que JPEG i PNG a qualitat comparable.
- Ampli suport: tots els navegadors actuals des del 2020.
Contras
- 8 bits per canal: sense HDR.
- En alguns dispositius modests, es decodifica més lentament que el JPEG.
AVIF — capdavanter en compressió
Com funciona
L'AVIF (AV1 Image File Format) és un perfil d'imatge fixa del còdec de vídeo AV1
(2019, Alliance for Open Media). Admet fins a
12 bits, alfa complet, HDR, gama de colors àmplia i gra. El
codificador de referència (aom-av1 via libavif) és lent però
ofereix avui la millor compressió en fotos reals.
Millor per a
Imatges «hero», galeries i sempre que importi l'ample de banda més que la CPU. Bona
capa superior a
<picture>.
Pros
- Compressió de referència: sovint un 40–60 % més petit que el JPEG.
- Alfa, animació, HDR, gama de colors àmplia i 10/12 bits.
- Lliure de llicències i obert.
Contras
- Lent al codificar: millor en build o de manera asíncrona.
- Safari només el va afegir a la versió 16 (2022).
- En gràfics sintètics rendeix pitjor que WebP sense pèrdues o PNG.
Quin format he de fer servir?
- Fotos i imatges a pàgina sencera: AVIF primer, WebP i JPEG com a reserva via
<picture>. - UI amb transparència (icones, logotips): PNG per a llegat, WebP sense pèrdues per a pes.
- Art lineal, captures, diagrames: PNG (o WebP sense pèrdues); JPEG/AVIF castiguen vores dures.
- Substituir GIF animats: WebP o AVIF, molt més lleugers i amb alfa real.
- Un sol format a tot arreu, avui: JPEG per a fotos, PNG per a gràfics. No és el mínim, però zero deute de compatibilitat.
En la pràctica no cal quedar-se amb un. Serveix AVIF, després WebP i al final
JPEG o PNG dins d'un
<picture>: cada navegador pren la versió més petita que sap decodificar.
Preguntes freqüents
Com converteixo un JPG a WebP?
Obre PicBrewery, deixa anar el JPG a l'àrea de càrrega i es generarà WebP automàticament juntament amb JPEG, PNG i AVIF. Tria la casella WebP i la icona de descàrrega. Tot passa al navegador; el fitxer no es puja.
Com converteixo un PNG a AVIF?
Deixa anar el PNG a PicBrewery. La recodificació a JPEG, WebP i AVIF corre en paral·lel a Web Workers. Fes servir la columna AVIF per descarregar, o diverses files en un ZIP amb la variant més petita per origen.
L'AVIF és millor que el WebP?
En fotos, l'AVIF sol ser un 20–30 % més petit que el WebP a qualitat aparent similar, gràcies a l'AV1. El WebP guanya en velocitat de codificació i en compatibilitat en dispositius antics; es complementen.
Safari admet WebP?
Sí, des de la versió 14 (macOS Big Sur, iOS 14, 2020). Les versions actuals decodifiquen WebP amb i sense pèrdues.
El PNG és sempre sense pèrdues?
Sí. El DEFLATE al PNG és estrictament sense pèrdues: els píxels decodificats són idèntics a l'origen. L'estalvi ve de filtres i ajust DEFLATE (p. ex. oxipng), mai de descartar dades d'imatge.
El JPEG pot tenir transparència?
No. El JPEG clàssic no té alfa. Per a transparència, PNG, WebP o AVIF. El JPEG XL afegeix alfa, però encara no hi ha suport universal.
Quant més petit és l'AVIF que el JPEG?
Amb codificador AVIF modern (aom / libavif), les fotos solen quedar un 40–60 % per sota de MozJPEG a qualitat similar. En gràfics simples, l'estalvi és menor.
El meu navegador decodificarà AVIF?
Chrome 85+, Firefox 93+, Edge 121+ i Safari 16+ admeten l'AVIF. Per
a qualsevol navegador, fes servir <picture> amb
AVIF i WebP o JPEG com a reserva.
PicBrewery és realment al client?
Sí. Es decodifica i es recodifica en WebAssembly dins de Web Workers al dispositiu. No s'envien bytes d'imatge: només es carreguen l'aplicació estàtica i els còdecs.
Conversió entre formats
Busques una conversió concreta? Tria un parell: cada pàgina inclou passos, estalvi esperat i FAQ específic.
Prova-ho amb les teves imatges
Deixa anar un lot de JPGs a PicBrewery i compara WebP i AVIF a la mateixa fila. No es puja res.