Cómo funciona la compresión de imágenes: JPEG, PNG, WebP y AVIF explicados

La respuesta práctica

La compresión de imágenes no es una competición en la que un formato gane siempre. Es un conjunto de compromisos: qué detalle puedes descartar, qué detalle debe permanecer exacto, cuánta CPU puedes gastar y dónde tiene que funcionar el archivo tras exportarlo.

Usa esto como punto de partida práctico:

• Usa JPEG para fotos que necesiten máxima compatibilidad, sobre todo en correo, descargas, apps antiguas, portales de impresión y formularios de subida estrictos.
• Usa PNG para capturas de pantalla, capturas de interfaz, diagramas, logotipos y gráficos transparentes cuando los píxeles deben quedar exactos.
• Usa WebP como formato web moderno del día a día cuando quieras archivos más pequeños que JPEG o PNG con amplio soporte de navegador.
• Usa AVIF para imágenes fotográficas grandes y muy visitadas cuando tu sitio pueda servir fallbacks WebP o JPEG y tolere una codificación más lenta.

Suena simple, pero los detalles importan. Una foto de producto, una foto de pasaporte, una captura de software y una marca de agua transparente son todas "imágenes". No se comprimen igual.

Elige por la tarea, no por la extensión

Antes de meterte con los códecs, decide qué debe hacer la imagen:

También es la razón por la que los consejos de formato pueden parecer contradictorios. "Usa AVIF porque es más pequeño" puede ser buen consejo para una imagen principal en un build de sitio estático. El mismo consejo puede ser malo para una imagen subida por un cliente que debe aceptar un formulario oficial, un cliente de correo o un CMS antiguo.

Las dos familias de compresión

Todos los formatos de imagen de esta guía usan compresión sin pérdida, compresión con pérdida o ambas.

Compresión sin pérdida elimina la redundancia matemática y reconstruye exactamente los mismos píxeles al decodificar. Si una captura tiene fondo blanco, colores repetidos de interfaz y bordes rectos repetidos, un formato sin pérdida puede describir esos patrones de forma compacta. PNG es el formato web sin pérdida clásico. WebP también tiene un modo sin pérdida.

Compresión con pérdida descarta permanentemente información de la imagen para reducir el archivo. El truco está en descartar información que la gente es menos probable que note al tamaño final de visualización. JPEG es con pérdida. WebP y AVIF pueden ser con o sin pérdida, aunque la mayor parte de la entrega web usa sus modos con pérdida para fotos.

El error que hay que evitar es tratar "con pérdida" como automáticamente malo y "sin pérdida" como automáticamente profesional. Para una foto de blog a 1600 px, un WebP con pérdida cuidadosamente comprimido puede verse igual en la página y ahorrar mucho ancho de banda. Para una captura de software con texto de menú pequeño, una exportación con pérdida puede verse borrosa aunque el tamaño de archivo sea excelente.

Los cuatro formatos de un vistazo

El patrón no es "el más nuevo siempre gana". Los formatos nuevos pueden hacer más análisis y empaquetar datos con mayor eficiencia, pero eso puede costar tiempo de codificación, tiempo de QA y complejidad de fallbacks.

Por qué el mismo número de calidad no es la misma calidad

Un JPEG guardado con calidad 80 y un WebP guardado con calidad 80 no usan la misma escala. El número se pasa al modelo propio de cada codificador. Afecta a decisiones internas distintas y puede mapearse de forma diferente según la herramienta.

Por eso la compresión práctica necesita dos comprobaciones:

1. Mira la imagen al tamaño en que aparecerá. Una miniatura de tarjeta de producto debe juzgarse como miniatura de tarjeta de producto, no al 400 % de zoom.
2. Compara bytes cuando la imagen ya tenga las dimensiones correctas. Redimensionar un original de cámara de 5000 px a una imagen web de 1600 px suele ahorrar más que bajar demasiado el regulador de calidad.

Si vas a convertir una carpeta por lotes, prueba unos cuantos casos difíciles antes de exportarlo todo: una cara, un cielo, una sombra oscura, una captura llena de texto, un borde transparente y una foto de interior con ruido.

JPEG: por qué las fotos quedan pequeñas y por qué el texto queda feo

JPEG es el viejo caballo de batalla para imágenes fotográficas porque está construido en torno a cómo se comportan las fotos. La Library of Congress señala que la familia JPEG se usa habitualmente para imágenes de tono continuo, a todo color y en escala de grises, y que el proceso clásico usa una transformación por bloques de 8×8. En castellano llano: JPEG parte la imagen en pequeños bloques, convierte cada bloque en información de frecuencia y luego cuantiza los detalles que el observador es menos probable que note.

Funciona bien para:

• caras, ropa, edificios, paisajes y fotos de comida;
• gradientes naturales como cielo, sombras y tonos de piel;
• imágenes que no necesitan píxeles transparentes;
• archivos que deben abrirse casi en cualquier sitio.

Funciona mal para:

• texto pequeño en capturas de pantalla;
• iconos y logos con bordes duros;
• diagramas de color plano;
• archivos que se editarán y reexportarán repetidamente;
• imágenes transparentes, porque JPEG no tiene canal alfa.

Los artefactos JPEG más reconocibles son los bordes de bloque, el ringing alrededor del texto, el ruido mosquito en detalles muy contrastados y el banding en gradientes suaves. No son aleatorios. Son los efectos secundarios visibles de la compresión con pérdida por bloques.

Puntos fuertes

• Soporte muy amplio en navegadores, sistemas operativos, apps, clientes de correo, formularios y proveedores
• Eficiente para fotos de cámara y otras imágenes de tono continuo
• Rápido de codificar y decodificar en flujos habituales
• Fácil de previsualizar, adjuntar, subir y compartir

Puntos débiles

• Sin soporte de transparencia
• Artefactos alrededor de texto, bordes y gráficos de color plano
• Las exportaciones con pérdida repetidas pueden acumular daño
• Suele ser mayor que WebP o AVIF a calidad visible similar para fotos web

Cuándo usar JPEG

Usa JPEG cuando la compatibilidad importe más que los últimos kilobytes: subidas de fotos de pasaporte, portales de documentos, adjuntos de correo, portales de proveedor, imprentas, CMS antiguos y fuentes <img> de fallback. Úsalo también cuando el archivo sea principalmente una foto y no se necesite transparencia.

PNG: por qué las capturas quedan nítidas y por qué las fotos son enormes

PNG se diseñó para imágenes rasterizadas portátiles y sin pérdida. La especificación PNG del W3C cubre PNG estático y PNG animado, y el formato admite color indexado, escala de grises, truecolor y transparencia alfa opcional.

Para el trabajo diario en web, la clave es simple: PNG conserva los píxeles. Puede filtrar las filas de la imagen para hacerlas más predecibles y luego comprimir el resultado con DEFLATE. Si la imagen tiene colores repetidos y bordes definidos, funciona de maravilla.

Buenos candidatos para PNG:

• capturas de software con texto pequeño;
• diagramas de UI y tablas comparativas exportadas como imagen;
• logotipos cuando SVG no está disponible;
• superposiciones transparentes, sellos y marcas de agua;
• gráficos que pueden reeditarse.

Malos candidatos para PNG:

• fotos de cámara;
• grandes imágenes principales de sitios web;
• fotos de producto con textura natural;
• imágenes de galería donde el tamaño del archivo importa más que los píxeles exactos.

Una foto en PNG suele ser enorme porque PNG está haciendo su trabajo. Está conservando ruido, textura fina, variaciones diminutas del sensor y cada cambio sutil de color que un códec fotográfico con pérdida simplificaría.

Puntos fuertes

• Reproducción de píxeles sin pérdida
• Transparencia por canal alfa
• Texto nítido y bordes duros
• Compresión potente para gráficos planos y repetitivos
• Formato fiable para másters editables y flujos con transparencia

Puntos débiles

• Archivos grandes para fotografías
• Sin modo con pérdida en flujos PNG normales
• Puede ser más pesado que WebP para gráficos web transparentes cuando WebP está aceptado

Cuándo usar PNG

Usa PNG cuando los píxeles exactos importen: capturas, documentación de UI, diagramas, gráficos simples y recursos transparentes que necesiten soporte predecible. No uses PNG como opción por defecto para fotos de cámara salvo que necesites deliberadamente una copia de trabajo sin pérdida.

WebP: el estándar web moderno práctico

WebP es útil porque cubre varias tareas en un solo formato. La documentación de Google describe WebP como un formato que admite compresión con pérdida, sin pérdida, transparencia, animación, metadatos y perfiles de color. Eso lo hace más flexible que JPEG y a menudo más pequeño que PNG para la entrega web.

WebP con pérdida se basa en una codificación predictiva estilo VP8 en lugar del flujo únicamente DCT y más antiguo de JPEG. WebP sin pérdida usa un conjunto distinto de transformaciones y codificación de entropía. El resultado práctico importante es que WebP suele ser un buen valor por defecto para bibliotecas de imágenes de sitios: fotos de blog, cuadrículas de producto, miniaturas, ilustraciones ligeras y muchos recursos transparentes.

Pero WebP no es magia y no es el mejor archivo para mandar a todas partes. Un navegador puede soportar WebP mientras un cliente de correo, un formulario de subida, una app de diseño antigua, una plataforma social o un flujo de imprenta lo rechaza. Por eso JPEG y PNG siguen importando como formatos de entrega o compatibilidad.

Puntos fuertes

• Suele ser más pequeño que JPEG para fotos a calidad visible similar
• Admite transparencia alfa
• Admite modos con y sin pérdida
• Amplio soporte moderno de navegadores
• Codificación rápida comparada con AVIF

Puntos débiles

• Todavía lo rechazan algunos clientes de correo, formularios, apps antiguas, plugins de CMS y flujos de imprenta
• No es un sustituto real de los logos SVG ni de los archivos fuente de diseño editables
• Puede ser mayor que AVIF en algunas imágenes fotográficas grandes

Cuándo usar WebP

Usa WebP para la mayoría de la entrega moderna de imágenes de sitios web cuando controlas la página. Es una opción por defecto sólida para imágenes de blog, fotos de tarjeta de producto, miniaturas y muchos recursos web transparentes. Mantén JPEG o PNG disponibles cuando la imagen salga de tu web y entre al sistema de otra persona.

AVIF: la opción de alta compresión que necesita una canalización

AVIF almacena datos de imagen codificados con AV1 en un formato basado en HEIF. La especificación AVIF incluye soporte para imágenes SDR y HDR, casos de uso de gama amplia, imágenes auxiliares como alfa y funciones de codificación más avanzadas. web.dev también señala que las mejoras de compresión de AVIF dependen del contenido, los ajustes del codificador y el objetivo de calidad.

Para equipos web normales, la historia práctica es esta: AVIF puede ser excelente para fotos grandes, pero es más un formato de canalización que un formato para compartir casualmente. Puede tardar más en codificarse, el soporte de vista previa en herramientas antiguas puede quedarse atrás y la gestión de fallbacks importa más.

Buenos candidatos para AVIF:

• imágenes principales grandes;
• landings con mucha foto;
• galerías editoriales;
• imágenes de alto tráfico servidas muchas veces tras una codificación;
• imágenes donde HDR, alta profundidad de bits o gama amplia forman parte del flujo.

Candidatos débiles para AVIF:

• formularios de subida estrictos;
• adjuntos de correo;
• imágenes que compañeros de equipo necesitan abrir en herramientas antiguas;
• miniaturas diminutas donde el ahorro no justifica la complejidad de la canalización;
• capturas con texto pequeño salvo que pruebes con cuidado.

Puntos fuertes

• Compresión a menudo excelente para fotografías e imágenes complejas
• Transparencia alfa, HDR y gama amplia
• Útil como primera fuente en una pila <picture> moderna
• Buen encaje para generación de imágenes en build o en CDN

Puntos débiles

• La codificación puede ser lenta, sobre todo en grandes lotes
• El soporte de herramientas es menos predecible que en JPEG, PNG o WebP
• Necesita fallback WebP, JPEG o PNG para una entrega de producción más segura

Cuándo usar AVIF

Usa AVIF cuando la imagen sea lo bastante grande y se repita lo suficiente como para que los bytes menores justifiquen el trabajo extra de canalización. Una imagen principal en una home muy visitada es un buen candidato. Un icono de 90 px, un adjunto de correo puntual o un formulario oficial de subida normalmente no.

Por qué PNG puede ganar a JPEG en capturas

Una sorpresa común: una captura en PNG puede ser más pequeña y más limpia que la misma captura en JPEG.

Ocurre porque las capturas suelen estar llenas de estructura repetida. Un fondo blanco de documento, una barra de herramientas gris, texto negro recto, unos pocos colores de icono y espaciados repetidos de UI son fáciles de describir para una compresión sin pérdida. JPEG no sabe que el texto debe permanecer exacto. Intenta simplificar la imagen como si fuera una foto, y el resultado puede ser un archivo no mucho más pequeño y peor alrededor de letras y bordes.

Si la captura es sobre todo una foto, WebP o JPEG pueden ganar. Si es sobre todo interfaz, texto y color plano, empieza por PNG o WebP sin pérdida.

Por qué las fotos necesitan compresión con pérdida

Las fotos de cámara son distintas. Contienen ruido del sensor, textura fina, sombras suaves, gradientes irregulares y millones de cambios diminutos de píxel a píxel. La compresión sin pérdida tiene menos repetición que aprovechar, así que a menudo no puede reducir el archivo lo suficiente para la entrega web.

Los formatos fotográficos con pérdida funcionan porque a quien mira suele importarle el sujeto, la composición, el color y la nitidez percibida, no cada píxel original. Un JPEG, WebP o AVIF cuidadosamente comprimido puede eliminar información difícil de ver al tamaño final.

El peligro es apretar demasiado. Ajustes de calidad bajos pueden aplanar la piel, emborronar tejidos, destruir el detalle de las hojas, añadir bordes de bloque o generar banding en cielos y sombras. Si esas zonas importan a la imagen, usa una calidad más alta o un archivo de visualización mayor.

Usa fallbacks para la entrega web moderna

Cuando controlas un sitio, no tienes por qué elegir un solo formato. El patrón habitual en producción es servir primero el formato moderno más pequeño y mantener fallbacks más seguros detrás.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="Foto de producto en primer plano con luz natural"
    width="1200"
    height="800"
  >
</picture>

El navegador usa la primera fuente que admite. Los navegadores con AVIF pueden obtener el archivo AVIF. Los que no usan AVIF pueden probar WebP. Los clientes más antiguos o estrictos siguen contando con el fallback JPEG.

Usa PNG en lugar de JPEG como fallback cuando la imagen necesite transparencia o texto exacto.

Un flujo práctico de compresión

Para una imagen:

1. Parte de la fuente de mayor calidad que tengas.
2. Redimensiona primero al tamaño real de visualización más grande.
3. Elige el formato según la tarea de la imagen.
4. Exporta uno o dos ajustes de calidad.
5. Compara el resultado en la página real o en el destino de subida.
6. Conserva el archivo máster para no tener que recomprimir la copia publicada.

Para una carpeta de sitio:

1. Elige un conjunto representativo antes de convertir el lote completo.
2. Incluye fotos, capturas, gráficos transparentes, miniaturas y una imagen oscura difícil.
3. Prueba WebP como formato moderno de base.
4. Prueba AVIF solo donde el ahorro de bytes vaya a importar.
5. Mantén fallbacks JPEG o PNG en los lugares que los necesiten.
6. Comprueba el peso del archivo después de redimensionar, no antes.

PhotoTools puede ayudar en los pasos intermedios. Usa Redimensionar cuando la fuente sea demasiado grande para la página, Comprimir para ajustar peso y calidad, y los conversores de formato cuando un destino necesite un tipo de archivo concreto. La conversión y la compresión ocurren en tu navegador, así que la imagen no se sube a ningún servidor durante el flujo de la herramienta.

Cómo convertir entre formatos

PhotoTools convierte entre JPG, PNG, WebP, AVIF y HEIC directamente en tu navegador. Suelta tus imágenes, elige el formato de destino, previsualiza el resultado y descarga el nuevo archivo.

Usa el conversor según el destino:

• ¿Necesitas un archivo que funcione en casi cualquier formulario o app? Convierte a JPEG.
• ¿Necesitas transparencia o píxeles exactos de captura? Convierte a PNG o WebP sin pérdida.
• ¿Necesitas una imagen web más pequeña y el sitio la acepta? Convierte a WebP.
• ¿Necesitas la máxima compresión para una canalización web controlada? Prueba AVIF con fallback.

Una última regla ahorra mucha calidad de imagen: no vayas y vuelvas repetidamente entre formatos con pérdida. Si una foto empezó como JPEG de alta calidad, convertir JPEG a WebP para entrega puede estar bien. Convertir ese WebP de nuevo a JPEG, editarlo y volver a convertirlo es donde se acumulan los artefactos. Vuelve al original siempre que puedas.