Mejores prácticas de compresión de imágenes para la web

Mejores prácticas de compresión de imágenes para la web

Las imágenes representan más de la mitad de los datos de una página web típica. Cada kilobyte no optimizado te cuesta tiempos de carga más lentos, tasas de rebote más altas y posiciones más bajas en los buscadores. Esta guía cubre las mejores prácticas que los desarrolladores web profesionales usan para entregar imágenes nítidas y de carga rápida en todos los tamaños de pantalla.

1. Mantén siempre una copia maestra

Antes de aplicar cualquier compresión, guarda un maestro sin comprimir de tu imagen original. Una copia maestra te da la libertad de experimentar con diferentes niveles de calidad y recomprimir más tarde sin empezar de cero. Almacena los maestros en un formato sin pérdida como PNG o TIFF, y luego comprime copias para uso en producción.

2. Entiende los ajustes de calidad

La calidad de compresión normalmente se mide en una escala de 0 (peor) a 100 (mejor). El ajuste óptimo depende del contenido de tu imagen y de tus objetivos de rendimiento.

Directrices de calidad JPEG:

• 80 a 85: Excelente para la mayoría de las fotos web. Los artefactos son apenas perceptibles.
• 60 a 75: Bueno para miniaturas e imágenes de fondo. Aparecen algunos artefactos de compresión.
• Por debajo de 60: Bloqueo y bandas notorios. Úsalo solo cuando el tamaño del archivo sea la prioridad absoluta.

Directrices de calidad WebP:

• 75 a 85: Iguala la calidad de JPEG con tamaños de archivo aproximadamente de 25 a 35 por ciento más pequeños.
• WebP sin pérdida: Ideal para gráficos y capturas de pantalla donde la salida píxel perfecta importa.

Compresión PNG:

• PNG usa exclusivamente compresión sin pérdida. La reducción de la profundidad de bits (convertir color de 32 bits a 8 bits) es la forma más eficaz de reducir PNG sin pérdida visible de calidad para gráficos de color plano.

Directrices de calidad AVIF:

• 50 a 70: Produce archivos hasta un 50 por ciento más pequeños que JPEG con calidad visual comparable.
• La mayor complejidad de codificación significa una compresión más lenta, pero la ganancia en tamaño de archivo es sustancial.

3. Adapta la compresión al contenido de la imagen

No todas las imágenes responden igual a la compresión. Adapta tu enfoque según el tipo de contenido:

• Fotografías: La compresión con pérdida (JPEG, WebP, AVIF) funciona mejor. Empieza con calidad 80 y ajusta hacia abajo hasta encontrar el umbral aceptable.
• Capturas de pantalla y maquetas de interfaz (UI): La compresión sin pérdida (PNG, WebP sin pérdida) preserva el texto nítido y los bordes definidos. Estas imágenes contienen grandes áreas uniformes que se comprimen muy eficientemente.
• Logotipos e iconos: Los formatos sin pérdida mantienen una nitidez similar a la vectorial. Si el original tiene pocos colores, PNG con profundidad de color reducida puede ser extremadamente pequeño.
• Fotos de producto: La calidad 75 a 85 es el punto óptimo. La diferencia visual frente al original es casi invisible, pero los ahorros de tamaño de archivo son dramáticos.

4. Elimina los metadatos ocultos

Las cámaras digitales y el software de diseño incrustan metadatos llamados datos EXIF en los archivos de imagen. Estos pueden incluir el modelo de la cámara, coordenadas GPS, marcas de tiempo e información del perfil de color. Eliminar los metadatos puede reducir el tamaño del archivo entre un 5 y un 15 por ciento sin impacto visual.

La mayoría de las herramientas de compresión ofrecen una opción para eliminar metadatos automáticamente. Actívala a menos que tengas una razón específica para conservar la información de copyright o del perfil de color.

5. Comprime en el formato original

Los compresores de imágenes modernos te permiten optimizar imágenes conservando su formato original. Esta es una capacidad importante porque la conversión de formato suele ser innecesaria y a veces indeseable:

• PNG se mantiene como PNG: La compresión sin pérdida preserva la transparencia y los bordes nítidos.
• JPEG se mantiene como JPEG: Las tablas Huffman optimizadas y la cuantificación ofrecen archivos más pequeños sin pérdidas por recodificación.
• WebP se mantiene como WebP: Tanto WebP con pérdida como sin pérdida se benefician de la eliminación de metadatos y de parámetros de codificación optimizados.
• AVIF se mantiene como AVIF: El ajuste avanzado de la compresión puede reducir aún más archivos AVIF ya eficientes.

Comprimir en el lugar significa que nunca degradas la calidad a través de una cadena de conversión de formato, y tu flujo de trabajo se mantiene simple.

6. Automatiza tu flujo de trabajo de compresión

La compresión manual no escala más allá de un puñado de imágenes. Para sitios web de producción, integra la compresión en tu canal de compilación:

• Plugins en tiempo de compilación: Herramientas como sharp, Squoosh CLI e imagemin pueden ejecutarse durante tu paso de compilación.
• Automatización del CMS: Muchos sistemas de gestión de contenidos ofrecen plugins que comprimen las imágenes al subirlas.
• Integración CI/CD: Añade un paso de compresión a tu canal de despliegue para que cada imagen se optimice automáticamente antes de publicarse.

7. Comprime las miniaturas de forma más agresiva

Las miniaturas y las imágenes de vista previa se ven en tamaños pequeños, por lo que los artefactos de compresión son mucho menos perceptibles. Aplica ajustes de calidad más bajos:

• Miniaturas JPEG: calidad 50 a 60
• Miniaturas WebP: calidad 50 a 70
• Miniaturas PNG: reduce a color de 8 bits si la imagen lo permite

8. Combina la compresión con la carga diferida

La compresión reduce el tamaño de cada imagen, pero la carga diferida garantiza que las imágenes solo se descarguen cuando entran en la ventana gráfica. La combinación es una de las optimizaciones de rendimiento de mayor impacto disponibles. Añade loading="lazy" a tus etiquetas img y deja que el navegador se encargue del resto.

9. Prueba con métricas del mundo real

La conjetura visual no es fiable. Usa herramientas objetivas para medir el impacto de tus decisiones de compresión:

• Lighthouse informa de oportunidades para la optimización de imágenes y estima ahorros potenciales.
• PageSpeed Insights muestra cómo afecta el peso de las imágenes a tus puntuaciones de Core Web Vitals.
• WebPageTest proporciona un gráfico de cascada de cada solicitud de imagen, incluido el tiempo hasta el primer byte y la duración de la descarga.
• Squoosh te permite previsualizar la salida comprimida lado a lado con el original antes de comprometerte con un ajuste.

Poniéndolo todo junto

Un flujo de trabajo moderno de optimización de imágenes se ve así:

1. Guarda una copia maestra sin comprimir.
2. Elimina los metadatos durante la compresión.
3. Comprime en el formato original: sin conversión innecesaria.
4. Sirve versiones con el tamaño adecuado para diferentes ventanas gráficas.
5. Activa la carga diferida en imágenes no críticas.
6. Mide el rendimiento e itera.

Empieza a aplicar estas mejores prácticas hoy mismo con nuestro compresor de imágenes en línea gratuito. Sube tus imágenes y descarga versiones optimizadas en segundos, todo mientras mantienes tu formato original intacto.