将网站图片自动转为webp的开源神器：WebP Server Go

in 元件分享 with 0 comment

写博客总是有一些截图，最开始一直在找哪种截图软件，可以有自动压缩图片的功能，试了很多，没什么大用。后来也在想能不能有自动变成webp的神器，结果，只有对象存储这种付费的服务才能达到目的。
不过最近发现在这款开源神器，WebP Server Go ，可以在链接不变的情况，自动将图片转换成webp格式，这大大降低了页面的大小，我这小站的首页，使用前资源加载完要2.3M，使用后，直接降为了900多K，简直不要太爽！
2024-02-06T11:18:32.png

软件是开源的，可以去首页看看：https://github.com/webp-sh/webp_server_go
2024-02-06T11:20:07.png

docker安装 WebP Server Go

建立一个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
    volumes:
      - ./path/to/pics:/opt/pics
      - ./exhaust:/opt/exhaust
      - ./metadata:/opt/metadata
    ports:
      -  127.0.0.1:3333:3333

然后运行docker compose

docker compose up -d

配置nginx

在站点的nginx配置文件里，加入以下代码：

  # 访问规则
  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 ^~ /usr/upload/ {
    add_header Cache-Control 'private';
    proxy_pass http://127.0.0.1:3333;
  }

然后测试一下nginx,重载一下nginx：

nginx -t
systemctl reload nginx

小坑说明

我配置好之后，访问网站发现docker的日志里根本就没有变化，说明没起作用。
后来找了几个原因：

Cloudflare 的缓存

如果你是用的Cloudflare，自动打开了缓存，那么可能需要按上面的nginx配置里，将标头加进去才行。

防止跨域访问的配置

我发现我的nginx配置里，有一段防止别人跨域访问的配置，开了之后，这个配置就不生效。

  location ~ .*\.(wma|wmv|asf|mp3|mmf|zip|rar|jpg|gif|png|swf|flv|mp4)$ {
    valid_referers none blocked *.rplib.cn rplib.cn;
    if ($invalid_referer) {
        return 403;
    }
  }

关闭后，正常了。

  # location ~ .*\.(wma|wmv|asf|mp3|mmf|zip|rar|jpg|gif|png|swf|flv|mp4)$ {
    # valid_referers none blocked *.rplib.cn rplib.cn;
    # if ($invalid_referer) {
        # return 403;
    # }
  # }

现在先不管了，先关了再说。等有空再慢慢研究一下什么情况。

本文由 admin 创作，采用 知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。

← → ↓ ↑
Responses