JPG vs PNG vs WebP vs AVIF: qué formato usar y cuándo

Cuatro siglas, cuatro promesas. JPG es el clásico de las fotos,PNG la roca para gráficos, WebP el comodín moderno yAVIF la nueva generación con los archivos más pequeños. Cada formato tiene un terreno propio, y mezclarlos mal se paga en ficheros inflados, artefactos visibles o subidas que fallan.

Esta comparativa explica cada formato en un minuto, aclara qué admiten los navegadores y da una recomendación concreta por caso de uso. Para profundizar en la mecánica de compresión, nuestraguía para comprimir sin perder calidadentra en detalle.

JPG — el clásico para fotos

JPG (formalmente JPEG) se estandarizó en 1992 y sigue cubriendo un tercio de las imágenes de la web. Su mecanismo es simple: la imagen se divide en bloques de 8×8, se aplica a cada bloque una transformada de coseno discreta y se cuantifica el resultado de forma agresiva. Las frecuencias altas (detalles finos) se redondean más fuerte que las frecuencias bajas (formas generales), y como el ojo humano es mucho más sensible a estas últimas, las fotos encajan tan bien en este formato.

No soporta transparencia y es con pérdida: recodificar el mismo archivo cinco veces produce una imagen cada vez más suave. A cambio, lo abre prácticamente todo: navegadores, cámaras, CMS. Codificadores modernos como mozjpeg producen archivos entre un 10 % y un 20 % más pequeños, a calidad percibida equivalente, que las bibliotecas antiguas.

Ideal para: fotos, imágenes principales, grandes gráficos web con degradados.

Evitar para: logos, capturas, iconos, todo lo que tenga bordes nítidos o texto.

PNG — sin pérdida y transparente

PNG nació como sucesor sin pérdida de JPG y funciona de otra manera: en lugar de tirar información, elimina redundancia. Línea a línea, cada píxel se predice a partir de sus vecinos (Sub, Up, Average, Paeth), se guarda solo la pequeña diferencia y al final el bloque pasa por deflate, el mismo algoritmo que usa ZIP.

Resultado: una captura de UI con colores planos cae a una fracción de su tamaño, y un logo con transparencia se mantiene afilado. La pega: en fotos, PNG suele terminar entre cinco y diez veces más grande que un JPG, porque las fotografías apenas contienen redundancia que se pueda comprimir.

Ideal para: logos, capturas de UI, iconos, imágenes con fondo transparente.

Evitar para: fotos, banners grandes sin transparencia.

WebP — el comodín moderno

WebP lo publicó Google en 2010 y soporta compresión con y sin pérdida. En modo con pérdida usa un predictor intra estilo VP8: predice cada bloque a partir de sus vecinos y codifica solo el residuo. A igual calidad percibida, produce archivos un 25–35 % menores que JPG; en modo sin pérdida, gana típicamente un 20–30 % frente a PNG.

El soporte en navegadores ya es total: Chrome, Firefox, Safari y Edge lo abren sin problema. Si necesitas atender clientes muy antiguos (algunos boletines o clientes de correo), sirve un fallback JPG o PNG. WebP también admite transparencia, animación e incluso canales alfa: en la práctica es el heredero de JPG y PNG en un único formato.

AVIF — el más pequeño, el más reciente

AVIF aplica a las imágenes fijas el códec de vídeo AV1 que usan los servicios de streaming para sus contenidos 4K. El resultado es impresionante: a igual calidad visual, AVIF suele ser un 40–50 % menor que JPG, y en modo sin pérdida supera incluso al WebP sin pérdida.

La cara opuesta: el tiempo de codificación es claramente mayor y algunas herramientas (ciertos CMS, ciertos editores de imagen) aún no lo abren de forma estable. Safari solo lo admite desde la versión 16, lo que significa que un porcentaje pequeño de visitantes necesitará un fallback JPG. Aun así, para el consumo web mayoritario AVIF suele ser la mejor opción: los pocos bytes extra que ahorra frente a WebP se notan en cada métrica de Core Web Vitals.

¿Qué formato y cuándo?

Regla rápida: ¿foto? con pérdida. WebP o AVIF son hoy la norma y JPG se queda como fallback para clientes antiguos. ¿Gráfico con bordes o transparencia? sin pérdida. PNG o WebP sin pérdida. ¿Animación?WebP para bucles cortos, vídeo MP4 para más de unos segundos. Si tienes dudas, pruébalo. Elconvertidor de ImagElite muestra el tamaño y la vista previa uno al lado del otro y te deja decidir visualmente qué formato encaja mejor con tu imagen, sin que nada salga de tu dispositivo.