使用webp 图片输出提高个人网站加载速度
webp是什么？
WebP的有损压缩算法是基于VP8视频格式的帧内编码[17]，并以RIFF作为容器格式。[2] 因此，它是一个具有八位色彩深度和以1:2的比例进行色度子采样的亮度-色度模型（YCbCr 4:2:0）的基于块的转换方案。[18] 不含内容的情况下，RIFF容器要求只需20字节的开销，依然能保存额外的 元数据(metadata)。[2] WebP图像的边长限制为16383像素。
简单来说，WebP 图片格式的存在，让我们在 WebP 上展示的图片体积可以有较大幅度的缩小，也就带来了加载性能的提升。（摘自 https://nova.moe/re-introduce-webp-server)
安装webp
那么如何优雅的在不替换图片地址的情况下，将图片转为 webp 格式然后输出呢？
这时候就可以使用 webp-sh 组织最新开源的 webp_server_go 了，它的大概原理就是：当我们请求一张图片的时候使用 web 代理工具转发到 webp_server_go 应用进行处理，处理完成之后返回 webp 格式的图片，并且会保留处理后的图片以供后面的访问。
目前大部分主流浏览器都已经支持了 webp 图片的显示，除了 Safari，但是不必担心，webp_server_go 会自动判断请求来源是否为 Safari，如果是，那么会返回原图。
部署 webp_server_go
- 新建一个存放二进制文件和 config.json 文件的目录（可自定义）：
mkdir /opt/webpscd /opt/webps
- 下载二进制文件（最新版本请访问 releases）：
wget https://github.com/webp-sh/webp_server_go/releases/download/0.1.0/webp-server-linux-amd64 -O webp-server
- 给予执行权限：
chmod +x webp-server
- 创建 config.json
{"HOST": "127.0.0.1","PORT": "3333","QUALITY": "80","IMG_PATH": "/root/.halo","EXHAUST_PATH": "/root/.halo/cache","ALLOWED_TYPES": ["jpg","png","jpeg"]
}
参数解释：
- HOST：一般不修改。
- PORT：webp_server_go 的运行端口。
- QUALITY：转换质量，默认为 80%。
- IMG_PATH：固定格式，/运行 Halo 的用户名/.halo
- EXHAUST_PATH：固定格式，/运行 Halo 的用户名/.halo/cache
- ALLOWED_TYPES：需要转换的格式.
使用 systemd 进行状态管理
- 创建 service 文件：
vim /etc/systemd/system/webps.service
- 写入
[Unit]
Description=WebP Server
Documentation=https://github.com/n0vad3v/webp_server_go
After=nginx.target[Service]
Type=simple
StandardError=journal
AmbientCapabilities=CAP_NET_BIND_SERVICE
WorkingDirectory=/opt/webps
ExecStart=/opt/webps/webp-server --config /opt/webps/config.json
ExecReload=/bin/kill -HUP $MAINPID
Restart=always
RestartSec=3s[Install]
WantedBy=multi-user.target
需要注意的是，ExecStart 命令中的程序路径和配置文件路径一定要正确，结合你的实际情况填写。
- 然后执行：
systemctl daemon-reload
systemctl enable webps.service
systemctl start webps.service
- 查看运行状态：
systemctl status webps.service
如果没有问题，那么会输出以下日志：
WebP Server is running at 127.0.0.1:3333配置 Nginx 进行代理
- 修改nginx.conf,在 server 节点添加:
location ~* ^/upload/.*(gif|jpg|png|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';
}
- 重载 Nginx 配置：
# 检查配置文件是否有问题
nginx -t nginx -s reload
原文链接：优雅的让 Halo 支持 webp 图片输出
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！