Cómo Comprimir Imágenes para Web Sin Perder Calidad

Las imágenes representan entre el 50% y 60% del tamaño total de una página web promedio. Comprimirlas antes de subirlas es una de las optimizaciones de mayor impacto que puedes hacer para la velocidad de tu sitio — y, por extensión, para tu posicionamiento SEO y la experiencia del usuario.

Por Qué la Compresión de Imágenes Importa para el SEO

Los Core Web Vitals de Google — específicamente Largest Contentful Paint (LCP) — miden qué tan rápido carga el contenido principal de tu página. Las imágenes sin optimizar son la causa más común de puntajes bajos de LCP. La velocidad de página es un factor de posicionamiento confirmado, y PageSpeed Insights de Google señala explícitamente las imágenes sin optimizar como "oportunidades" para mejorar tu puntaje.

¿Qué Ajuste de Calidad Deberías Usar?

El ajuste de calidad controla qué tan agresivamente se comprime la imagen:

• 90–100%: Casi sin pérdida. Los archivos siguen siendo grandes. Úsalo solo para recursos de calidad de impresión.
• 80–85%: El punto óptimo para la mayoría de las imágenes web. Los archivos son entre 50% y 70% más pequeños que el original sin diferencia visible en pantalla.
• 70–75%: Compresión agresiva. Funciona bien para miniaturas pequeñas e imágenes de fondo. Puede mostrar artefactos sutiles si se observa de cerca.
• Menos de 60%: Pérdida de calidad visible. Úsalo solo para vistas previas muy pequeñas o marcadores de posición.

Para la mayoría de las imágenes de sitios web, 80% de calidad es el mejor punto de partida.

El Formato Correcto Marca Más Diferencia Que el Nivel de Compresión

Elegir el formato correcto tiene más impacto que ajustar el control deslizante de calidad:

• Fotos: Usa WebP (25–35% más pequeño que JPG con la misma calidad) o JPG al 80%.
• Logotipos e íconos: Usa SVG si es posible. Si es rasterizado, usa WebP o PNG.
• Ilustraciones con colores planos: PNG o WebP sin pérdida.
• Imágenes animadas: Animación WebP o formatos de video (mucho más pequeños que GIF).

Paso a Paso: Comprime Imágenes para Tu Sitio Web

1. Redimensiona primero — No subas una foto de 4000px de ancho si tu sitio web la muestra a 800px. Usa nuestro Redimensionador de Imágenes para ajustarla al tamaño real de visualización primero.
2. Elige el formato correcto — Convierte JPG a WebP o PNG a WebP para obtener los mejores resultados en la web.
3. Comprime — Usa nuestro Compresor de Imágenes con una calidad de 75–80%.
4. Define las dimensiones correctas — Usa los atributos width y height en tus etiquetas <img> para evitar saltos de diseño.
5. Usa carga diferida — Agrega loading="lazy" a las imágenes debajo del pliegue para que solo carguen cuando sean visibles.

Usuarios de WordPress: Compresión Automática

Si usas WordPress, instala Smush o ShortPixel para comprimir imágenes automáticamente al subirlas. Ambos tienen planes gratuitos que cubren la mayoría de los sitios pequeños. También sirven WebP automáticamente en navegadores compatibles.

¿Cuánto Puedes Ahorrar?

Ejemplo real: una entrada de blog con 5 fotos sin optimizar de 2 MB cada una = 10 MB de peso de página. Después de redimensionar a 1200px de ancho y comprimir a WebP al 80%:

• Cada imagen: ~80–120 KB
• Total: ~500 KB
• Ahorro: más del 95%

Esa es la diferencia entre una página que carga en 8 segundos en una conexión móvil versus menos de 1 segundo.