Optimización de imágenes WebP y AVIF en Nginx: Guía

📅 Publicado el 21 de septiembre, 2026 · Por Equipo RedServicio

Servir imágenes en WebP es de esas mejoras que dan mucho rendimiento a cambio de poco, y aún así montones de configuraciones de Nginx siguen ignorándola. Piensa un momento: las imágenes suelen pesar entre el 50% y el 70% del total de una página. Si las pasas a formatos modernos como WebP o AVIF, ese peso puede caer entre un 30% y un 60% sin que nadie aprecie diferencia de calidad. Aquí va la guía completa: preparar el servidor, convertir las imágenes y dejar que Nginx elija el formato según el navegador de cada visitante.

¿Por qué usar WebP y AVIF? Beneficios reales en velocidad y SEO

WebP, que también salió de las manos de Google, comprime entre un 25% y un 35% mejor que JPEG con calidad equivalente. Además soporta transparencia (como PNG) y hasta animación. AVIF va más lejos todavía. Está construido sobre el códec AV1 y genera archivos entre un 20% y un 50% más pequeños que WebP, sobre todo con gradientes y fotografías de mucho contraste.

¿Y en la práctica, qué gana uno? Cosas medibles:

• Mejora del LCP (Largest Contentful Paint): la imagen hero suele ser el elemento más grande de la página, así que comprimirla ataca directamente tu Core Web Vitals.
• Menos ancho de banda: clave si tu hosting factura por tráfico o si tus lectores navegan con datos móviles justos.
• Ventaja SEO indirecta: Google mete la velocidad de carga en la ecuación del posicionamiento, especialmente en móvil.
• Más conversión: cada segundo de retraso puede costarte hasta un 7% de conversiones. No es poco.

En cuanto a soporte, WebP está prácticamente en todas partes (más del 97% de los navegadores) y AVIF ya supera el 90%, con Chrome, Firefox y Safari 16+ incluidos. Los navegadores viejos recibirán el JPEG o PNG original sin drama. Nada se rompe.

Verificando el soporte de WebP y AVIF en tu servidor Nginx

No hace falta ningún módulo especial para servir WebP o AVIF con Nginx: son archivos estáticos, como cualquier otro. Pero antes de meterte en faena conviene revisar dos cosas: que tu versión de Nginx no sea del pleistoceno y que los tipos MIME estén bien declarados.

Mira tu versión:

nginx -v

Cualquier 1.17+ sirve. Después abre el archivo mime.types (normalmente en /etc/nginx/mime.types) y comprueba que están estas líneas:

image/webp webp;
image/avif avif;

Si no aparecen, añádelas dentro del bloque types y recarga:

sudo nginx -t && sudo systemctl reload nginx

Ese nginx -t valida la sintaxis antes de recargar, así evitas tirar el servicio por un punto y coma olvidado. Para comprobar que un archivo se sirve con el tipo correcto:

curl -I https://tudominio.com/imagen.webp

En la respuesta debería salir Content-Type: image/webp. Y un apunte: si tu web está en una plataforma con panel propio, como el hosting de RedServicio, estos MIME ya vienen preconfigurados, y el soporte técnico 24/7 puede revisarte la configuración de Nginx sin coste extra.

Cómo convertir tus imágenes a WebP y AVIF: herramientas y comandos

Dos caminos posibles. Línea de comandos para lotes grandes, o convertidores online para imágenes sueltas.

cwebp y avifenc (línea de comandos)

La librería libwebp trae cwebp, y libavif trae avifenc. Así se usan:

cwebp -q 80 foto.jpg -o foto.webp

avifenc -q 60 foto.jpg foto.avif

Como referencia: calidad 75-85 en WebP y 50-65 en AVIF suele ser el punto dulce entre peso y fidelidad visual. ¿Quieres convertir un directorio entero de golpe? Un bucle lo resuelve:

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Herramientas gráficas y online

• Squoosh.app: el convertidor gratuito de Google, con comparador visual en tiempo real. Muy cómodo.
• ImageMagick: el clásico convert foto.jpg -quality 80 foto.webp, disponible en casi cualquier servidor Linux.
• Plugins de CMS: ShortPixel, Imagify o EWWW hacen la conversión automática en WordPress.

Eso sí, conserva siempre los originales en JPEG o PNG. Los necesitarás como fallback para navegadores antiguos, y también como fuente si más adelante quieres regenerar todo con otra calidad (te lo agradecerás).

Configuración de Nginx para la optimización de imágenes WebP y AVIF

La idea en Nginx es simple: servir la versión WebP o AVIF cuando el navegador la soporte, sin tocar las URLs originales. La técnica más robusta combina el módulo ngx_http_image_filter_module, un mapa de la cabecera Accept y try_files.

Primero, declara los mapas en el bloque http:

map $http_accept $webp_suffix { default «»; «~*webp» «.webp»; }
map $http_accept $avif_suffix { default «»; «~*avif» «.avif»; }

Luego, en el bloque server o location que atiende las imágenes, usa try_files dando prioridad a AVIF sobre WebP (comprime mejor):

• location ~* ^(.+)\.(jpg|jpeg|png)$ {
• try_files $1$avif_suffix$webp_suffix $1$webp_suffix $uri =404;
• add_header Vary «Accept»;
• }

Si tu distribución de Nginx no trae los tipos MIME en mime.types, añádelos en el bloque http: image/webp webp; y image/avif avif;. Ojo con un error típico: servir el WebP con MIME de JPEG. Algunos navegadores lo renderizan mal y te vuelves loco buscando el motivo.

Mapa de negotiation por cabecera Accept y caché del navegador

Aquí está el corazón de todo el asunto. Cada navegador anuncia en la cabecera Accept los formatos que entiende: Chrome y Firefox incluyen image/webp e image/avif, mientras que las versiones antiguas solo declaran jpeg y png. El mapa de Nginx traduce eso a la extensión que se va a servir.

El punto delicado es la caché. Si sirves contenido negociado, tienes que incluir Vary: Accept para que las CDN y las cachés intermedias sepan que la respuesta depende de esa cabecera. Sin ella, ¿qué pasa? Que la CDN puede reenviar un WebP a un navegador que solo entiende JPEG, y ese usuario verá imágenes corruptas. No es teórico: pasa.

Configura también una política de caché generosa para las imágenes, que en la práctica son recursos inmutables:

• location ~* \.(jpe?g|png|webp|avif)$ { expires 30d; add_header Cache-Control «public, immutable»; add_header Vary «Accept»; }

Si usas FastCGI cache o proxy cache, mete $http_accept en la clave de caché (proxy_cache_key o fastcgi_cache_key) para no servirle la misma versión a todo el mundo. En CDN como Cloudflare, activa la negociación de WebP desde el panel, o al menos asegúrate de que las reglas de caché respetan la cabecera Vary. Y una cosa más: después de regenerar imágenes, purga la caché de la CDN. Si no, los formatos viejos pueden seguir circulando durante semanas.

Conclusión: imágenes ligeras, servidor rápido

Pocas mejoras de rendimiento ofrecen tanta relación esfuerzo-beneficio como esta: WebP y AVIF con un Nginx bien configurado te dan reducciones del 30 al 70 por ciento en peso, mejores Core Web Vitals y una carga que se nota a simple vista. Y sin cambiar ni una sola URL de tu sitio.

El flujo completo, resumido: convierte tus imágenes a WebP y AVIF conservando los originales, monta los mapas de la cabecera Accept y try_files en Nginx, añade la cabecera Vary junto a una caché agresiva, y verifica con curl o las DevTools del navegador. A partir de ahí, cada imagen nueva que subas se servirá sola en el mejor formato que soporte cada visitante. Te olvidas.

¿Y si prefieres no pelearte con la consola? En RedServicio.net nuestros planes de hosting incluyen Nginx optimizado, HTTP/2 y HTTP/3, y soporte técnico 24/7 que te ayuda a aplicar estas configuraciones sin riesgos. Un servidor bien afinado más imágenes ligeras: tus usuarios lo notarán, y los buscadores también.