NGINX Auto WebP and Avif using WebP Server Go

Sysadmin.IDJun 16, 2024

Optimized images on a website using NGINX and WebP Server Go.

In today’s digital era, image optimization is paramount for improving website speed and user experience. One of the most efficient ways to achieve this is by using modern image formats such as WebP and Avif. These formats offer high compression rates without significant loss of quality, which can greatly reduce page load times. A powerful tool to automate this conversion is WebP Server Go, an ultrafast image conversion server that integrates seamlessly with NGINX. In this article, we explore how to set up NGINX for automatic WebP and Avif conversion using WebP Server Go.

Setting Up NGINX with WebP Server Go:

Install WebP Server Go

# create docker compose
vim docker-compose.yml

---
services:
  webp:
    image: webpsh/webp-server-go
    # image: ghcr.io/webp-sh/webp_server_go
    restart: always
    environment:
      - WEBP_CONVERT_TYPES=webp,avif
      - MALLOC_ARENA_MAX=1
      - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libjemalloc.so.2
      # - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libtcmalloc_minimal.so.4.5.6
    volumes:
      - /var/www/html/media:/opt/pics
      - ./exhaust:/opt/exhaust
      - ./metadata:/opt/metadata
    ports:
      -  127.0.0.1:3333:3333

# run docker compose
docker compose up -d

Using LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libjemalloc.so.2 will use jemalloc for malloc, can reduce RAM usage.

Using LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libtcmalloc_minimal.so.4.5.6 will use tcmalloc for malloc.

Configure NGINX

# append in nginx vhost conf
vim /etc/nginx/conf.d/blackonsole_org.conf

upstream webp {
  server 127.0.0.1:3333;
}


server {
  location ^~ /media/.*\.(?:jpg|jpeg|gif|png|svg|heic|bmp|nef|webp)$ {
    proxy_pass http://webp;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_hide_header X-Powered-By;
    proxy_set_header HOST $http_host;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
  }
}

# config test
nginx -t

# reload nginx service
nginx -s reload

# OR

systemctl restart nginx

Check the result

Open up any picture that you upload to your server, you would find it that the content-type change to image/webp or image/avif

Benefits of Using WebP Server Go with NGINX:

Speed: WebP Server Go is highly optimized for converting images quickly, ensuring minimal delay in serving compressed images.
Quality: Despite the high compression rates, the visual quality of images is maintained, providing a superior user experience.
Compatibility: With fallback mechanisms in place, images are delivered in the most appropriate format based on the browser’s capabilities.

By integrating WebP Server Go with NGINX, you can significantly enhance the performance of your website, reduce bandwidth usage, and offer an improved browsing experience to your users.