En este artículo te explico cómo optimizar imágenes en Linux de forma práctica, automatizada y lista para producción.
¿Por qué es importante optimizar imágenes?
Las imágenes suelen representar una parte importante del peso total de una página. Cuando no se optimizan, afectan directamente la velocidad de carga, la experiencia del usuario y el rendimiento general del sitio.
Optimizar correctamente te permite:
- Reducir tiempos de carga
- Mejorar métricas como LCP
- Ahorrar ancho de banda
- Mejorar SEO
- Ofrecer una experiencia más fluida
La estrategia correcta no es solo bajar calidad
Optimizar imágenes no significa únicamente reducir el porcentaje de calidad.
Una estrategia más completa incluye varios pasos que ayudan a mejorar el resultado final sin comprometer tanto la apariencia.
Una estrategia práctica consiste en:
- Comprimir imágenes existentes en formatos JPG o PNG
- Convertir a formatos modernos como WebP
- Mantener una estructura clara de carpetas
- Automatizar el proceso para evitar trabajo manual repetitivo
Herramientas útiles en Linux
ImageMagick para compresión rápida
ImageMagick es una de las herramientas más conocidas para manipular imágenes desde la terminal. Permite comprimir, redimensionar y convertir archivos de forma muy rápida.
Para instalarlo en sistemas basados en Debian o Ubuntu:
sudo apt install imagemagick
Para reducir la calidad de imágenes JPG dentro de una carpeta:
find ./images -type f -iname "*.jpg" -exec mogrify -quality 60 {} +
Este comando sobrescribe las imágenes originales, por lo que conviene hacer una copia de seguridad antes de usarlo en producción.
WebP con cwebp como opción recomendada
Si buscas una mejor relación entre calidad y peso, WebP suele ser una alternativa más eficiente que JPG o PNG para la web moderna.
Para instalar la herramienta oficial:
sudo apt install webp
Para convertir de forma recursiva imágenes JPG y PNG a WebP dentro de una carpeta:
find ./images -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) | while read img; do
cwebp -q 80 "$img" -o "${img%.*}.webp"
done
Este proceso:
- Convierte JPG y PNG a WebP
- Mantiene la estructura de carpetas
- No elimina los archivos originales
- Permite ajustar fácilmente la calidad
Qué nivel de calidad conviene usar
No existe un valor único para todos los casos, pero como punto de partida puedes usar estas referencias:
- JPG: entre 60 y 75
- WebP: entre 75 y 85
- PNG: en muchos casos conviene convertirlo directamente a WebP
La decisión final depende del tipo de imagen. Una fotografía grande puede tolerar mejor cierta compresión. Un gráfico con bordes duros o transparencias puede requerir otro tratamiento.
Consideraciones si usas Astro
Si tu proyecto está hecho con Astro, hay un detalle importante: las imágenes colocadas dentro de public/ no se optimizan automáticamente. Astro simplemente las copia al directorio final durante el build.
Eso deja dos caminos posibles:
Optimización manual
Puedes mantener tus imágenes en public/, optimizarlas con herramientas de Linux y usar directamente los archivos generados, por ejemplo en formato WebP.
Optimización con Astro
También puedes mover las imágenes a src/assets y usar los componentes de imágenes de Astro para que el framework las procese durante el build.
Mejorar la percepción de carga
Optimizar el peso del archivo es solo una parte del trabajo. También es importante cómo percibe el usuario la carga de las imágenes.
Skeleton placeholder
Consiste en mostrar un bloque de reserva mientras la imagen real termina de cargar. Esto ayuda a evitar saltos visuales y mejora la sensación de
rapidez.
Blur placeholder o LQIP
En lugar de mostrar un bloque vacío, se muestra una versión muy pequeña y borrosa de la imagen antes de revelar la versión final.
Ejemplo simple usando picture
Cuando ya tienes una versión WebP optimizada, puedes servirla con un fallback clásico para mayor compatibilidad:
<picture> <source srcset="/images/banner.webp" type="image/webp"> <img src="/images/banner.jpg" alt="Banner"> </picture>
Automatizar el proceso
Cuando el proyecto crece, optimizar una por una deja de ser viable. Lo ideal es contar con scripts que permitan convertir, comprimir y mantener ordenadas las carpetas sin esfuerzo manual constante.
Un flujo eficiente puede incluir exportación de imágenes, compresión por lote, generación de WebP y actualización de rutas dentro del proyecto.
Si una web se siente lenta, conviene revisar primero sus imágenes.
Muchas veces ahí está el verdadero problema.
