¿Tus imágenes están ralentizando tu web? Este artículo detalla cómo configurar Nginx en un servidor VPS, una tarea que requiere familiaridad con los comandos básicos de Linux, para que seleccione y sirva automáticamente el formato de imagen más eficiente (AVIF, WebP o el original) según las capacidades del navegador del cliente, sin necesidad de modificar las plantillas del sitio.

La abundancia de imágenes en un sitio web representa un desafío significativo para la velocidad de carga. Cada megabyte adicional ralentiza el rendimiento, lo que puede disuadir a los visitantes y afectar negativamente las métricas de Core Web Vitals. Los formatos modernos como WebP y AVIF permiten una reducción sustancial del tamaño de los archivos sin una pérdida perceptible de calidad. Sin embargo, surge la pregunta de cómo implementar su soporte a nivel de servidor sin tener que reescribir todo el código HTML.

Para configurar Nginx y servir WebP/AVIF, primero añade los tipos MIME image/webp y image/avif. Luego, usa la directiva map en el bloque http para detectar el soporte del navegador. Finalmente, en el bloque server, utiliza try_files $uri$avif_suffix $uri$webp_suffix $uri =404; para que Nginx busque y sirva el formato más óptimo de forma automática.

En este artículo te explico cómo habilitar el soporte para los formatos WebP y AVIF en el servidor y configurar Nginx para servir WebP y AVIF para el procesamiento automático de imágenes.

Ventajas de los formatos WebP y AVIF

WebP es un formato de imagen desarrollado por Google hace más de una década. Soporta tanto compresión con pérdida como sin pérdida, es compatible con transparencias (canal alfa) y produce archivos de tamaño considerablemente menor en comparación con JPEG o PNG.

AVIF es un formato más reciente basado en el códec de video AV1, que ofrece una compresión aún mayor. Con un nivel de calidad similar, un archivo AVIF puede ser decenas de puntos porcentuales más ligero que su equivalente en WebP. Ambos formatos ya son compatibles con los principales navegadores para WebP y también para AVIF.

Frecuentemente, la implementación de WebP/AVIF en un sitio web requiere modificar el código HTML, por ejemplo, utilizando etiquetas <picture> para especificar múltiples fuentes de imagen o integrando scripts especializados. Este enfoque es manejable para un número reducido de imágenes, pero se vuelve complejo y propenso a errores cuando se trata de miles de ellas.

Además, algunos sistemas de gestión de contenidos (CMS) pueden tener limitaciones para añadir nuevos formatos. Existe un enfoque alternativo: configurar el servidor web para que sustituya las imágenes dinámicamente en función de las capacidades del navegador.

Es fundamental señalar que Nginx no realiza la conversión de imágenes; su función se limita a seleccionar y servir el archivo adecuado.

Por lo tanto, es un prerrequisito haber generado previamente las versiones de las imágenes en formatos WebP y AVIF. Se pueden emplear utilidades de línea de comandos, conversores en línea o plugins específicos para el CMS utilizado. La configuración que veremos a continuación requiere que los archivos convertidos conserven el nombre y la extensión originales, añadiendo la nueva extensión al final. Por ejemplo, para el archivo imagen.jpg, sus versiones deben llamarse imagen.jpg.webp e imagen.jpg.avif.

La estructura de archivos esperada en tu directorio de imágenes sería la siguiente:

/ruta/a/tus/imagenes/
├── imagen.jpg
├── imagen.jpg.webp
└── imagen.jpg.avif

/ruta/a/tus/imagenes/
├── imagen.jpg
├── imagen.jpg.webp
└── imagen.jpg.avif

Añadir Tipos MIME para WebP y AVIF en Nginx

Para que Nginx pueda servir archivos con las extensiones .webp y .avif, debe reconocer el tipo de datos que representan. Generalmente, la configuración incluye un archivo mime.types que lista todos los formatos soportados. Abre este archivo (ubicado normalmente en /etc/nginx/mime.types) y verifica la presencia de las entradas para WebP y AVIF. En versiones recientes de Nginx, WebP suele estar incluido, pero configurar nginx avif ha sido un paso manual hasta hace poco. Si no existen, añádelas:

image/webp   webp;
image/avif   avif;

image/webp   webp;
image/avif   avif;

Guarda los cambios. Ahora, cuando el servidor entregue un archivo .webp o .avif, enviará la cabecera Content-Type correcta, permitiendo que el navegador interprete correctamente el recurso como una imagen. Este paso es esencial para continuar.

Detectar Soporte del Navegador con la Cabecera Accept

Cuando un navegador solicita una imagen, envía la cabecera Accept, que es una lista de los formatos que puede renderizar. Es necesario identificar las menciones de image/webp e image/avif en esta cabecera. Nginx permite analizar cabeceras en tiempo real y almacenar los resultados en variables. Se deben crear dos variables, una para WebP y otra para AVIF. Abre el archivo de configuración principal de Nginx y, dentro de la sección http { ... }, añade las siguientes directivas map:

map $http_accept $webp_suffix {
    default         "";
    "~image/webp"   ".webp";
}
map $http_accept $avif_suffix {
    default         "";
    "~image/avif"   ".avif";
}

map $http_accept $webp_suffix {
    default         "";
    "~image/webp"   ".webp";
}
map $http_accept $avif_suffix {
    default         "";
    "~image/avif"   ".avif";
}

Estas directivas crean las variables $webp_suffix y $avif_suffix en el contexto http. Si la cabecera Accept contiene la cadena “image/webp”, la variable $webp_suffix tomará el valor “.webp”; de lo contrario, permanecerá vacía. El mismo principio se aplica a $avif_suffix con la cadena “image/avif”.

La directiva map debe estar ubicada exclusivamente dentro del bloque http{} de la configuración global. Si se intenta insertar dentro de un bloque server{} o location{}, Nginx no podrá iniciarse. Verifica que el código se ha añadido en la ubicación correcta.

Servir Imágenes con Nginx y la Directiva try_files

A continuación, procede a la configuración del virtual host de tu sitio. Será necesario añadir un nuevo bloque location que intercepte las solicitudes de imágenes e intente servirlas en un formato más moderno. Por ejemplo:

server {
    …
    location ~* \.(?:jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
    }
    …
}

server {
    …
    location ~* \.(?:jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
    }
    …
}

Este bloque location utiliza una expresión regular para capturar solicitudes de imágenes .jpg, .jpeg y .png. El modificador ~* hace que la regla no distinga entre mayúsculas y minúsculas.

add_header Vary Accept; añade la cabecera Vary: Accept a las respuestas de imágenes. Esto es crucial para un almacenamiento en caché correcto. Indica a los CDNs y proxies que deben cachear versiones diferentes del mismo recurso según el valor de la cabecera Accept del navegador solicitante.

try_files $uri$avif_suffix $uri$webp_suffix $uri =404;

try_files $uri$avif_suffix $uri$webp_suffix $uri =404;

Aquí está la clave. Esta directiva instruye a Nginx a verificar la existencia de archivos en un orden secuencial, tal como se detalla en la documentación oficial de try_files:

1. $uri$avif_suffix: Primero, busca una versión con el sufijo .avif (ej. imagen.jpg.avif).
2. $uri$webp_suffix: Si no se encuentra la versión AVIF o el navegador no la soporta, intenta con el sufijo .webp (ej. imagen.jpg.webp).
3. $uri: Si ninguna de las alternativas anteriores tiene éxito, sirve el archivo original (imagen.jpg).
4. =404: Si no se encuentra ninguno de los archivos, devuelve un error 404.

De esta manera, Nginx selecciona automáticamente el formato óptimo: AVIF como primera opción, WebP como alternativa y el original como último recurso.

Tras añadir el bloque, guarda la configuración y asegúrate de que no existan otros bloques location para imágenes que puedan entrar en conflicto; el nuevo bloque debe tener prioridad.

Reiniciar Nginx y Verificar la Configuración

Una vez aplicados los nuevos parámetros, reinicia Nginx para que los cambios surtan efecto:

sudo systemctl restart nginx

sudo systemctl restart nginx

Si la configuración es correcta, el servidor se reiniciará sin errores. El siguiente paso es realizar pruebas. El método más directo es acceder al sitio desde diferentes navegadores y analizar qué archivos se reciben. En Chrome o cualquier navegador basado en Chromium que soporte tanto WebP como AVIF, abre las herramientas de desarrollador (F12). En la pestaña “Network”, localiza la solicitud de una imagen y examina la respuesta. Idealmente, el Content-Type será image/avif. Para una depuración más profunda, puedes añadir temporalmente una cabecera de depuración en el mismo bloque location:

add_header X-Debug-Files "$uri$avif_suffix | $uri$webp_suffix";

add_header X-Debug-Files "$uri$avif_suffix | $uri$webp_suffix";

Esta cabecera mostrará en la respuesta las rutas de archivo que Nginx intentó localizar. No olvides eliminarla después de las pruebas. A continuación, accede a la misma URL de la imagen desde un navegador que soporte WebP pero no AVIF, como Safari 14 o versiones antiguas de Edge.

En las herramientas de desarrollador, el Content-Type debería ser image/webp. Finalmente, utiliza un navegador obsoleto que no soporte ninguno de los dos formatos; el servidor debería devolver un Content-Type de image/jpeg o image/png. Si los resultados son los esperados, la configuración Nginx WebP funciona correctamente.

Consideraciones importantes

• Asegúrate de que las versiones alternativas de las imágenes realmente existan en el servidor. Nginx no las genera automáticamente. Si los archivos no están presentes, el servidor simplemente entregará el original. Para obtener el máximo beneficio, es recomendable convertir todas las imágenes importantes del sitio.
• Considera el flujo de trabajo de actualización de contenido. Si los gestores de contenido suben nuevas imágenes, es necesario implementar un proceso para su conversión. Se puede configurar un script que genere automáticamente las copias en WebP y AVIF tras la subida de un archivo JPG/PNG. En algunos CMS, esto se puede automatizar mediante plugins.
• Esta implementación no es viable en un entorno de hosting compartido. La mayoría de estos servicios no permiten modificar la configuración de Nginx. Esta solución está diseñada para servidores virtuales (VPS) o dedicados con acceso completo a los archivos de configuración del servidor.

Reflexiones Finales

Con esta configuración, Nginx gestiona de forma autónoma la distribución del formato de imagen más adecuado para cada usuario basándose en las capacidades de su navegador. El sitio web no sufre cambios a nivel de código HTML (no se modifican etiquetas <img> o <picture>), pero la mejora en la velocidad de carga es substancial.

Las imágenes en formato WebP y AVIF tienen un peso significativamente menor que sus contrapartes JPEG, con un ahorro que puede alcanzar el 30-50 %. Como resultado, las páginas se cargan más rápido, especialmente en dispositivos móviles o con conexiones a internet lentas, mientras que los usuarios con navegadores antiguos seguirán visualizando el contenido sin problemas. Es una de las tácticas más efectivas para optimizar imágenes en Nginx.