使用webp-server-go来无痛高效的优化网站图片 从jpg和png自动转成webp 并删除exif信息

项目原文档: Use with Docker(Recommended) | WebP Server Documentation

自建原因

  1. 一开始测试使用了Webp Cloud, 发现免费用户一天只有3000次访问,并且不可以一个站点对应多个策略, 所以决定自建.
  2. 作为一个交流社区, 要求author去考虑上传前压缩图片, 的确很反人类. 而且大部分应该都是"截图-粘贴", 手动去压缩图片很不方便.

使用流程

1.创建config.json文件夹

比如目录是/opt/docker/webp-serve-go/config.json, 内容如下:

{
  "HOST": "0.0.0.0",
  "PORT": "3333",
  "QUALITY": "80",
  "EXHAUST_PATH": "./exhaust",
  "IMG_MAP": {
    "/R1": "R1存储桶的后端访问地址",
    "/r2": "R2存储桶的后端访问地址,比如https://cf-r2.czl.net"
  },
  "ALLOWED_TYPES": ["*"],
  "CONVERT_TYPES": ["webp"],
  "STRIP_METADATA": true,
  "ENABLE_EXTRA_PARAMS": true,
  "EXTRA_PARAMS_CROP_INTERESTING": "InterestingAttention",
  "READ_BUFFER_SIZE": 4096,
  "CONCURRENCY": 262144,
  "DISABLE_KEEPALIVE": false,
  "CACHE_TTL": 259200,
  "MAX_CACHE_SIZE": 4096
}

2. 在/opt/docker/webp-server-go/docker-compose.yml创建以下内容:

注释掉的是一个外部库, 用来异步进行优化, 主要是针对avif这种特别消耗服务器资源的任务

AMD64

services:
    webp:
        container_name: webp-server-go
        image: webpsh/webp-server-go
        ports:
            - 3333:3333
        restart: always
        environment:
          - TZ=Asia/Shanghai
          - 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:
            - ./config.json:/etc/config.json
            - ./exhaust:/opt/exhaust
            - ./metadata:/opt/metadata
            - /opt/1panel/apps/openresty/openresty/www/sites/xxx.net/index:/opt/v
           

ARM64

services:
    webp:
        container_name: webp-server-go
        image: webpsh/webp-server-go
        ports:
            - 3333:3333
        restart: always
        environment:
          - TZ=Asia/Shanghai
          - MALLOC_ARENA_MAX=1
          # - LD_PRELOAD=/usr/lib/aarch64-linux-gnu/libjemalloc.so.2
          # - LD_PRELOAD=/usr/lib/aarch64-linux-gnu/libtcmalloc_minimal.so.4.5.6
    volumes:
      - /path/to/pics:/opt/pics
      - ./exhaust:/opt/exhaust
      - ./metadata:/opt/metadata
    ports:
      -  127.0.0.1:3333:3333

        volumes:
            - ./config.json:/etc/config.json
            - ./exhaust:/opt/exhaust
            - ./metadata:/opt/metadata
            - /opt/1panel/apps/openresty/openresty/www/sites/xxx.net/index:/opt/v
           

3. 运行并创建反代

cd /opt/docker/webp-server-go
docker compose up -d

然后使用Nginx进行反代

新建一个站点, 比如域名是https://webp-cf.czl.net, 在站点配置里加入以下配置:

location ^~ / {
    proxy_pass http://127.0.0.1:3333; 
    proxy_set_header Host $host; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header REMOTE-HOST $remote_addr; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    proxy_set_header X-Forwarded-Proto $scheme; 
    proxy_http_version 1.1; 
    add_header X-Cache $upstream_cache_status; 
    add_header Cache-Control 'private';
}

4. 使用方法

比如本来有个图片是

https://cf-r2.czl.net/q58/data/post/172273608842738118306f9a448.png

就是下面这个:

只要把链接前面的https://cf-r2.czl.net换成https://webp-cf.czl.net/r2就可以了.就像下面这个:

https://webp-cf.czl.net/r2/q58/data/post/172273608842738118306f9a448.png

效果

image.png

可以看到链接虽然还是png, 但是类型已经变成webp了, 大小也变小了.从104kb变成了62.8kb.

替换之前图片

提供2个想法:

  1. 如果原站也是nginx代理提供访问的, 可以在nginx里直接抓取对应img标签, 替换url
  2. 更好的方法是直接进对应的文章数据库里批量替换