Cómo comprimir imágenes para una web

Una sola foto sin optimizar puede pesar más que el resto de la página junta. Arreglar las imágenes es la mejora de rendimiento más barata que existe, y afecta directamente al Largest Contentful Paint, una de las Core Web Vitals por las que te puntúa Google.

1. Redimensiona al tamaño real en el que se muestra

Una imagen de cabecera que se ve a 1200 px de ancho no necesita 4000 px. Abre Redimensionar imagen, fija el ancho (1600 px es un máximo seguro para imágenes a ancho completo en pantallas retina, 800 px para imágenes de contenido) y procesa la carpeta entera de golpe.

2. Elige el formato correcto

• Fotos → WebP (o JPG si necesitas soportar navegadores muy antiguos). WebP pesa entre un 25% y un 35% menos que JPG con la misma calidad y todos los navegadores actuales lo abren sin problema.
• Logos, iconos, capturas con colores planos → PNG, y luego cuantízalo. Guardar fotos como PNG es un error: pesan entre cinco y diez veces más para nada.
• Iconos e ilustraciones simples → SVG siempre que tengas el vector.

3. Comprime

• JPG a WebP al 80–85% para fotos.
• Comprimir PNG — cuantización de paleta, el mismo truco que usa pngquant, reduce los gráficos planos entre un 50% y un 70% sin cambio visible y conservando la transparencia.
• Comprimir JPG al 75–80% si te quedas con JPG.

4. Sírvela bien

Añade los atributos width y height a cada <img> para que el navegador reserve el espacio (sin salto de layout), carga de forma diferida las imágenes bajo el pliegue con loading="lazy", y usa srcset si quieres ir más allá. Los pasos de compresión de arriba son los que la mayoría de webs se saltan, y son los que más importan.