使用WebP-Server-Go无缝转换图片为Google的webp格式让你网站访问加载速度飞起来

# 前置环境，您需要安装一些依赖项（AVIF 编码器需要它）：
INSTALL_HOME=/opt/webps
WEBP_HOST=127.0.0.1
WEBP_PORT=3333
WEBP_QUALITY=80
IMG_PATH=/usr/share/nginx/html
EXHAUST_PATH=${INSTALL_HOME}/cache

## Ubuntu
if [ -f /usr/bin/apt ];then
  apt install libaom-dev -y
  ln -s /usr/lib/x86_64-linux-gnu/libaom.so /usr/lib/x86_64-linux-gnu/libaom.so.3
fi
# CentOS
if [ -f /usr/bin/yum ];then
  yum install libaom-devel -y
fi

# 下载、可执行权限、软连接
mkdir -vp ${INSTALL_HOME}/cache
wget --no-check-certificate https://github.com/webp-sh/webp_server_go/releases/download/0.4.5/webp-server-linux-amd64-80aa8cb63a85a986f83a88579e8d2b4b -O ${INSTALL_HOME}/webp-server
chmod +x ${INSTALL_HOME}/webp-server
ln -s ${INSTALL_HOME}/webp-server /usr/local/bin/webp-server

# 配置文件
/usr/local/bin/webp-server -dump-config > ${INSTALL_HOME}/config.json
sed -i -e "s#127.0.0.1#${WEBP_HOST}#" \
  -e "s#3333#${WEBP_PORT}#" \
  -e "s#80#${WEBP_QUALITY}#" \
  -e "s#./pics#${IMG_PATH}#" \
  -e "s#./exhaust#${EXHAUST_PATH}#" ${INSTALL_HOME}/config.json

# 手动运行 webp-server 服务 (前台运行)
${INSTALL_HOME}/webp-server --config=${INSTALL_HOME}/config.json

webp-server --help
Usage of webp-server:
  -V    Show version information.
  -config string /path/to/config.json. (Default: ./config.json) (default "config.json")
  -dump-config  Print sample config.json
  -dump-systemd Print sample systemd service file.
  -jobs int     Prefetch thread, default is all. (default 2)
  -prefetch     Prefetch and convert image to webp
  -v    Verbose, print out debug info.

$ cat /opt/webps/config.json
{
  "HOST": "127.0.0.1",
  "PORT": "3333",
  "QUALITY": "80",
  "IMG_PATH": "/usr/share/nginx/html",
  "EXHAUST_PATH": "/opt/webps/cache",
  "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"],
  "ENABLE_AVIF": false
}

# 本地 CPU 内核数
$ lscpu  | grep "^CPU(s)"
CPU(s):   2

# 指定 webp 预取时使用的内核数
/usr/local/bin/webp-server -prefetch -jobs=1 --config=${INSTALL_HOME}/config.json
  # INFO[2022-07-27 11:47:25][153:main.convertLog()] WebP@80.00%: /usr/local/app/weiyigeek/img/wechat-search.png->/opt/webps/cache/img/wechat-search.png.1647996506.webp 32641->12416 38.04% deflated

/usr/local/bin/webp-server -dump-systemd > /lib/systemd/system/webp-server.service
systemctl daemon-reload
systemctl enable webp-server.service
systemctl start webp-server.service

$ cat /lib/systemd/system/webp-server.service
[Unit]
Description=WebP Server Go
Documentation=https://github.com/webp-sh/webp_server_go
After=nginx.target

[Service]
Type=simple
StandardError=journal
WorkingDirectory=/opt/webps
ExecStart=/opt/webps/webp-server --config /opt/webps/config.json
Restart=always
RestartSec=3s

[Install]
WantedBy=multi-user.target

[program:webpserver]
command=/your/webservergo/path/webp-server-linux-amd64 --config=/your/webservergo/path/config.json
directory=/your/webservergo/path
autorestart=true
startsecs=3
startretries=3
stdout_logfile=/your/log/path/webpserver.out.log
stderr_logfile=/your/log/path/webpserver.err.log
stdout_logfile_maxbytes=2MB
stderr_logfile_maxbytes=2MB
user=root
priority=999
numprocs=1
process_name=%(program_name)s_%(process_num)02d

# static.conf
# https - static.weiyigeek.top
server {
  listen       80;
  listen       443 ssl http2;
  server_name  static.weiyigeek.top;

  charset utf-8;
  access_log /var/log/nginx/static/static.log custom buffer=128k flush=3m;

  # CORS
  add_header Access-Control-Allow-Origin '*.weiyigeek.top';
  add_header Access-Control-Allow-Methods 'GET,POST';
  add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

  # HSTS
  add_header Strict-Transport-Security "max-age=15768000;includeSubDomains;preload" always;

  # XXS-Protection
  add_header X-XSS-Protection "1; mode=block";

  # ssl 证书
  ssl_certificate      /root/.acme.sh/weiyigeek.top_ecc/fullchain.cer;
  ssl_certificate_key  /root/.acme.sh/weiyigeek.top_ecc/weiyigeek.top.key;
  ssl_session_cache    shared:MozSSL:10m;
  ssl_session_timeout  1d;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
  ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE:ECDH:AES:HIGH:EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:!NULL:!aNULL:!eNULL:!EXPORT:!PSK:!ADH:!DH:!DES:!MD5:!RC4;
  ssl_prefer_server_ciphers  on;

  # 访问规则
  location ~* \.(?:jpg|jpeg|gif|png)$ {
    proxy_pass http://127.0.0.1:3333;
    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';
  }

  # 如果您的网站使用 CDN（如 Cloudflare），我们建议您添加一个私有标头以防止 Cloudflare 缓存这些图像，如下例所示
  location ^~ /wp-content/uploads/ {
    add_header Cache-Control 'private';
    proxy_pass http://127.0.0.1:3333;
  }
}

# 检查配置文件是否有问题
nginx -t 

# 重载 Nginx 配置
nginx -s reload

# 原图大小 (98K)
$ ls -alh banner.jpg
-rw-r--r-- 1 ubuntu ubuntu 98K Apr 13 20:40 banner.jpg

# Nginx Gzip 源站图片大小 80.57KB ~ (原图 98KB) 下载于：220 毫秒

# Webp 格式图片大小  17.57 KB ~ (18 kB) 下载于：187 毫秒
$ ls /opt/webps/cache/blog
-rw-r--r-- 1 root root  18K Jul 27 14:33 banner.jpg.1649853609.webp

# Docker command
docker run -d -p 3333:3333 -v /path/to/pics:/opt/pics --name webp-server webpsh/webp-server-go

# docker-compose.yml
tee docker-compose.yml <<'EOF'
version: '3'
services:
  webp:
    image: webpsh/webp-server-go
    restart: always
    volumes:
      - ./path/to/pics:/opt/pics
      - ./path/to/exhaust:/opt/exhaust
      - ./config.json:/etc/config.json
    ports:
      -  127.0.0.1:3333:3333
    deploy:
      resources:
        limits:
          memory: 200M
EOF

$ more /usr/local/nginx/conf.d/blog.conf

# 访问规则 (关键部分)
location ~* \.(?:jpg|jpeg|gif|png)$ {
  proxy_pass http://127.0.0.1:3333;
  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';
}

# 配置核验 & 重载Nginx
nginx -t
nginx -s reload