Compresión con pérdida

La compresión con pérdida reduce archivos descartando detalles poco visibles. Cómo funcionan JPEG, WebP y AVIF y cómo elegir la calidad adecuada.

¿Qué es la compresión con pérdida?

La compresión con pérdida reduce el tamaño de un archivo descartando de forma permanente información que el ojo o el oído difícilmente echan en falta. No se puede recuperar el original: al decodificar se obtiene una aproximación. A cambio, los archivos quedan mucho más pequeños que con la compresión sin pérdida, por eso la usan JPEG, MP3 y la mayoría del vídeo. El ajuste de calidad decide cuánto se descarta.

Cómo funciona la compresión con pérdida

Los códecs con pérdida siguen los mismos tres pasos, con matemáticas distintas por dentro:

  • Transformar. Los datos se convierten a una forma en la que el detalle se puede ordenar por importancia. JPEG, por ejemplo, se basa en la DCT y trabaja con bloques de la imagen.
  • Cuantizar. El detalle menos importante se redondea o se elimina, guiado por un modelo de la percepción humana (las diferencias finas de color y las frecuencias muy altas son lo primero que desaparece). Es el único paso con pérdida y el ajuste de calidad lo controla.
  • Codificación entrópica. Lo que queda se empaqueta con una pasada sin pérdida, la misma idea que usan los compresores sin pérdida.

Como los datos descartados ya no existen, volver a guardar con pérdida un archivo con pérdida descarta más cada vez. Edita siempre desde el original y exporta una sola vez.

Formatos con pérdida habituales

FormatoMedioNotas
JPEGFotosCon pérdida, basado en DCT, el formato de imagen con pérdida más popular según MDN
WebPImágenesCon o sin pérdida, estático y animado
AVIFImágenesCon o sin pérdida, sin renderizado progresivo, necesita alternativa para navegadores antiguos
JPEG XLImágenesCon o sin pérdida, visualización progresiva, necesita alternativa
MP3, AACAudioEliminan sonidos que el oído enmascara o apenas percibe
H.264, VP9, AV1VídeoPredicen fotogramas a partir de los anteriores y cuantizan la diferencia

La guía de imágenes de MDN ofrece estas comparaciones de tamaño con calidad visual similar: el WebP con pérdida es de media entre un 25 y un 35 % más pequeño que JPEG, y el AVIF con pérdida es aproximadamente un 50 % más pequeño que JPEG. Tómalo como valor típico, no garantizado: el resultado depende de la imagen y de la configuración del codificador.

Con pérdida frente a sin pérdida

Con pérdidaSin pérdida
ReconstrucciónAproximadaExacta, bit a bit
TamañoNormalmente mucho menorMayor
Ideal paraFotos, audio, vídeoTexto, código, datos, logotipos, capturas
EjemplosJPEG, MP3, H.264PNG, FLAC, gzip
ReversibleNoSí

Regla práctica de MDN: para capturas de pantalla, diagramas, logotipos y dibujos de línea conviene la compresión sin pérdida, porque el desenfoque y los halos de color alrededor del texto y de los bordes nítidos se notan mucho. Las fotografías y otras imágenes de tono continuo suelen tolerar la compresión con pérdida, porque el detalle descartado es más difícil de ver.

Compresión con pérdida y rendimiento web

Las imágenes suelen ser los archivos más pesados de una página, así que el formato y el ajuste de calidad influyen directamente en el tiempo de descarga y en métricas como el Largest Contentful Paint, una de las Core Web Vitals. Sirve las fotos en WebP o AVIF con pérdida y una alternativa JPEG mediante <picture>, ajústalas al espacio que ocupan (consulta el tamaño de imagen) y carga las que quedan fuera de la pantalla con carga diferida.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="800" alt="Producto sobre un escritorio">
</picture>

Ten en cuenta que la compresión con pérdida se aplica a la imagen en sí. Los recursos de texto como HTML, CSS, JavaScript y JSON nunca deben tener pérdida: se comprimen en tránsito con una codificación sin pérdida. Para una guía práctica, consulta cómo mejorar las imágenes de tu web (en inglés).

Errores comunes

  • Usar compresión con pérdida en capturas, logotipos y texto. Los bordes se emborronan. Usa PNG, WebP sin pérdida o SVG.
  • Recomprimir un JPEG una y otra vez. Cada guardado con pérdida descarta más. Conserva el original y exporta desde él.
  • Un único valor de calidad para todas las imágenes. Revisa a ojo el resultado en las imágenes con más detalle. Un ajuste invisible en un paisaje puede mostrar bloques en un degradado.
  • Omitir la alternativa. AVIF y JPEG XL necesitan una alternativa para navegadores sin soporte.
  • Optimizar solo por tamaño de archivo. Un archivo diminuto que se ve mal cuesta conversiones. Busca el archivo más pequeño que se vea bien.

Comprobar el peso de las imágenes con LoadFocus

Las decisiones de compresión solo cuentan si las mides. La monitorización de velocidad de página de LoadFocus ejecuta auditorías de Google Lighthouse en escritorio y móvil desde 25 regiones en la nube y sigue las Core Web Vitals a lo largo del tiempo, para que veas si un formato nuevo mejora tu LCP. Para una comprobación puntual usa el verificador gratuito de Core Web Vitals. MDN ofrece una visión completa de los tipos de archivo de imagen (en inglés).

Preguntas frecuentes: compresión con pérdida

¿JPEG es con pérdida o sin pérdida?

JPEG es con pérdida. PNG y GIF son sin pérdida, y WebP, AVIF y JPEG XL pueden ser ambas cosas.

¿Se puede deshacer la compresión con pérdida?

No. Los datos descartados desaparecen. Conserva el archivo original y exporta una copia comprimida a partir de él.

¿Qué calidad debo usar en JPEG?

No hay un único número correcto. Empieza en la zona media o media-alta de la escala de tu herramienta, compara con el original al tamaño al que se muestra y baja el valor hasta que apenas notes diferencia; después sube un paso.

¿El WebP con pérdida es mejor que JPEG?

Normalmente es más pequeño con calidad visual similar: según MDN, el WebP con pérdida es de media entre un 25 y un 35 % más pequeño que JPEG. Comprueba el soporte de navegadores de tu audiencia y mantén una alternativa JPEG con <picture> cuando haga falta.

¿La compresión con pérdida perjudica al SEO?

No por sí sola. Las imágenes más pequeñas mejoran la velocidad de carga, que influye en el posicionamiento y en la experiencia de usuario, pero las imágenes borrosas o con bloques perjudican a los usuarios. Busca el equilibrio entre tamaño y calidad visible.

¿Por qué mi imagen comprimida pesa más?

Puede que hayas recodificado un archivo ya optimizado con más calidad o convertido un gráfico plano a un formato de foto. Compara tamaños y prueba un formato sin pérdida para gráficos.

¿Qué tan rápido es tu sitio web?

Mejora su velocidad y SEO sin problemas con nuestra Prueba de Velocidad gratuita.

Prueba de velocidad de sitio web gratis

Analice la velocidad de carga de su sitio web y mejore su rendimiento con nuestro comprobador de velocidad de página gratuito.