个人网站无缝切换图片格式到 webp 或 avif

当你点进来，恭喜你来对地方了，我写的东西从来都是小白向的（把自己当小白），不会故作厉害写的云里雾里让人看不懂，既然发出来就会有人看到，不是每个人都是程序员懂技术的。

项目

为什么图片格式要webp 或 avif，我就不多解释了。
Gtihub: https://github.com/webp-sh/webp_server_go

文档：https://docs.webp.sh/usage/usage/

场景

当你原本的站点有大量未经压缩的图片，例如png,jpg格式的，你可能试过不少方法来减小图片大小，以减小成本开销。但是这个过程并不容易，现在我告诉你此方案还不错你是否愿意试一试。此方案不会对你的原始图片做任何改动（大小与格式都不变），你唯一要做的就是替换图片地址而已！
别急，这不代表什么都没有改变，直接开始教程，请往下看。

系统环境

这是我自己的，没有限制
debian11
宝塔：7.7.0

Docker安装

首先，你要安装好docker

1. 新建项目文件夹

mkdir-p /opt/docker_data/WebP

cd /opt/docker_data/WebP

mkdir-p ./exhaust ./metadata

2. 新建 docker-compose.yml

vim docker-compose.yml

可以直接引用我的不需要改动，内容如下：

version: '3'

services:
  webp:
    image: webpsh/webp-server-go
    # image: ghcr.io/webp-sh/webp_server_go
    restart: always
    environment:
      - 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:
     # - /path/to/pics:/opt/pics
      - ./exhaust:/opt/exhaust
      - ./metadata:/opt/metadata
      - ./config.json:/etc/config.json
    ports:
      -  127.0.0.1:3333:3333

3.新建 config.json 配置文件

touch config.json
vim config.json

重点改动的地方就是config.json,内容如下：

{"HOST":"0.0.0.0",
  "PORT":"3333",
  "QUALITY":"80",
  "IMG_PATH":"",
  "EXHAUST_PATH":"./exhaust",
  "IMG_MAP":{"/image":"https://image.leshans.eu.org/image",
    "/pic":"https://imgsrc.baidu.com/forum/pic/item"},
  "ALLOWED_TYPES":["jpg", "png", "jpeg", "bmp", "gif", "svg", "heic", "nef", "webp"],
  "CONVERT_TYPES":["avif"],
  "STRIP_METADATA": true,
  "ENABLE_EXTRA_PARAMS": true,
  "EXTRA_PARAMS_CROP_INTERESTING":"InterestingAttention",
  "READ_BUFFER_SIZE":4096,
  "CONCURRENCY":262144,
  "DISABLE_KEEPALIVE": false,
  "CACHE_TTL":0,
  "MAX_CACHE_SIZE":2000}

修改配置

• 假设原本的站点图片域名是 image.aaa.com
• 现在，请准备另外的域名或者aaa的二级域名都行，例如 image.bbb.com
• image.bbb.com 做好解析，配置好证书

我们只需要改动 IMG_MAP 字段，例如：

  "IMG_MAP": {
    "/image": "https://image.aaa.com"
  },

解释：

• 原本的图片地址是https://image.aaa.com/123456.png
• 新的图片地址是：https://image.bbb.com/image/123456.png
• 左边的/image就是路径，右边就是原始地址
• 看出来了吗，就点反向代理的意思

提示：不局限于只你反代自己站点的图片，你可以反代几乎任何站点的图片

可以多个地址，例如：

  "IMG_MAP": {
     "/image": "https://image.aaa.com",
     "/bili": "https://i0.hdslb.com/bfs/archive"  
  },

https://i0.hdslb.com/bfs/archive/123456.png

就变成

https://image.bbb.com/bili/123456.png

注意：/image和/bili的上下排序，

字符长的在上面

，所以，/image在上面。

修改好后，启动

docker compose up -d

忘了说，安装成功后，记得做好反向代理，端口是

3333 

反向代理这块并没有特殊要求，不管是使用宝塔，还是其他方式

测试是否生效

原本的图片格式是png，没有改变，但是查看标头会看到：

• Content-Type: image/avif 说明转成了avif格式
• X-Compression-Rate: 0.12 压缩率，即大小为原始图片的12%

avif格式大小为43.3k

原本的png格式大小为363k

其他参数说明

可选webp，avif

"CONVERT_TYPES": ["webp"]  # 默认webp

启用额外参数

"ENABLE_EXTRA_PARAMS": true,

例如图片链接末尾添加

?max_width=270&max_height=405

这两个参数用于限制图像的尺寸，并将大尺寸图像限制在这两个维度内，同时保持小尺寸图像不变。

例如，我们有一张名为 big.jpg 的 500x500px 图像。当您访问

/big.jpg?max_height=200&max_width=100

时，由于

max_width

较小，图像将缩放为 100x100px。

如果我们有一张名为 small.jpg 的 80x80px 图片，当你访问

/small.jpg?max_height=200&max_width=100

时，由于图片的长宽都在范围内，所以这张图片不会被处理。

缓存有效期

设置为0则永久缓存

"CACHE_TTL": 259200,

缓存大小

单位为MiB，默认值是0，这意味着不会清理本地缓存文件。如果设置了该值，例如设置为50，那么每分钟后台任务将与WebP Server Go同时运行一次，以确保本地缓存目录的总大小不超过50MiB

"MAX_CACHE_SIZE": 0

常来小站看看：https://blog.taoshuge.eu.org
完结撒花。。。。