为网站添加图片 WebP 自动转换功能

什么是 WebP

WebP 是一种新型图片格式,是由 Google 于 2010 年开发推出。它旨在提供比传统图片格式更高的压缩率,同时保持高质量的图像。

WebP 的优势在于可以在不影响图片质量的情况下显著减小文件大小,从而加快网页加载速度,提高用户体验。

WebP 支持有损和无损压缩,以及动画和透明度。此外,WebP 支持元数据,如 Exif 和 XMP 信息。这使得 WebP 在各种应用场景中都能提供良好性能。

然而,WebP 采用率相对较低,因为它需要较新的浏览器和图像处理库的支持。尽管许多现代浏览器都支持,但一些旧版浏览器和设备可能无法显示 WebP 图像。因此,在部署 WebP 图像时需要考虑到这一点并确保提供适当回退机制。

工具介绍

webp_server_go 是一个基于 Golang 的服务,允许您即时提供 WebP 图像。

webp_server_go 可以将指定目录中的图片自动转换为 WebP 格式,而不更改其 URL。

例如原图为 https://bu.dusays.com/2023/10/12/6527eee969d45.png,新图仍然为 https://bu.dusays.com/2023/10/12/6527eee969d45.png。但后者实际为 WebP 的格式。

webp_server_go 官方介绍支持 JPEG/PNG/BMP/GIF/SVG/HEIC 格式图片文件,实际测试仅 JPEG 格式效果良好。

部署方式

这里推荐使用 Docker 来部署,docker-compose.yml 的参考内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

将上方代码中 ./path/to/pics 改为图片所在的路径,如/www/wwwroot/bu.dusays.com./exhaust 为转换后 WebP 图片保存路径,./metadata 为元数据的保存路径。配置好后执行如下命令即可:

1
docker-compose up -d

调用方法

如果使用独立域名调用图片,可直接反代 http://127.0.0.1:3333,配置参考下图:

如果像杜老师仅处理 JPEG 格式图像,则可以在站点配置文件中添加如下的配置:

1
2
3
4
5
6
7
8
location ~* \.(jpg|jpeg)$ 
{
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';
}

本文链接:https://my.lmcjl.com/post/15995.html

展开阅读全文

4 评论

留下您的评论.