viernes 8 noviembre 2024

Cómo configurar la optimización de imágenes en Nginx

Optimizar imágenes en Nginx ayuda a reducir el tamaño de los archivos y mejorar la velocidad de carga de los sitios web, algo esencial para el rendimiento y la experiencia del usuario. La optimización puede incluir la compresión, el cambio de formato y el ajuste dinámico del tamaño de las imágenes, utilizando Nginx como proxy y aprovechando módulos adicionales o herramientas externas.

¿Qué es la optimización de imágenes en Nginx?

La optimización de imágenes en Nginx consiste en comprimir o cambiar el formato y dimensiones de las imágenes para reducir su tamaño, utilizando módulos adicionales como ngx_http_image_filter_module o soluciones de terceros como ImageMagick o libvips. La combinación de Nginx con estas herramientas permite servir imágenes adaptadas y optimizadas sin afectar el rendimiento del servidor.

Métodos para optimizar imágenes en Nginx

1. Uso del módulo ngx_http_image_filter_module: Permite redimensionar, recortar y convertir imágenes en Nginx.

2. Integración con herramientas externas: Nginx puede funcionar junto a programas como ImageMagick o libvips para realizar una optimización avanzada de imágenes.

3. Configuración de cacheo de imágenes: Permite almacenar versiones optimizadas de imágenes en caché para reducir el procesamiento en futuras solicitudes.

Configuración básica de optimización de imágenes en Nginx con ngx_http_image_filter_module

Para usar el módulo ngx_http_image_filter_module, asegúrate de que esté habilitado en tu instalación de Nginx, ya que no siempre está activado por defecto. Este módulo permite redimensionar y convertir imágenes de formatos comunes como JPEG, PNG y GIF.

Ejemplo de configuración de redimensionamiento y formato

http {
    server {
        listen 80;
        server_name ejemplo.com;

        location /imagenes/ {
            image_filter resize 300 200;
            image_filter_jpeg_quality 85;  # Calidad de compresión para JPEG
            image_filter_buffer 5M;        # Tamaño del buffer

            root /var/www/imagenes;
        }
    }
}

En este ejemplo:

image_filter resize 300 200: Redimensiona la imagen a un ancho de 300 px y un alto de 200 px.
image_filter_jpeg_quality 85: Define la calidad de compresión para las imágenes JPEG al 85%.
image_filter_buffer 5M: Establece el tamaño máximo del buffer para la imagen a 5 MB.

Optimización avanzada con herramientas externas como ImageMagick

Para una optimización avanzada, como la conversión de formatos o la creación de miniaturas dinámicas, se puede usar ImageMagick o libvips junto con Nginx y Lua o scripts externos. La integración de estas herramientas requiere un enfoque adicional y herramientas de scripting como OpenResty (Nginx con soporte Lua).

Ejemplo de configuración con ImageMagick y Lua

1. Instalar OpenResty y ImageMagick.

2. Configurar el script de optimización de imagen:

http {
    server {
        listen 80;
        server_name ejemplo.com;

        location /imagenes/ {
            content_by_lua_block {
                local shell = require("resty.shell")
                local img_path = "/var/www/imagenes/" .. ngx.var.uri
                local command = "convert " .. img_path .. " -resize 300x200 -quality 85 " .. img_path

                local ok, stdout, stderr, reason, status = shell.run(command)
                if not ok then
                    ngx.log(ngx.ERR, "error optimizando la imagen: ", stderr)
                    return ngx.exit(500)
                end

                ngx.exec(img_path)
            }
        }
    }
}

Este ejemplo:

Usa el comando convert de ImageMagick para redimensionar y ajustar la calidad de las imágenes a un tamaño de 300x200 y una calidad de 85%.
El script ejecuta la optimización en el primer acceso, luego cachea la imagen optimizada en el servidor para futuras solicitudes.

Configuración de cacheo de imágenes optimizadas en Nginx

El cacheo de las versiones optimizadas de imágenes reduce la carga del servidor y acelera las futuras solicitudes.

http {
    proxy_cache_path /var/cache/nginx/img_cache levels=1:2 keys_zone=img_cache:10m max_size=1g inactive=1h use_temp_path=off;

    server {
        listen 80;
        server_name ejemplo.com;

        location /imagenes/ {
            proxy_cache img_cache;
            proxy_cache_valid 200 1h;

            image_filter resize 300 200;
            image_filter_jpeg_quality 85;

            root /var/www/imagenes;
        }
    }
}

En este ejemplo:

proxy_cache_path define el directorio y las propiedades del caché.
proxy_cache activa el caché para las imágenes optimizadas en la zona img_cache.
proxy_cache_valid define que las imágenes se mantendrán en caché durante una hora para solicitudes exitosas (código 200).

Parámetros de configuración de optimización de imágenes

Parámetro	Descripción
`image_filter resize`	Redimensiona la imagen a las dimensiones especificadas.
`image_filter_crop`	Recorta la imagen a las dimensiones especificadas.
`image_filter_jpeg_quality`	Define la calidad de compresión para imágenes JPEG.
`proxy_cache`	Activa el caché de Nginx para las imágenes optimizadas.
`proxy_cache_path`	Define la ubicación y parámetros del caché para el almacenamiento de imágenes optimizadas.

Referencias

Para más detalles sobre la optimización de imágenes en Nginx, consulta la documentación oficial de ngx_http_image_filter_module.

Etiquetas:

nginx

Creado por:

Jorge García

Fullstack developer