侧边栏壁纸
博主头像
可乐没气的猫博主等级

四分之一的职业法师|二次元的分享家

  • 累计撰写 9 篇文章
  • 累计创建 5 个标签
  • 累计收到 6 条评论

目 录CONTENT

文章目录

20220228 Docker安装webps|优雅的让Halo支持webp

可乐没气的猫
2022-02-28 / 6 评论 / 1 点赞 / 838 阅读 / 3,121 字

前言

是什么

WebP的有损压缩算法是基于VP8视频格式的帧内编码,并以RIFF作为容器格式。因此,它是一个具有八位色彩深度和以1:2的比例进行色度子采样的亮度 - 色度模型(YCbCr 4:2:0)的基于块的转换方案。不含内容的情况下,RIFF容器要求只需20字节的开销,依然能保存额外的 元数据 (metadata)。WebP 图像的边长限制为16383像素。
在WebP的官网中,我们可以发现Google是这样宣传WebP的:

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
简单来说,WebP图片格式的存在,让我们在WebP上展示的图片体积可以有较大幅度的缩小,也就带来了加载性能的提升。(摘自 https://nova.moe/re-introduce-webp-server)

怎么做

那么如何优雅的在不替换图片地址的情况下,将图片转为webp格式然后输出呢?
这时候就可以使用webp-sh组织最新开源的webp_server_go了,它的大概原理就是:当我们请求一张图片的时候使用web代理工具转发到webp_server_go应用进行处理,处理完成之后返回webp格式的图片,并且会保留处理后的图片以供后面的访问。
目前大部分主流浏览器都已经支持了webp图片的显示,除了Safari,但是不必担心,webp_server_go会自动判断请求来源是否为Safari,如果是,那么会返回原图。

Docker部署webps

官方Github:https://github.com/webp-sh/webp_server_go
Docker Hub:https://hub.docker.com/u/webpsh

本篇博客直接运行docker run命令,运行时检查系统中是否存在镜像,如果没有镜像,则直接去Docker Hub上拉取;如果有镜像,则直接运行。

#安装webps
docker run \
-d \
--name webps \
-p 3333:3333 \
-v /root/.halo:/opt/pics \
-v /root/.halo/cache:/opt/exhaust \
--network halonginx \
--restart=always \
webpsh/webps

-d 后台允许容器并将容器ID打印到控制台
--name 容器的名称
-p 容器的端口映射到主机
-v 绑定容器的卷,可以简单理解为将宿主机的目录指定到容器中,冒号左边是宿主机的目录,冒号右边是容器中的目录
--network 容器的网络【与halo保持一致】

服务成功启动后,查看docker容器

docker ps
CONTAINER ID   IMAGE                                COMMAND                  CREATED          STATUS                 PORTS                                                                    NAMES
7b9c019b8a1e   webpsh/webps                         "/usr/bin/webp-serve…"   55 minutes ago   Up 10 minutes          0.0.0.0:3333->3333/tcp                                                   webps

进入webps容器

docker exec -it webps sh 

确认/etc/config.json配置文件

vi /etc/config.json
{
  "HOST": "0.0.0.0",
  "PORT": "3333",
  "QUALITY": "80",
  "IMG_PATH": "/opt/pics",
  "EXHAUST_PATH": "./exhaust",
  "ALLOWED_TYPES": ["webp","jpg","png","jpeg","bmp"],
  "ENABLE_AVIF": false
}
~

HOST 服务的主机名(IP),"0.0.0.0"表示所有,无特殊需求不需要修改
PORT 服务的端口号,默认即可,无特殊需求不需要修改
QUALITY 转换的的质量,默认80,根据实际需要修改
IMG_PATH 需要转换的文件存储目录,docker下默认存储到/opt/pics,无法修改,非docker请根据实际环境修改
EXHAUST_PATH 转换后的文件目录,docker下默认存储到/opt/pics,无法修改,非docker请根据实际环境修改
ALLOWED_TYPES 需要转换的文件格式
ENABLE_AVIF 是否开启转换成AVIF,默认关闭(false),暂不建议开启。

配置nginx代理

因为之前已经安装过nginx,直接修改default.conf,也预先准备好了二级域名,贴上nginx配置,具体配置参照上篇博客

server {
    listen      80;
    server_name findmyfun.xyz;
    #return 301  https://$host$request_uri;
    return 301 https://$server_name$request_uri;
}
server {
    listen       443 ssl;
    server_name  findmyfun.xyz;
    ...
    client_max_body_size 1024m;
    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;
           expires 7d;
    }
    location / {
           proxy_pass http://halo:8090;
           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;
    }
}

proxy_pass 设置代理服务器的协议和地址,以及位置应该映射到的URI。
proxy_set_header 允许重新定义或追加字段到传递给代理服务器的请求头。
proxy_hide_header 指定不会被传递的附加字段。默认情况下,nginx不会传递报头字段"Date"、"Server"、"X-Pad"和"X-Accel"从代理服务器到客户端的响应中。
expires 指定过期时间

结语

webps生效
查看上图中的Type列,图片的返回格式已经变成了webp,而且图片大小已经远远降低,那么说明你的配置已经成功了。have fun!

如果用的开心,请关注一下官方GitHub项目哦!另外,他们还有其他语言的版本,请查看 https://github.com/webp-sh。

参考文献

1、优雅的让 Halo 支持 webp 图片输出
2、使用Docker安装WebP Server
3、让你的网站图片以WEBP格式输出
4、让站点图片加载速度更快——引入 WebP Server 无缝转换图片为 WebP

1

评论区