Comparación de formatos: JPEG, PNG, WebP y AVIF
Cuatro formatos cubren más del 99 % de las imágenes en la web moderna. Hacen equilibrios distintos entre compresión, transparencia, animación y compatibilidad. Guía práctica para elegir el adecuado.
Comparación en paralelo
Resumen rápido; debajo, el análisis completo de cada formato.
| Propiedad | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| Compresión | Con pérdida | Sin pérdidas | Con y sin pérdidas | Con y sin pérdidas |
| Alfa (transparencia) | No | Sí (8 bits) | Sí (8 bits) | Sí (completo) |
| Animación | No | Solo APNG | Sí | Sí |
| Profundidad máx. de bits | 8 bits | 16 bits | 8 bits | 10/12 bits |
| Tamaño típico frente a JPEG (fotos) | 100% | 300–1000% | 65–75% | 40–60% |
| Soporte en navegadores | Universal | Universal | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| Velocidad de codificación típica | Rápida | Rápida | Media | Lenta |
JPEG — la base universal
Cómo funciona
JPEG (Joint Photographic Experts Group) se estandarizó en 1992 y es el más antiguo de los cuatro. Usa una DCT con pérdida en bloques de 8×8 píxeles, seguida de cuantización y codificación entrópica. La calidad se controla con un número de 1 a 100. Codificadores modernos como MozJPEG exprimen un 10–20 % más sin cambiar el bitstream, de modo que cualquier decodificador JPEG los lee.
Ideal para
Contenido fotográfico con gradientes suaves y mucho detalle: retratos, paisajes, producto, imágenes principales.
Ventajas
- Compatible con prácticamente cualquier visor de imágenes.
- Decodificación acelerada por hardware en casi todo sitio.
- Ecosistema maduro de optimizadores (MozJPEG, jpegli).
Limitaciones
- Sin canal alfa: los fondos se aplastan a opacos.
- Artefactos de bloque en texto, trazos y bordes nítidos.
- Solo 8 bits por canal.
PNG — sin pérdidas y con transparencia
Cómo funciona
PNG (Portable Network Graphics) nació a mediados de los 90 como sustituto libre de GIF. Es estrictamente sin pérdidas: compresión DEFLATE sobre filtros de píxeles por filas. Optimizadores como oxipng (Rust) prueban combinaciones de filtro/compresión para la representación mínima sin cambiar un solo píxel.
Ideal para
UI, iconos, capturas, diagramas, trazos, logotipos de colores planos y todo lo que necesite un alfa fiel.
Ventajas
- Sin pérdidas: los píxeles vuelen intactos de ida y vuelta.
- Alfa de 8 bits, hasta 16 bits por canal.
- Soporte universal.
Limitaciones
- Grande en fotos: a menudo varias veces más que JPEG/WebP/AVIF.
- Sin animación en la especificación original (APNG es ampliación posterior).
WebP — el formato web de Google
Cómo funciona
WebP (2010) se basa en el códec de vídeo VP8 y añade un modo sin pérdidas aparte. Ofrece contenedor único con compresión con o sin pérdidas, con alfa y animación opcionales. Con pérdida suele superar a JPEG un 25–35 % a calidad similar. Sin pérdidas suele superar a PNG un 20–30 %.
Ideal para
Entrega web general cuando AVIF aún no es seguro en el objetivo: fotos, sprites con transparencia, sustitutos de GIF animado y capa de respaldo bajo AVIF.
Ventajas
- Un solo formato para fotos, gráficos, alfa y animación.
- Claramente más pequeño que JPEG y PNG a calidad comparable.
- Amplio soporte: todos los navegadores actuales desde 2020.
Limitaciones
- 8 bits por canal: sin HDR.
- En algunos dispositivos modestos, decodifica más lento que JPEG.
AVIF — lidera en compresión
Cómo funciona
AVIF (AV1 Image File Format) es un perfil de imagen fija del códec de vídeo AV1
(2019, Alliance for Open Media). Soporta hasta
12 bits, alfa completo, HDR, gama amplia y grano. El
codificador de referencia (aom-av1 vía libavif) es lento pero
ofrece hoy la mejor compresión en fotos reales.
Ideal para
Imágenes principales, galerías y siempre que importe el ancho de banda más que la CPU. Buena capa superior en
<picture>.
Ventajas
- Compresión de referencia: un 40–60 % más pequeño que JPEG, con frecuencia.
- Alfa, animación, HDR, gama amplia y 10/12 bits.
- Libre de regalías y abierto.
Limitaciones
- Lento al codificar: mejor en build o de forma asíncrona.
- Safari solo lo añadió en la versión 16 (2022).
- En gráficos sintéticos rinde peor que WebP sin pérdidas o PNG.
¿Qué formato debo usar?
- Fotos e imágenes a página completa: AVIF primero, WebP y JPEG como respaldo vía
<picture>. - UI con transparencia (iconos, logos): PNG para legado, WebP sin pérdidas para peso.
- Arte lineal, capturas, diagramas: PNG (o WebP sin pérdidas); JPEG/AVIF castigan los bordes duros.
- Sustituir GIF animados: WebP o AVIF, mucho más ligeros y con alfa real.
- Un solo formato en todos lados, hoy: JPEG para fotos, PNG para gráficos. No es lo mínimo, pero cero deuda de compatibilidad.
En la práctica no hace falta quedarse con uno. Sirve AVIF, luego WebP y al final
JPEG o PNG dentro de
<picture>: cada navegador toma la versión más pequeña que sabe decodificar.
Preguntas frecuentes
¿Cómo convierto un JPG a WebP?
Abre PicBrewery, suelta el JPG en el área de carga y se generará WebP automáticamente junto a JPEG, PNG y AVIF. Elige la casilla WebP y el icono de descarga. Todo ocurre en el navegador; el archivo no se sube.
¿Cómo convierto un PNG a AVIF?
Suelta el PNG en PicBrewery. La recodificación a JPEG, WebP y AVIF corre en paralelo en Web Workers. Usa la columna AVIF para descargar, o varias filas en un ZIP con la variante más pequeña por origen.
¿Es AVIF mejor que WebP?
En fotos, AVIF suele ser un 20–30 % más pequeño que WebP a calidad aparente similar, gracias a AV1. WebP gana en velocidad de codificación y en compatibilidad en dispositivos viejos; se complementan.
¿Safari admite WebP?
Sí, desde la versión 14 (macOS Big Sur, iOS 14, 2020). Las versiones actuales decodifican WebP con y sin pérdidas.
¿PNG es siempre sin pérdidas?
Sí. DEFLATE en PNG es estrictamente sin pérdidas: los píxeles decodificados son idénticos a la fuente. El ahorro viene de filtros y ajuste DEFLATE (p. ej. oxipng), nunca de tirar datos de imagen.
¿JPEG puede tener transparencia?
No. El JPEG clásico no tiene alfa. Para transparencia, PNG, WebP o AVIF. JPEG XL añade alfa, pero aún no hay soporte universal.
¿Cuánto más pequeño es AVIF que JPEG?
Con codificador AVIF moderno (aom / libavif), las fotos suelen quedar un 40–60 % por debajo de MozJPEG a calidad similar. En gráficos simples, el ahorro es menor.
¿Mi navegador decodificará AVIF?
Chrome 85+, Firefox 93+, Edge 121+, Safari 16+. Para entrega
general, <picture> con respaldo WebP o JPEG.
¿PicBrewery es realmente en el cliente?
Sí. Decodifica y recodifica en WebAssembly en Web Workers en tu equipo. No se envían bytes de imagen: solo se cargan la app estática y los códecs.
Entre formatos
¿Buscas una conversión concreta? Elige un par: cada página incluye pasos, ahorro esperado y FAQ específico.
Pruébalo con tus imágenes
Suelta un lote de JPGs en PicBrewery y compara WebP y AVIF en la misma fila. Nada se sube.