Relación de Compresión de Imagen: Guía de Calidad y Tamaño

Última actualización: June 28, 2026

La relación de compresión de una imagen te dice cuánto más pequeña se volvió la imagen después de exportarla. Es útil, pero solo cuando emparejas el número con una verificación visual. Una relación de 12:1 puede ser excelente para una foto de fondo suave y inaceptable para una captura de pantalla de producto con texto pequeño.

Esta guía te da la fórmula, los rangos de calidad habituales y una lista de verificación de publicación para WebP, JPEG, PNG y AVIF. Úsala cuando necesites páginas más pequeñas sin que las imágenes se vean borrosas.

Respuesta rápida: ¿cuál es una buena relación de compresión de imagen?

Una buena relación de compresión de imagen es la reducción de bytes más alta que aún se ve limpia en el tamaño de visualización final. Calcula esto así: tamaño original del archivo dividido por tamaño del archivo comprimido. Una imagen de 4 MB comprimida a 500 KB tiene una relación de 8:1.

Para fotos web, un objetivo práctico suele ser de 5:1 a 12:1 después de redimensionar y exportar a WebP o AVIF. Para capturas de pantalla con mucho texto, logotipos e imágenes de interfaz de usuario (UI), las relaciones más bajas son normales porque los bordes nítidos y los colores planos necesitan protección. PNG sin pérdidas o WebP sin pérdidas pueden producir solo entre 1.2:1 y 3:1.

No juzgues la compresión solo por la relación. Inspecciona caras, bordes de productos, degradados y texto pequeño. Si los usuarios pueden ver bloqueo, anillo, mancha o bandas, la relación es demasiado agresiva incluso si el tamaño del archivo parece atractivo.

¿Cómo se calcula la relación de compresión de imagen?

Utiliza el tamaño original en bytes y el tamaño final en bytes después de todos los pasos reales de publicación: recortar, redimensionar, eliminar metadatos, conversión de formato y ajuste de calidad. Si calculas antes de redimensionar, el número suele ser engañoso.

Usa el recuento exacto de bytes cuando estás ajustando un build pipeline. Usa KB o MB redondeados cuando estás documentando ajustes editoriales. La decisión no cambia: más pequeño es útil solo mientras la imagen sigue comunicando su función.

La guía de imágenes de Google enfatiza tanto la velocidad como la calidad: las imágenes a menudo impulsan el peso de la página, pero las imágenes borrosas o poco claras son malas para los usuarios y las previsualizaciones de búsqueda. También recomienda elementos de imagen HTML rastreables, texto alternativo descriptivo y formatos compatibles como JPEG, PNG, WebP, SVG y AVIF en Google Images best practices.

¿Qué relación debo usar para WebP, JPEG, PNG y AVIF?

La relación correcta depende del contenido de la imagen. Las fotografías se comprimen mucho porque los pequeños cambios de textura son difíciles de notar. Las capturas de pantalla y diagramas se comprimen menos porque el texto, las líneas y los bordes de la interfaz de usuario hacen que los artefactos sean obvios.

La guía de formatos de imagen de MDN señala que WebP puede ser con pérdida o sin pérdidas, mientras que WebP con pérdidas y WebP sin pérdidas utilizan diferentes representaciones internas. Por eso no existe una única "relación WebP"; la configuración correcta depende de si el contenido puede tolerar la pérdida. Consulta la guía de tipos y formatos de archivos de imagen de MDN para el comportamiento del formato.

Para este artículo, codifiqué localmente cuatro gráficos de 1400 por 788 con ImageMagick y WebP. Los archivos se publicaron en 23 KB, 28 KB, 35 KB y 40 KB. Son inusualmente pequeños porque los activos son diagramas limpios, no fotos de cámara; usa los números como evidencia de que los gráficos planos se comprimen de manera diferente al detalle fotográfico.

Para compensaciones de formatos más amplias, compara este artículo con AVIF vs WebP Comparison. Si necesitas detalles del algoritmo detrás de los artefactos, lee How Image Compression Works.

¿Por qué los ajustes de calidad dejan de ahorrar mucho después de un punto?

La mayoría de los codificadores tienen una ganancia inicial pronunciada y una compensación tardía dolorosa. Pasar de un archivo de cámara original a WebP q80 puede eliminar mucha información invisible. Pasar de q70 a q55 puede ahorrar menos bytes mientras hace que los artefactos sean más fáciles de notar.

El efecto práctico es simple: la curva de tamaño se aplana mientras que la curva de calidad sigue cayendo. Por eso WebP q75-85 es un rango inicial común para fotos de artículos y productos. No es una regla para todos los archivos; es una buena primera prueba antes de inspeccionar el resultado.

Usa este orden al ajustar la calidad:

1. Redimensionar al ancho renderizado más grande que realmente sirves.
2. Exportar un WebP en q85, uno en q80 y uno en q75.
3. Abrirlos junto al original en el tamaño de visualización previsto.
4. Revisar caras, texto, bordes de productos, sombras y degradados suaves.
5. Elegir la versión más pequeña que no se vea degradada.
6. Registrar la relación resultante para ese tipo de contenido.

Si es probable que la imagen sea el elemento Largest Contentful Paint (LCP), la compresión es solo parte de la solución. La guía web.dev LCP recomienda priorizar las imágenes LCP probables con fetchpriority="high" y verificar el descubrimiento de recursos en la cascada de red en Optimize Largest Contentful Paint.

¿Cómo debo comparar las relaciones de compresión entre formatos?

Compara los formatos con una calidad visible igual, no con números de deslizador iguales. JPEG q82, WebP q78 y AVIF q55 pueden ser todos resultados razonables del mismo origen. Los números son controles del codificador, no puntuaciones universales de calidad.

Aquí es donde los equipos a menudo malinterpretan las relaciones. Un JPEG en 5.7:1 puede ser peor que un WebP en 8:1 si ambos se ven iguales en la pantalla. Un WebP sin pérdidas en 2:1 puede ser mejor que un WebP con pérdidas en 10:1 si el activo es una captura de pantalla de tabla de precios.

Para trabajo por lotes, genera múltiples salidas del mismo maestro y mantén la decisión visible en los nombres de archivo o registros de construcción. La Batch Resize Guide cubre el flujo de trabajo de redimensionar primero, y Complete Image Optimization Checklist proporciona un pase final prepublicación.

¿Cuándo es una alta relación de compresión una mala señal?

Una alta relación es una señal de advertencia cuando la imagen tiene detalles que la gente inspecciona. Los propietarios de tiendas notan la textura del producto. Los diseñadores notan el tipo suavizado. Los compradores notan los bordes borrosos de las joyas. En esos casos, el "archivo más pequeño" puede costar más de lo que ahorra.

Las altas relaciones merecen una inspección extra cuando la imagen incluye:

• Etiquetas de productos, texto de empaque, ingredientes o números de serie.
• Capturas de pantalla de UI, paneles de control, código o tablas de precios.
• Caras, textura de piel, cabello, joyas, tela o comida.
• Degradados suaves, cielos, sombras, neón o fondos oscuros.
• Líneas delgadas, iconos, bordes transparentes o marcas comerciales.
• Imágenes que se ampliarán, recortarán o reutilizarán en anuncios.

Para el comercio electrónico, usa una verificación más estricta de lo que usarías para una imagen decorativa de blog. Una miniatura de categoría puede tolerar más pérdida que la imagen principal del producto. Si el mismo maestro alimenta ambos, crea exportaciones separadas en lugar de forzar una relación para servir a cada ranura.

¿Qué flujo de trabajo da el mejor tamaño sin pérdida visible de calidad?

Usa la relación de compresión como una medición, no como la primera configuración. La calidad de salida depende más de la fuente, el recorte, las dimensiones de píxeles y la elección del formato que del número final de la relación.

Usa esta secuencia de publicación:

1. Mantener un archivo maestro que no haya sido re-codificado repetidamente.
2. Recortar para el caso de uso final antes de redimensionar.
3. Redimensionar al ancho renderizado más grande, con variantes responsivas si es necesario.
4. Elegir formato por contenido: WebP o AVIF para fotos, sin pérdidas para gráficos con mucho texto.
5. Exportar dos o tres candidatos de calidad.
6. Eliminar metadatos de las copias públicas a menos que sea legal o editorialmente requerido.
7. Comparar los candidatos en el tamaño renderizado en escritorio y móvil.
8. Revisar la imagen LCP probable por separado de las imágenes debajo del pliegue (below-fold).
9. Publicar en una URL CDN estable y verificar HTTP 200.
10. Registrar bytes finales, relación y configuración para que el siguiente lote sea más rápido.

Si estás apuntando a un presupuesto de tamaño estricto, comienza con el flujo de trabajo en Compress Image to 100KB o Compress Image to 200KB. Para páginas móviles, empareja la decisión de relación con la Mobile Image Optimization Guide.

¿Cómo encajan la relación de compresión y SEO?

La relación de compresión ayuda al SEO indirectamente. Las imágenes más pequeñas reducen el tamaño de transferencia, lo que puede mejorar el rendimiento de carga, especialmente cuando la imagen comprimida también tiene un tamaño correcto. Pero los motores de búsqueda y los usuarios todavía necesitan una imagen útil, una URL estable, texto circundante legible y texto alternativo descriptivo.

No envíes una imagen diminuta que se vea rota en las previsualizaciones de búsqueda o tarjetas sociales. Google recomienda explícitamente elegir una imagen representativa para metadatos y evitar imágenes genéricas para datos estructurados o og:image cuando existe una imagen más relevante. La imagen debe ser rápida y clara.

Para una publicación de blog, eso generalmente significa:

• Usar una portada WebP única en el frontmatter y los datos Open Graph.
• Mantener la portada legible en el tamaño de previsualización social.
• Colocar la imagen cerca del texto que explica la conclusión.
• Usar texto alternativo descriptivo, no relleno de palabras clave (keyword stuffing).
• Servir el activo final desde una URL CDN rastreable.
• Evitar reemplazar las URLs de imágenes indexadas a menos que el activo sea incorrecto.

La relación es solo una línea en el registro de publicación. Debe estar junto al ancho renderizado, formato, configuración de calidad, tamaño en bytes y notas visuales.

Lista de verificación de la relación de compresión

Antes de publicar, realiza esta breve revisión:

El objetivo útil no es "máxima compresión". Es una configuración repetible que mantiene la página ligera y la imagen confiable. En caso de duda, usa el archivo más pequeño solo después de que pase la verificación visual.