¿Por qué comprimir imágenes?
Las imágenes sin comprimir ralentizan las webs, consumen ancho de banda y aumentan los costes de almacenamiento. Google incluye el peso de las imágenes en su algoritmo de Core Web Vitals (LCP), y una imagen mal optimizada puede costarte posiciones en los resultados de búsqueda.
Objetivo: reducir el tamaño en bytes manteniendo calidad visual aceptable para el uso previsto.
Conceptos clave
Compresión con pérdida (lossy)
Elimina datos de color que el ojo humano apenas percibe. JPG, WebP y AVIF usan este método. Un JPG al 85% de calidad pesa un 60% menos que al 100% con diferencia visual casi imperceptible.
Compresión sin pérdida (lossless)
Elimina datos redundantes sin afectar a ningún píxel. PNG y GIF son sin pérdida. También existe compresión lossless en WebP y AVIF.
Redimensionado
La forma más efectiva de reducir el peso: una imagen de 4000×3000 px para una miniatura web de 400×300 px contiene 100× más píxeles de los necesarios.
Técnica 1: Elegir el formato correcto
| Caso de uso | Formato óptimo | Ahorro vs JPG |
|---|---|---|
| Fotografía web | WebP | -25-34% |
| Fotografía web (navegadores modernos) | AVIF | -40-50% |
| Logo con transparencia | WebP o PNG-8 | variable |
| Icono simple | SVG | -80%+ |
Técnica 2: Ajustar la calidad JPG
El parámetro de calidad en JPG va de 0 a 100:
- 100: sin compresión visible, archivo máximo. Innecesario para web.
- 85-90: calidad alta, reducción de tamaño significativa. Ideal para fotografía web.
- 75-80: calidad buena, archivos pequeños. Válido para miniaturas.
- < 70: artefactos visibles. Solo para miniaturas muy pequeñas.
Técnica 3: Redimensionar antes de comprimir
Calcula el tamaño máximo real en píxeles que necesita la imagen:
- Miniatura de producto: 300×300 px
- Imagen de artículo de blog: 1200×630 px (Open Graph)
- Fondo de cabecera web: 1920×1080 px
Una imagen de 6000×4000 px redimensionada a 1200×800 px pesa 25× menos antes incluso de comprimir.
Técnica 4: Usar compresión sin pérdida para PNG
PNG-8 (256 colores) es mucho más pequeño que PNG-24 (16 millones de colores) para gráficos simples:
- Logos con pocos colores: usa PNG-8 o SVG.
- Herramienta: pngquant reduce PNG hasta un 70% sin pérdida visual.
Herramientas recomendadas
Online (sin instalación):
- KaijuConverter: convierte a WebP o AVIF directamente.
- Squoosh (Google): control visual en tiempo real del nivel de compresión.
Escritorio:
- GIMP (gratis): ajusta la calidad al exportar.
- ImageMagick (línea de comandos):
convert input.jpg -quality 85 output.jpg - Photoshop: Guardar para web (⌥⇧⌘S).
Automatización para webs:
- Sharp (Node.js): redimensiona y convierte a WebP en el servidor.
- ImageOptim (Mac): compresión sin pérdida automática para todos los formatos.
Conversiones útiles
Conversiones relacionadas
Conversiones frecuentes del catálogo: