个人网站无缝切换图片格式到 webp 或 avif
阿甘知识库 2024-10-04 14:03:03 阅读 68
当你点进来,恭喜你来对地方了,我写的东西从来都是小白向的(把自己当小白),不会故作厉害写的云里雾里让人看不懂,既然发出来就会有人看到,不是每个人都是程序员懂技术的。
项目
为什么图片格式要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. 新建项目文件夹
<code>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,没有改变,但是查看标头会看到:
<code>Content-Type: image/avif 说明转成了avif格式X-Compression-Rate: 0.12
压缩率,即大小为原始图片的12%
avif格式大小为43.3k
原本的png格式大小为363k
其他参数说明
可选webp,avif
<code>"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
完结撒花。。。。
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。