使用 webp-server 和 Docker 实现网站上的 WebP 图像实时转换

引言

为什么要使用webp-server转换图像

WebP是一种由Google开发的现代图像格式，它具有更高效的图像压缩技术。将图像转换成WebP格式，在图像质量损失不大的情况下，可以显著减小图像大小，从而减少带宽消耗，提高网站加载速度，使网站运行更加流畅。

为什么选择 `webp-server` 和 Docker 进行部署。

由于docker可以快速部署，易于维护和管理，本博客是部署在docker上的，nginx也是放在了同一个项目中，为了统一维护，本次也将webp-server部署到docker中。

第一部分：了解 web-server-go

如何优雅的在不替换图片地址的情况下，将图片转为 webp 格式然后输出呢？

这时候就可以使用 webp-sh 组织最新开源的 webp_server_go 了，它的大概原理就是：当我们请求一张图片的时候使用 web 代理工具转发到 webp_server_go 应用进行处理，处理完成之后返回 webp 格式的图片，并且会保留处理后的图片以供后面的访问。

目前大部分主流浏览器都已经支持了 webp 图片的显示，除了 Safari，但是不必担心，webp_server_go 会自动判断请求来源是否为 Safari，如果是，那么会返回原图。

第二部分：准备开发环境

安装 Docker：

确保开发机器上安装了 Docker。

获取 webp-server-go

通过 GitHub 或其他源下载 webp-server 的 Docker 映像。

修改docker-compose.yml 文件

增加了webps的配置

webps:
    image: docker.nankle.us.kg/webpsh/webp-server-go
    container_name: webps
    ports:
      - "3333:3333"
    volumes:
      - ./halo2/attachments:/opt/pics
      - ./webps/exhaust:/opt/exhaust
      - ./webps/metadata:/opt/metadata
      - ./webps/config.json:/etc/config.json
    restart: always
    networks:
      halo_network:

关键参数

下面这几个目录是需要映射的

pics映射的是原图片 ，注意attachments不是图片目录，attachments/upload才是图片目录

- ./halo2/attachments:/opt/pics

这个是缓存路径，好像不映射也可以，转换后的图片会存到这里

- ./webps/exhaust:/opt/exhaust

这个是配置文件路径。不映射就是默认的，映射出来可以自己修改

- ./webps/config.json:/etc/config.json

加入和其他应用相同的网络，因为我这个项目nginx也在一个网络下，所以要配置

networks:

halo_network:

第三部分：webp-server 集成

设置配置文件config.json

{
  "HOST": "0.0.0.0",
  "PORT": "3333",
  "QUALITY": "80",
  "IMG_PATH": "/opt/pics",
  "EXHAUST_PATH": "./exhaust",
  "IMG_MAP": {},
  "ALLOWED_TYPES": ["jpg","png","jpeg","gif","bmp","svg","heic","nef"],
  "CONVERT_TYPES": ["webp"],
  "STRIP_METADATA": true,
  "ENABLE_EXTRA_PARAMS": false,
  "READ_BUFFER_SIZE": 4096,
  "CONCURRENCY": 262144,
  "DISABLE_KEEPALIVE": false,
  "CACHE_TTL": 259200
}

解释:

图片质量参数：QUALITY 80就是压缩百分之80

指定源图像目录：IMG_PATH ，这个路径是可以改成多种匹配方式的，也可以是网络位置

例如

{
  "HOST": "127.0.0.1",
  "PORT": "3333",
  "QUALITY": "80",
  "IMG_PATH": "./pics",
  "EXHAUST_PATH": "./exhaust",
  "IMG_MAP": {
    "/2": "./pics2",
    "/3": "./pics3",
    "http://www.example.com": "https://docs.webp.sh"
  },
  "ALLOWED_TYPES": ["jpg","png","jpeg","bmp","gif","svg","heic","nef"],
  "CONVERT_TYPES": ["webp"],
  "STRIP_METADATA": true,
  "ENABLE_EXTRA_PARAMS": false
}

在 目录下有一些图像，如下所示：./pics./pics2./pics3

• ./pics包含1.jpg2.jpg3.jpg

• ./pics2包含example.png

• ./pics3包含webp_server.jpg

• https://docs.webp.sh是本地实例可访问的有效 Web 服务主机/favicon.png

然后，您可以通过以下方式访问它们：

• http://localhost:3333/1.jpg, ,http://localhost:3333/2.jpghttp://localhost:3333/3.jpg

• http://localhost:3333/2/example.png

• http://localhost:3333/3/webp_server.jpg

• http://www.example.com/favicon.png

要使最后一个示例正常工作，您需要将标头作为请求的一部分传递。如果使用，可以使用命令进行测试

Hostcurlcurl -H 'Host: www.example.com' http://localhost:3333/favicon.png

转换后的 WebP 图像存放位置：EXHAUST_PATH

下面是从官网上复制的，自动翻译凑合看吧

各字段说明：

启动 webp-server-go

- 使用 `docker-compose up` 命令启动服务。

- 验证 webp-server 是否正常工作。

观察类型变成了webp就是成功了，文件大小也变小了

第四部分：网站集成

本次使用的nginx做的转发，下面是测试环境配置

upstream halo {
        server halo:8090; # 使用容器名称作为服务地址
    }

server {
        listen 8081;
        listen [::]:8081;
        server_name 192.168.31.58;
        client_max_body_size 1024m;

        location / {
            proxy_pass http://halo;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location ^~ /upload/ {
            proxy_pass http://webps: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';
        }
    }

将/upload相关的地址转发到图片转换服务中，我的项目是这个路径，根据实际情况修改。

第五部分：性能监控与优化

- **性能测试**：

- 使用工具（如 Lighthouse 或 PageSpeed Insights）测试网站加载速度。

- 对比使用 WebP 前后页面性能的变化。

我没有使用工具对比，只是观察控制台的速度，比不用更慢了，分析了下原因，不用会走缓存，禁用缓存后，使用图片压缩会变快。但是实际场景中正常用户应该不会禁用缓存，所以新网页打开会变快，历史的刷新会变慢。我的结论不够严谨，只是个人结论。

后来发现上面不走缓存是因为nginx配置的原因

add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';

去掉这个配置就走缓存了，还是转换后的速度更快。

第六部分：故障排除

- **常见问题及解决方法**：

- 如何处理 webp-server 的错误消息。

通过浏览器的F12控制台可以观察错误的原因，我的路径错误就是这样找出原因的。

- 解决 Docker 容器运行时的问题。

通过 docker exec -it webps sh 可以进入容器内查看，看下路径是否正确，里面的文件是否都正常。

总结：

webp-server-go是个好用的工具，图片转换非常快，网站使用优点很多，只是需要经过测试，看看是不是适合，看官方的描述，相同的图片应该可以缓存，所以不会重复的压缩，也就是cpu资源不会过多占用，所以我准备用起来试一下。

参考文献：

本文参考了以下文章

优雅的让 Halo 支持 webp 图片输出 - Halo - 强大易用的开源建站工具

Halo 文档内容陈旧，需要更新 - Halo 社区

使用WebP Server在不改变URL的情况下将网站图像转换为WebP-腾讯云开发者社区-腾讯云 (tencent.com)

Multipath | WebP Server Documentation