Cada archivo de imagen que ves en la web ha sido comprimido. El método de compresión decide el tamaño del archivo y si se perdió información visual. Entender la diferencia entre compresión con pérdida (lossy) y sin pérdida (lossless) te permite elegir el formato correcto para cada imagen de tu sitio.
Esta guía explica cómo funciona cada método, cuándo usar cuál, y cómo elegir los ajustes.
Cómo funciona la compresión con pérdida
La compresión con pérdida reduce el tamaño del archivo eliminando de forma permanente datos visuales. El codificador analiza la imagen y descarta la información que el ojo humano es menos probable que note: variaciones sutiles de color, texturas de alta frecuencia y ruido.
El proceso es irreversible. Una vez eliminados los datos, no se pueden recuperar. Comprimir una imagen ya comprimida con pérdida una segunda vez elimina todavía más datos. Por eso hay que comprimir siempre desde la fuente de mayor calidad disponible.
Compresión con pérdida en la práctica:
- JPG usa la transformada de coseno discreta (DCT) para dividir la imagen en bloques de 8x8 píxeles y eliminar componentes de alta frecuencia. Con calidad baja produce los típicos artefactos "en bloques" del JPG.
- WebP con pérdida usa un esquema predictivo derivado del códec de vídeo VP8. Analiza cada bloque prediciendo su contenido a partir de los vecinos y solo codifica la diferencia. Produce menos artefactos visibles que JPG a tamaños equivalentes.
- AVIF con pérdida usa la codificación intra-frame del códec AV1. Opera sobre bloques de tamaño variable (hasta 128x128) con modelos de predicción más sofisticados. El resultado es una eficiencia superior, sobre todo en fotos con degradados y texturas.
Cómo funciona la compresión sin pérdida
La compresión sin pérdida reduce el tamaño sin descartar datos. La imagen descomprimida es idéntica bit a bit al original. Se logra con una codificación más eficiente de los píxeles, no eliminando información.
Técnicas habituales:
- Codificación por longitud de racha: sustituye secuencias de valores idénticos por un recuento y un valor. Eficaz en imágenes con grandes zonas del mismo color.
- Codificación de Huffman: asigna códigos binarios cortos a valores frecuentes y códigos largos a los raros.
- LZ77 y derivados: buscan y referencian patrones repetidos en el flujo de datos.
- Filtros de predicción: predicen el valor de cada píxel a partir de sus vecinos y solo codifican la diferencia.
En los formatos de imagen:
- PNG combina filtros de predicción y compresión DEFLATE (LZ77 + Huffman). Logra ratios típicos de 2:1 a 3:1 en fotos, y mucho más en gráficos de colores planos.
- WebP sin pérdida usa un modelo de predicción más avanzado, caché de color y referencias hacia atrás. Produce archivos un 25 a 30% más pequeños que PNG.
- AVIF sin pérdida usa la codificación intra-frame de AV1 en modo lossless. Resultados comparables a WebP lossless, a veces un poco más pequeños.
Comparación de calidad visual
La diferencia visual entre con pérdida y sin pérdida depende del nivel de compresión y del contenido.
Calidad 80 a 90 (con pérdida): la imagen comprimida es perceptualmente idéntica al original sin pérdida en contenido fotográfico. Sin artefactos visibles a distancia de visionado normal. Es el rango estándar para la web.
Calidad 60 a 79 (con pérdida): pueden verse diferencias menores al inspeccionar de cerca, sobre todo en bordes nítidos, texto fino y degradados suaves. A tamaño web, la mayoría de usuarios no lo nota.
Calidad 40 a 59 (con pérdida): los artefactos se hacen visibles. JPG muestra distorsión en bloques, WebP suavizado y a veces ringing alrededor de los bordes, AVIF aguanta mejor este rango pero suaviza las texturas finas.
Calidad por debajo de 40 (con pérdida): degradación clara. Solo aceptable en miniaturas muy pequeñas.
Sin pérdida: reproducción pixel a pixel. El archivo descomprimido es matemáticamente idéntico a la fuente. El tamaño es de 3 a 10 veces el de un archivo con pérdida a calidad 80.
Cuándo usar compresión con pérdida
Es la elección correcta para la gran mayoría de imágenes web. Úsala cuando:
- Contenido fotográfico: fotos, héroes, imágenes de producto, banners, fondos. La visión humana tolera bien la pérdida en imagen natural.
- El rendimiento importa: cualquier página donde el tiempo de carga cuente. La compresión con pérdida entrega un 50 a 80% menos de peso que sin pérdida.
- Redes sociales y plataformas de contenido: imágenes vistas rápido a resolución de pantalla, no ampliadas para inspección.
- Miniaturas y previews: una calidad 60-70 es perfectamente aceptable a tamaños pequeños.
Formatos recomendados: WebP para compatibilidad amplia, AVIF para máxima compresión, JPG si hace falta soporte legado. Puedes convertir JPG a WebP o JPG a AVIF en el navegador.
Cuándo usar compresión sin pérdida
La compresión sin pérdida es necesaria cuando la exactitud del píxel importa más que el tamaño:
- Capturas de pantalla y diagramas técnicos: la pérdida crea artefactos alrededor del texto y las líneas nítidas.
- Logos e iconos: los gráficos de color plano con bordes nítidos sufren ringing. Sin pérdida se conservan los bordes. (SVG suele ser aún mejor para vectores.)
- Imagen médica y científica: cualquier contexto donde alterar valores de píxel pueda afectar a la interpretación.
- Archivos fuente para seguir editando: si la imagen se va a recortar, corregir o componer después, parte de una fuente sin pérdida para evitar pérdida acumulada.
- Pixel art: la pérdida destruye los bordes de píxel que definen el estilo.
Formatos recomendados: WebP lossless para el archivo más pequeño, PNG para máxima compatibilidad. El compresor PNG conserva la transparencia.
¿Se pueden combinar las dos?
Sí. La estrategia más eficaz combina ambos tipos:
Usa con pérdida para fotografías e imágenes de tono continuo. Suelen ser las más pesadas de la página y son las que más ganan.
Usa sin pérdida para gráficos, texto superpuesto e iconos. Estas imágenes suelen ser más pequeñas de entrada, y la diferencia de calidad con pérdida se nota más.
Usa el elemento <picture> para servir varios formatos. Combina AVIF (mejor compresión con pérdida) con fallback WebP y JPG como último recurso:
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Descripción" width="800" height="600">
</picture>
No tienes que elegir un solo tipo de compresión para todo el sitio. Empareja el método con el contenido, imagen a imagen.
Comprime tus imágenes
Morphix comprime JPG, PNG y WebP directamente en el navegador. Elige con pérdida para fotos, sin pérdida para gráficos. Sin registro en el plan gratuito.
Comprimir JPG | Comprimir PNG | Comprimir WebP
Preguntas frecuentes
¿Qué es la compresión con pérdida?
Es un método que reduce el tamaño del archivo descartando datos visuales que el ojo apenas percibe. JPG, WebP con pérdida y AVIF con pérdida funcionan así. El proceso es irreversible: no puedes recuperar el detalle eliminado.
¿PNG es con pérdida o sin pérdida?
PNG es sin pérdida. El archivo descomprimido es idéntico al original. Por eso los PNG fotográficos pesan tanto. Si la imagen es una foto, conviértela a WebP o AVIF. Si es un logo o necesita transparencia, mantén PNG y comprímelo.
¿WebP es sin pérdida?
WebP tiene los dos modos. El modo con pérdida es el predeterminado para fotos web. El modo lossless produce archivos un 25-30% más pequeños que PNG, útil para gráficos y capturas.
¿Qué calidad debo usar para la web?
Calidad 80-85 para fotos. Por debajo de 70 los artefactos se ven. Por encima de 90 el archivo crece mucho para una ganancia visual mínima. Empieza en 82 y ajusta.