Sat Mar 21 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Cómo funciona la compresión de imágenes: Guía de JPEG, PNG y WebP
Una guía técnica sobre cómo funciona la compresión de imágenes: submuestreo de croma, DCT, cuantificación, filtrado PNG y dónde brilla cada formato con ajustes prácticos de calidad.
Última actualización: June 27, 2026
La compresión de imágenes reduce el tamaño de los archivos eliminando información que a tu ojo le cuesta ver. Comprender qué información desecha cada formato te dice por qué JPEG desenfoca el texto, por qué PNG sigue siendo grande y por qué WebP y AVIF ganan en fotografías. Este es un recorrido práctico por los algoritmos reales, no una comparación de marketing.
Respuesta rápida: ¿cómo funciona la compresión de imágenes?
Cada formato de imagen web realiza dos tareas: predecir valores de píxeles para que los datos repetidos colapsen, y luego codificar eficientemente los errores de predicción. Los formatos con pérdida (JPEG, WebP lossy, AVIF) también cuantizan: redondean detalles de alta frecuencia que los humanos apenas perciben. Los formatos sin pérdida (PNG, WebP lossless) omiten la cuantización y conservan cada píxel.
La decisión práctica:
| Contenido de la imagen | Mejor formato | Por qué |
|---|---|---|
| Fotografías, gradientes complejos | WebP/AVIF lossy | Bytes más pequeños, el ojo ignora la pérdida |
| Texto nítido, UI, arte lineal, logos | PNG o WebP lossless | La cuantización desenfocaría los bordes |
| Fotos a color completo que necesitan ediciones posteriores | PNG (o mantener master RAW/JPEG) | Evita re-encodificaciones con pérdida repetidas |
| Máxima compatibilidad | JPEG | Se decodifica en todas partes, pero es el más grande |
Consulta la comparación AVIF vs WebP vs JPEG para la decisión de formato; este artículo se centra en lo que sucede dentro de cada codificador.
¿Cuál es la diferencia entre con pérdida y sin pérdida?
La compresión sin pérdida reconstruye el píxel original por píxel. Funciona encontrando redundancia: series de colores idénticos, patrones repetidos, gradientes predecibles. PNG, GIF y WebP-lossless utilizan este enfoque. El límite es la entropía de la imagen; el ruido aleatorio apenas se comprime.
La compresión con pérdida descarta información permanentemente. El truco es descartar la información que tu sistema visual nota menos: textura fina de alta frecuencia y sutiles diferencias de color. JPEG, WebP-lossy y AVIF hacen esto. La recompensa son archivos mucho más pequeños, a menudo 5–10× más pequeños que los sin pérdida para fotografías.
Los formatos utilizan técnicas específicas:
| Técnica | Usado por | Qué hace |
|---|---|---|
| Chroma subsampling | JPEG, WebP, AVIF | Reduce la resolución de color; los ojos son menos sensibles al color que a la luminosidad |
| Discrete Cosine Transform (DCT) | JPEG, AVIF | Convierte bloques de 8×8 en frecuencias para que el detalle pueda descartarse selectivamente |
| Predictive filtering | PNG, WebP lossless | Adivina cada píxel a partir de sus vecinos; codifica solo el error |
| LZ77 + Huffman (DEFLATE) | PNG | Comprime secuencias de bytes repetidas con códigos cortos |
| Intra-frame prediction | AVIF, WebP lossy | Toma prestada la predicción de bloques de códecs de video para mejores adivinanzas |
¿Cómo funciona realmente la compresión JPEG?
JPEG es el pipeline canónico con pérdida. Cinco etapas se ejecutan en orden:
| Etapa | Qué sucede |
|---|---|
| 1. Color space conversion | RGB se convierte en YCbCr: una canal de luminancia (brillo, Y) y dos canales de croma (color). |
| 2. Chroma subsampling | El croma se reduce de tamaño, típicamente a 4:2:0. Los ojos leen el brillo más nítidamente que el color, por lo que esto reduce la mitad de los datos con poca pérdida percibida. |
| 3. DCT | Cada canal se divide en bloques de 8×8; una Discrete Cosine Transform convierte cada bloque en coeficientes de frecuencia (áreas suaves en una esquina, detalle/bordes en otra). |
| 4. Quantization | Los coeficientes se dividen por una matriz. Las altas frecuencias reciben divisores grandes y muchas se redondean a cero. Este es el paso con pérdida — el control deslizante de calidad escala esta matriz. |
| 5. Entropy coding | Los coeficientes cuantificados se ordenan en zigzag, se codifican por longitud de carrera (las largas secuencias de ceros comprimen mucho), y luego se codifican Huffman en los bytes JPEG finales. |
La razón por la que JPEG desenfoca el texto y los bordes nítidos: los coeficientes de alta frecuencia transportan los bordes, y la cuantización los pone a cero. Baja la calidad lo suficiente y verás artefactos de bloqueo de 8×8.
Puedes ver la cuantización en acción en un solo recorte de detalle de pluma. La misma región de 500×280, codificada con tres niveles de calidad, muestra exactamente lo que sacrifica el control deslizante de calidad:
En q95, las barbas de la pluma permanecen distintas. En q75, los filamentos finos comienzan a difuminarse juntos. En q50, los bloques 8×8 son claramente visibles y la textura está manchada: el archivo es más pequeño, pero la pérdida ahora es algo que un espectador nota.
¿Cómo funciona PNG?
PNG es sin pérdida y funciona de manera completamente diferente. Dos etapas:
- Filtrado por filas. Antes de la compresión, cada línea de escaneo se filtra para hacerla más predecible. PNG define cinco filtros (None, Sub, Up, Average, Paeth); el codificador elige el mejor por fila.
| Filtro | Predice cada píxel a partir de… | Funciona bien en… |
|---|---|---|
| None | Nada (crudo) | Datos ya aleatorios |
| Sub | El píxel de la izquierda | Gradientes horizontales |
| Up | El píxel superior | Patrones verticales |
| Average | Izquierda y arriba, promediado | Gradientes suaves |
| Paeth | Una predicción lineal de izquierda/arriba/superior-izquierda | Arte complejo con muchos bordes |
- Compresión DEFLATE. Los bytes filtrados pasan por LZ77 (encuentra secuencias repetidas, reemplaza con referencias hacia atrás) más codificación Huffman (códigos cortos para valores comunes), el mismo algoritmo que usa ZIP.
Consejos de optimización de PNG que realmente ayudan:
- Usa PNG-8 (indexado, ≤256 colores) para gráficos planos; es mucho más pequeño que PNG-24.
- Elimina chunks innecesarios: EXIF, perfiles ICC no utilizados, el canal alfa si la imagen es opaca.
- Recomprime con
optipngopngquant(este último convierte a 8 bits con tramado para grandes ahorros en fotografías que deben permanecer como PNG).
¿Por qué WebP es más pequeño que ambos?
WebP tiene dos modos independientes:
- Lossy WebP toma prestado del códec de video VP8. Utiliza la predicción de bloques en todo el cuadro (no solo dentro de bloques de 8×8 como JPEG), transformaciones de 4×4 y 8×8, y una mejor codificación de entropía aritmética. El resultado es aproximadamente 25–34% más pequeño que JPEG con calidad igualada.
- Lossless WebP utiliza hasta 13 modos de predicción, una transformación de espacio de color para desacorelar los canales y una variante LZ77. Generalmente es ~20–26% más pequeño que PNG para el mismo contenido.
AVIF va más allá utilizando las herramientas intra-frame del códec de video AV1, superando a WebP lossy en otro 20–30%. El costo es la velocidad de codificación: AVIF es lento de producir. Consulta la guía TinyPNG alternatives para herramientas que generan WebP y AVIF.
¿Cómo se mide la calidad de compresión?
Dominan dos métricas. Ninguna es perfecta; usa ambas.
| Métrica | Qué mide | Interpretación aproximada |
|---|---|---|
| PSNR (Peak Signal-to-Noise Ratio) | Diferencia matemática de píxeles, en dB | >40 dB: excelente · 30–40: aceptable · <30: pérdida visible |
| SSIM (Structural Similarity Index) | Similitud estructural perceptual, 0–1 | >0.95: casi idéntico · 0.90–0.95: bueno · <0.90: visible |
PSNR es fácil de calcular pero ignora lo que notan los humanos; SSIM se correlaciona mejor con la percepción, pero aún subestima artefactos que distraen (el anillo cerca del texto). Para decisiones reales de producto, evalúa el resultado visualmente en el tamaño de visualización previsto en lugar de confiar en un solo número.
Los estudios JPEG quality study de Mozilla y WebP compression study de Google publican metodología e imágenes de muestra si deseas reproducir comparaciones.
¿Qué ajustes de calidad debo usar?
Empieza con estos valores predeterminados, luego ajusta según tu contenido. Estas son guías, no leyes.
| Caso de uso | Formato | Calidad inicial | Tamaño objetivo |
|---|---|---|---|
| Imagen Hero / LCP | WebP o AVIF | 75–80 | <200 KB |
| Foto de producto | WebP o AVIF | 80–85 | <100 KB |
| Miniatura (Thumbnail) | WebP | 70–75 | <30 KB |
| Logo / icono | PNG o SVG | lossless | <10 KB |
| Captura de pantalla con mucho texto | PNG | lossless | (varía) |
Dos reglas que importan más que el número:
- Compara con calidad visual igualada, no con números de calidad iguales. AVIF q60, WebP q75 y JPEG q85 se ven aproximadamente similares. Comparar los tres a "q80" no tiene sentido.
- Redimensiona antes de comprimir. Un original de cámara de 4000px comprimido a JPEG q80 sigue siendo una descarga de 4000px. Redimensiona al tamaño de visualización primero: eso ahorra más bytes que cualquier ajuste de calidad.
La curva de tamaño versus calidad muestra por qué el rango 75–85 es la recomendación habitual. En el mismo recorte de detalle de pluma, el tamaño del archivo cae bruscamente al principio y luego se aplana; y la caída visible de calidad se acelera por debajo de q75. Empujar más allá de ese punto ahorra pocos bytes pero cuesta detalles reales:
¿Cómo se comprimen bien las imágenes en la práctica?
- Empieza con el master correcto. Haz fotos RAW o JPEG de alta calidad; la compresión es acumulativa, así que evita re-codificar un archivo que ya es con pérdida.
- Redimensiona primero. Ajusta el cuadro en la página con Image Resizer antes de cualquier otro paso.
- Elige formato según el contenido. Fotografía → WebP/AVIF lossy; texto/UI → PNG o WebP lossless.
- Codifica a una calidad sensata. Empieza en 75–80 para fotos en Image Compressor.
- Elimina metadatos para la web pública (mantén EXIF para archivos); Image Converter hace formato + metadatos en un solo paso.
- Inspecciona al tamaño de visualización y sirve una reserva
<picture>para que los clientes antiguos reciban JPEG.
Errores comunes
- Recomprimir JPEGs ya comprimidos. Cada codificación con pérdida añade artefactos. Mantén un master.
- Ignorar el chroma subsampling para texto. 4:2:0 está bien para fotos, pero difumina el texto de color. Usa 4:4:4 (o PNG) para gráficos con mucho texto.
- Confiar en un solo número de calidad entre formatos. El número significa cosas diferentes en JPEG, WebP y AVIF.
- Optimizar antes de redimensionar. Redimensiona siempre primero; es el mayor ahorro de bytes.
- Servir AVIF/WebP sin una reserva JPEG. Los navegadores antiguos y los clientes de correo electrónico no renderizan nada.
Guías relacionadas
- AVIF vs WebP vs JPEG: ¿Qué formato debo usar?
- Comprimir imágenes sin perder calidad
- Alternativas a TinyPNG comparadas
- Lista de verificación de optimización de imágenes para SEO
- Lista de verificación completa de optimización de imágenes
Preguntas frecuentes
¿Cómo funciona la compresión de imágenes?
La compresión sin pérdida (PNG) encuentra y codifica patrones repetidos sin cambiar los píxeles. La compresión con pérdida (JPEG, WebP) descarta el detalle de alta frecuencia que el ojo nota menos, luego codifica el resto. El ajuste de calidad controla cuánto descarte la compresión con pérdida.
¿Cuál es la diferencia entre con pérdida y sin pérdida?
Sin pérdida preserva cada píxel exactamente e invierte perfectamente (PNG, WebP lossless). Con pérdida descarta detalles para reducir el archivo y no se puede revertir (JPEG, WebP lossy). Con pérdida gana en tamaño para fotos; sin pérdida gana en calidad para gráficos y masters.
¿Qué formato comprime mejor las fotos?
AVIF (el más pequeño, navegadores modernos), luego WebP, luego JPEG. PNG es el más grande para fotos porque es sin pérdida. Para la entrega web, WebP es el valor predeterminado seguro; AVIF cuando puedes codificarlo y tu audiencia está en navegadores modernos.
¿La compresión reduce la calidad?
Sí lo hace, pero a una calidad de 80–85 la pérdida es invisible al tamaño de visualización. La trampa es re-comprimir un archivo con pérdida repetidamente (pérdida generacional), lo que acumula artefactos. Comprime una vez desde un master sin pérdida.
Créditos de imágenes
- Cubierta — Source code on a monitor, foto por Leonid Altman en Pexels (convertido a WebP).
- Escalera de calidad JPEG y curva tamaño versus calidad — generado por el autor a partir de una fotografía de plumas de guacamayo (Pexels #36720663, foto por Kaca Skok) para mostrar la salida real medida de JPEG en diferentes niveles de calidad.
Usa las herramientas gratuitas mientras sigues la guía.
Sigue leyendo
Wed Mar 18 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Conversor WebP: Cómo convertir imágenes a WebP (con tamaños reales)
Convierte imágenes JPEG y PNG a WebP para archivos web más pequeños. Incluye tamaños reales, el comando cwebp, métodos Python/navegador y estrategia de fallback JPEG/PNG.
Tue Mar 17 2026 20:00:00 GMT-0400 (北美东部夏令时间)
PNG a WebP: Cómo convertir y reducir imágenes PNG
Convierte tus imágenes PNG a WebP para reducir el tamaño de los archivos web. Analizamos cuándo usar WebP sin pérdidas o con pérdida, tamaños reales, y comandos cwebp/Pillow con respaldo PNG.
Tue Mar 10 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Optimización SEO de Imágenes: Lista de Verificación Práctica 2026
Una lista de verificación práctica de SEO para imágenes en 2026: alt text, nombres de archivo, formatos, compresión, Core Web Vitals, datos estructurados y medición.