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
| Formato | Medio | Notas |
|---|---|---|
| JPEG | Fotos | Con pérdida, basado en DCT, el formato de imagen con pérdida más popular según MDN |
| WebP | Imágenes | Con o sin pérdida, estático y animado |
| AVIF | Imágenes | Con o sin pérdida, sin renderizado progresivo, necesita alternativa para navegadores antiguos |
| JPEG XL | Imágenes | Con o sin pérdida, visualización progresiva, necesita alternativa |
| MP3, AAC | Audio | Eliminan sonidos que el oído enmascara o apenas percibe |
| H.264, VP9, AV1 | Vídeo | Predicen 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érdida | Sin pérdida | |
|---|---|---|
| Reconstrucción | Aproximada | Exacta, bit a bit |
| Tamaño | Normalmente mucho menor | Mayor |
| Ideal para | Fotos, audio, vídeo | Texto, código, datos, logotipos, capturas |
| Ejemplos | JPEG, MP3, H.264 | PNG, FLAC, gzip |
| Reversible | No | Sí |
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.
Términos relacionados
- ¿Qué son las conexiones de red en la velocidad de página?
- ¿Qué es la monitorización de red?
- ¿Qué es la observabilidad?
- ¿Qué es PageSpeed Insights (PSI)?
- Prefetch de recursos: preload, preconnect y más
- ¿Qué es la precarga de activos (preload)?
- ¿Qué es el regression testing?
- ¿Qué es la ingeniería de fiabilidad?
Herramientas LoadFocus relacionadas
Lleva este concepto a la práctica con LoadFocus, la misma plataforma que potencia todo lo que acabas de leer.