Crear un contenedor Docker para comprimir imágenes usando MozJpeg

Tiempo de lectura: 3 minutos

Hoy vamos a crear un contenedor Docker que nos permitirá comprimir imágenes jpg dentro de un directorio.

Comprimir imágenes es muy importante, sobre todo a la hora de montar un servicio web. Este contenedor nos permitirá tener a mano un compresor de imágenes muy pontente creado por Mozilla y agilizará el proceso de descarga de nuestros usuarios.

Lo primero que haremos es crear este Dockerfile

# Usa la imagen base de Alpine Linux
FROM alpine:latest

# Actualiza el índice de paquetes y luego instala las herramientas necesarias, incluyendo un compilador de C
RUN apk update && \
    apk add --no-cache \
    cmake \
    autoconf \
    automake \
    libtool \
    nasm \
    make \
    pkgconfig \
    git \
    libpng-dev \
    zlib-dev \
    build-base

# Clona el repositorio de MozJPEG desde GitHub
RUN git clone https://github.com/mozilla/mozjpeg.git /mozjpeg

# Cambia al directorio de trabajo de MozJPEG
WORKDIR /mozjpeg

# Configura, compila e instala MozJPEG
RUN mkdir build && cd build && \
    cmake -G"Unix Makefiles" .. -DPNG_SUPPORTED=0 && \
    make install

# Crea enlaces simbólicos solo si no existen previamente
RUN test -f /opt/mozjpeg/bin/cjpeg || ln -s /usr/local/bin/cjpeg /opt/mozjpeg/bin/cjpeg && \
    test -f /opt/mozjpeg/bin/djpeg || ln -s /usr/local/bin/djpeg /opt/mozjpeg/bin/djpeg

# Cambia al directorio de trabajo
WORKDIR /

CMD ["tail", "-f", "/dev/null"]

Esto nos creará la imagen con la librería MozJPEG

Ahora creamos un docker-compose.yml para levantar el contenedor.

version: '3'

services:
  mozjpeg:
    build: 
      context: .
      dockerfile: Dockerfile
    container_name: mozjpeg-container
    #tty: true
    volumes:
      - ${IMAGES_FOLDER}:/imagenes

Y creamos el .env que nos permitirá definir IMAGES_FOLDER

.env

IMAGES_FOLDER=./imagenes

El proyecto queda así:

Podeís crear el .gitignore:

.DS_Store
.env

# Ignorar archivos generados durante la construcción de la imagen
.DS_Store
.idea/
.vscode/
*.log
*.pid
*.pyc

imagenes/*

Una vez creado, tendremos que ejecutarlo:

docker compose up -d

Y podemos lanzar el comando que nos comprimirá los elementos:

   docker exec mozjpeg-container sh -c 'cd /imagenes && for file in *.jpg; do /opt/mozjpeg/bin/cjpeg -quality 80 "$file" > "$file.tmp" && mv "$file.tmp" "$file"; done'

En cuanto a la calidad quality 80 que se indica en el comando, podemos usar esta estrategia:

1. Calidad aceptable: Para la mayoría de las imágenes en un sitio web, una calidad entre 60 y 80 es generalmente suficiente. Esto reduce el tamaño del archivo considerablemente sin una pérdida significativa en la calidad visual.
2. Fotografías de alta calidad: Si tu sitio web incluye imágenes de alta calidad, como fotografías profesionales, puedes optar por una calidad más alta, entre 80 y 90. Esto conservará más detalles y colores, pero también resultará en archivos más grandes.
3. Gráficos y logotipos: Para gráficos, logotipos y otros elementos visuales que contienen áreas sólidas de color y bordes nítidos, puedes usar una calidad más baja, entre 50 y 70, sin que se note mucho la pérdida de calidad.
4. Prueba y optimización: Siempre es recomendable realizar pruebas y optimizaciones para encontrar el equilibrio adecuado entre calidad visual y tamaño del archivo. Puedes probar diferentes configuraciones de calidad y verificar cómo afectan al rendimiento de tu sitio web utilizando herramientas de análisis de rendimiento web.
5. Compresión sin pérdida: Para imágenes que necesitan mantener la calidad original, como logotipos o ilustraciones detalladas, considera utilizar formatos de imagen con compresión sin pérdida, como PNG.

Para que la tarea de comprimir se lleve de forma periódica, se puede ejecutar mediante un cron o usando ofelia.