Cómo comprimir imágenes para acelerar una web sin perder calidad

Las imágenes suelen representar una parte importante de los bytes descargados por una página. Una fotografía de cámara puede medir varios megabytes aunque el diseño solo la muestre a 600 píxeles. Optimizarla correctamente reduce transferencia y tiempo de decodificación sin obligar a aceptar una pérdida visible.

Empieza por las dimensiones correctas

Antes de comprimir, averigua el ancho máximo real del componente. Una imagen que nunca supera 600 píxeles no necesita un archivo de 4.000 píxeles. Para pantallas de alta densidad puede ser razonable exportar alrededor del doble del ancho CSS, pero no la resolución completa de la cámara.

Define atributos de ancho y alto o una relación de aspecto estable para que el navegador reserve espacio antes de la descarga. Esto ayuda a evitar cambios de diseño que afectan a Cumulative Layout Shift.

Elige el formato según el contenido

• JPEG: apropiado para fotografías, con calidad ajustable y sin transparencia.
• PNG: útil para transparencia y gráficos que necesitan detalle sin pérdida, aunque puede pesar más.
• WebP: suele ofrecer archivos pequeños para fotografías y gráficos con buena compatibilidad moderna.
• SVG: adecuado para iconos y logotipos vectoriales controlados, no para fotografías.

El formato por sí solo no garantiza el mejor resultado. Compara visualmente el archivo final y no conviertas una captura con texto a JPEG de baja calidad si los bordes quedan borrosos.

Un proceso de compresión reproducible

1. Conserva el original fuera de la carpeta pública.
2. Redimensiona una copia a las dimensiones necesarias.
3. Prueba una calidad moderada, por ejemplo 80%.
4. Compara al 100% caras, texto, bordes y degradados.
5. Reduce poco a poco hasta ver defectos y vuelve un paso.
6. Mide la página de nuevo en móvil.

El Compresor de imágenes de ToolBlur procesa la imagen localmente y permite comparar el tamaño. También puedes crear una copia WebP para una entrega web moderna. Mantén el original cuando el archivo tenga valor documental.

Carga adecuada en la página

No apliques carga diferida a la imagen principal visible si eso retrasa el Largest Contentful Paint. En cambio, las imágenes situadas más abajo sí pueden usar lazy loading. Sirve tamaños responsivos para que un teléfono no descargue el mismo recurso que una pantalla grande y configura una política de caché apropiada para archivos versionados.

Errores frecuentes

• Comprimir una imagen enorme sin reducir sus dimensiones.
• Subir varias copias idénticas con nombres distintos.
• No reservar espacio y provocar saltos de diseño.
• Elegir calidad mínima solo para obtener una puntuación mejor.
• Usar una imagen decorativa donde CSS o SVG serían más ligeros.

Preguntas frecuentes

¿Cuál es la calidad JPEG perfecta?

No existe un valor universal. Depende del contenido, las dimensiones y el tamaño de visualización.

¿WebP siempre es más pequeño?

A menudo sí, pero debes comparar con el archivo original y revisar transparencia, detalle y compatibilidad.

¿La compresión por sí sola mejora Core Web Vitals?

Ayuda, pero también importan dimensiones, prioridad, caché, servidor y JavaScript que bloquea el renderizado.