Automatizar la optimización JPEG con jpegoptim en tus proyectos

Kevin van Zonneveld

Cofundador · Ámsterdam, Países Bajos · Mostrar bio

Optimizar las imágenes es fundamental para mejorar el rendimiento web. Los archivos de imagen grandes pueden ralentizar los tiempos de carga de las páginas, lo que afecta negativamente la experiencia de usuario y el posicionamiento SEO. En este artículo exploraremos cómo automatizar la optimización de JPEG con jpegoptim, una potente herramienta que reduce el tamaño de las imágenes sin sacrificar calidad. Al integrar jpegoptim en tu flujo de trabajo de desarrollo, puedes asegurarte de que tus aplicaciones web carguen rápido y de forma eficiente.

Introducción a jpegoptim y sus beneficios

Al crear aplicaciones web, el tamaño de las imágenes influye considerablemente en los tiempos de carga de las páginas y en la experiencia de usuario. jpegoptim es una utilidad gratuita y de código abierto diseñada para optimizar archivos JPEG reduciendo su tamaño y manteniendo la calidad visual. Automatizar la optimización de imágenes con jpegoptim agiliza tu flujo de trabajo y garantiza que tu aplicación entregue imágenes optimizadas sin intervención manual.

Instalación y configuración de jpegoptim

Instala jpegoptim con tu gestor de paquetes, que también instalará las bibliotecas necesarias.

Para distribuciones de Linux (por ejemplo, Ubuntu):

sudo apt-get update
sudo apt-get install libjpeg-dev
sudo apt-get install jpegoptim

Para usuarios de macOS:

brew install jpegoptim

Verifica la instalación:

jpegoptim --version

Uso básico para optimizar imágenes JPEG

Para optimizar una sola imagen JPEG:

jpegoptim image.jpg

Este comando realiza una optimización sin pérdidas, que reduce el tamaño del archivo sin ninguna pérdida de calidad de imagen.

Para una optimización con pérdidas con un factor de calidad máximo determinado (por ejemplo, 80):

jpegoptim --max=80 image.jpg

La opción --max establece el factor de calidad máximo de la imagen, lo que puede reducir considerablemente el tamaño del archivo a costa de cierta calidad de imagen. Ofrece un buen equilibrio entre tamaño y calidad.

Impacto en el rendimiento

Resultados típicos de la optimización:

• Optimización sin pérdidas: reducción de tamaño del 5–15 %
• Optimización con pérdidas (calidad 80): reducción de tamaño del 30–70 %

Ejemplo:

# Original file: image.jpg (1.2MB)
jpegoptim --max=80 image.jpg
# Result: image.jpg (400KB)

Integrar jpegoptim en los scripts de compilación

Automatiza la optimización de imágenes integrando jpegoptim en tus scripts de compilación. Así, las imágenes se optimizan cada vez que compilas o despliegas tu proyecto.

Usar un Makefile:

optimize-images:
	find assets/images -name '*.jpg' -exec jpegoptim {} +

Explicación:

• find assets/images -name '*.jpg' busca todos los archivos JPEG del directorio assets/images.
• -exec jpegoptim {} + ejecuta jpegoptim sobre todos los archivos encontrados por lotes para mayor eficiencia.

Usar scripts de npm en package.json:

{
  "scripts": {
    "optimize-images": "find assets/images -type f -name '*.jpg' -exec jpegoptim {} +"
  }
}

Ejecuta el script con:

npm run optimize-images

Automatizar la optimización con Git hooks o pipelines de CI/CD

Usar un hook pre-commit de git

Automatiza la optimización de imágenes antes de cada commit para asegurarte de que todas las imágenes de tu repositorio estén optimizadas.

Crea un script de hook pre-commit en .git/hooks/pre-commit:

#!/bin/sh
# Exit on any error
set -e

# Check if assets/images directory exists
if [ -d "assets/images" ]; then
  find assets/images -name '*.jpg' -exec jpegoptim {} +
  # Only add if optimization succeeded
  git add assets/images
fi

Hazlo ejecutable:

chmod +x .git/hooks/pre-commit

Integrar con pipelines de CI/CD

Automatiza la optimización de imágenes en tu pipeline de integración continua/despliegue continuo (CI/CD, por sus siglas en inglés) para asegurarte de que solo se desplieguen imágenes optimizadas.

Para GitHub Actions, añade lo siguiente a tu archivo de flujo de trabajo (por ejemplo, .github/workflows/ci.yml). Esto sube las imágenes optimizadas como un artefacto para revisarlas antes del despliegue, sin hacer commit de los cambios:

name: Optimize Images

on:
  pull_request:
    paths:
      - '**.jpg'
      - '**.jpeg'

permissions:
  contents: read

jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install jpegoptim
        run: |
          sudo apt-get update
          sudo apt-get install -y libjpeg-dev jpegoptim

      - name: Optimize JPEG images
        run: |
          find assets/images -type f \( -name '*.jpg' -o -name '*.jpeg' \) -exec jpegoptim {} +

      - name: Upload optimized images
        uses: actions/upload-artifact@v4
        with:
          name: optimized-images
          path: assets/images

Opciones avanzadas y mejores prácticas

jpegoptim ofrece varias opciones avanzadas para ajustar aún más la optimización de imágenes:

• Eliminar metadatos (datos EXIF, comentarios):

  Elimina los metadatos innecesarios para reducir aún más el tamaño del archivo.

  jpegoptim --strip-all image.jpg
  

• Compatibilidad con JPEG progresivo:

  Convierte imágenes al formato JPEG progresivo o desde él.

  # Convert to progressive JPEG
  jpegoptim --all-progressive image.jpg
  
  # Convert to non-progressive JPEG
  jpegoptim --all-normal image.jpg
  

• Tamaño de archivo objetivo:

  Optimiza una imagen hasta un tamaño objetivo (en KB).

  jpegoptim --size=500 image.jpg
  

• Optimizar subdirectorios:

  Optimiza las imágenes de un directorio y sus subdirectorios.

  find assets/images -type f -name '*.jpg' -exec jpegoptim {} +
  

• Conservar las marcas de tiempo de los archivos:

  Mantiene las fechas de modificación originales de los archivos.

  jpegoptim --preserve image.jpg
  

Mejores prácticas

• Respalda las imágenes originales:

  Guarda siempre una copia de seguridad de tus imágenes originales antes de aplicar compresión con pérdidas.

• Integra pronto en el desarrollo:

  Optimiza las imágenes durante el proceso de desarrollo para evitar que se introduzcan archivos demasiado grandes.

• Monitorea el rendimiento web:

  Usa herramientas como Google PageSpeed Insights o Lighthouse para medir el impacto de la optimización de imágenes.

• Equilibra calidad y tamaño:

  Experimenta con distintos ajustes de calidad para encontrar el equilibrio óptimo para tu proyecto.

Conclusión

Automatizar la optimización de JPEG con jpegoptim mejora el rendimiento web al reducir el tamaño de las imágenes sin comprometer la calidad. Al incorporar estas técnicas en tus scripts de compilación, hooks de git o pipelines de CI/CD, te aseguras de que tus usuarios reciban siempre imágenes optimizadas.

Si te interesa explorar más opciones de optimización automática de imágenes, consulta la documentación de Transloadit aquí.