使用WebP |
您所在的位置：网站首页 › 转换webp › 使用WebP |
使用WebP
|
TOC 0x00 快速入门WebP 介绍什么是 WebP? WebP是由Google推出的一种全新图片文件格式，也是Telegram Stickers 主力使用的文件格式，可为 Web 上的图像提供卓越的无损和有损压缩, 它是在保证原有的图像质量前提下尽可能减少图形体积的一种格式, 使用WebP网站管理员和 Web 开发人员可以创建更小、更丰富的图像，从而使 Web 加载性能的提升更快。 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.(与 PNG 相比，WebP 无损图像的大小要小 26%。在同等 SSIM 质量指数下，WebP 有损图像比可比较的 JPEG 图像小 25-34%) 通过是否对图片进行压缩，我们可以分为： 无压缩。不对图片数据进行压缩处理，能准确地呈现原图片。 BMP 格式就是其中之一。无损压缩。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。 png 是其中的代表。有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。 其中的代表是 jpg。简单来说，WebP 图片格式的存在，让我们在 WebP 上展示的图片体积可以有较大幅度的缩小，也就带来了加载性能的提升。 如何创建(转换)一个webp格式图片? 要生成一个 WebP 图片非常简单，只需要下载 Google 提供的 cwebp 工具，并且使用 cwebp -q 70 picture_with_alpha.png -o picture_with_alpha.webp 命令就可以转换了, 并且转换出来的 webp 图片比原图会小不少，但是这个是单张图片，我们的目的是让站点的图片可以无痛地以 WebP 格式输出，如果我们的博客上有 100+ 张图片转换该如何操作呢？如果是更多呢？ 需求背景 那么开发人员如何优雅的在不替换图片地址的情况下，将图片转为 webp 格式然后输出呢？ 答: 此时可以使用 webp-sh 组织最新开源的 webp_server_go 项目，其原理是当我们请求一张图片的时候使用 web 代理工具转发到 webp_server_go 应用进行处理，处理完成之后返回 webp 格式的图片，并且会保留处理后的图片以供后面的 Nginx Web访问。 Webp-Server 介绍Webp-Server 描述: WebP-Server工具，可将您的 JPG/PNG (有损压缩与无损压缩以及常用图片格式) 即时压缩为 WebP 格式，非常高效可以大幅度的减少图片体积，减少出口带宽，提高用户体验。目前支持的图片格式：JPEG、PNG、BMP、GIF（暂时为静态图片。 例如，使用Webp-Server并争取配置号Nginx代理后，当你访问 https://weiyigeek.top/1.jpg 时，它将作为 image/webp ，而不会更改 URL, 但对于 Safari 用户，将使用原始图像。  WeiyiGeek.VS WebP-Server 支持多开发语言 描述: 其实 webp server 有多种语言都实现了，并且这些仓库还都放在了 webp-sh 该 Organizations 下, 但是对于当下Go语言在编程开发语言中流行程度，官方也非常建议使用go开发的webp-server版本，并且其支持多个webp-server Feature。 Tips: WebP Server is under the GPLv3. webp_server_go - 主要更新仓库 当前版本 (WebP Server Go 0.4.5) webp_server_node - 最后更新 2020 年 7 月 6 日 webp_server_java - 最后更新 2020 年 3 月 6 日 webp_server_python - 最后更新时间 2020 年 3 月 2 日 温馨提示: 不同版本之间的比较参考地址https://docs.webp.sh/comparisons. Webp-server 的当前问题? Safari doesn’t support it. 不支持 Safari。Tons of Nginx and JavaScript works. 工作需要依赖于Nginx与JavaScript。It need a tool to transfer. 它需要一个工具来传输。mod_pagespeed is not easy to use. mod_pagespeed 不好用。学习参考 官网地址: https://webp.sh 文档说明: https://docs.webp.sh/ 项目地址: https://github.com/webp-sh/webp_server_go 下载地址: https://github.com/webp-sh/webp_server_go/releases/ WebP Cloud Services：https://webp.se/we 0x01 安装实践二进制安装部署描述: 此处采用 WebP 服务器的 Go 版本进行实践，此时我已经进行了Nginx的安装配置, 如没有你还安装配置安全的Nginx的读者可以浏览此篇入门文章【1.Nginx基础介绍与安装配置实践指南 - https://blog.weiyigeek.top/2019/9-1-121.html】进行学习。 快速部署 Step 1.获取 WebP server-Go 版本的二进制方式进行安装。 代码语言：javascript复制# 前置环境，您需要安装一些依赖项（AVIF 编码器需要它）： INSTALL_HOME=/opt/webps WEBP_HOST=127.0.0.1 WEBP_PORT=3333 WEBP_QUALITY=80 IMG_PATH=/usr/share/nginx/html EXHAUST_PATH=${INSTALL_HOME}/cache ## Ubuntu if [ -f /usr/bin/apt ];then apt install libaom-dev -y ln -s /usr/lib/x86_64-linux-gnu/libaom.so /usr/lib/x86_64-linux-gnu/libaom.so.3 fi # CentOS if [ -f /usr/bin/yum ];then yum install libaom-devel -y fi # 下载、可执行权限、软连接 mkdir -vp ${INSTALL_HOME}/cache wget --no-check-certificate https://github.com/webp-sh/webp_server_go/releases/download/0.4.5/webp-server-linux-amd64-80aa8cb63a85a986f83a88579e8d2b4b -O ${INSTALL_HOME}/webp-server chmod +x ${INSTALL_HOME}/webp-server ln -s ${INSTALL_HOME}/webp-server /usr/local/bin/webp-server # 配置文件 /usr/local/bin/webp-server -dump-config > ${INSTALL_HOME}/config.json sed -i -e "s#127.0.0.1#${WEBP_HOST}#" \ -e "s#3333#${WEBP_PORT}#" \ -e "s#80#${WEBP_QUALITY}#" \ -e "s#./pics#${IMG_PATH}#" \ -e "s#./exhaust#${EXHAUST_PATH}#" ${INSTALL_HOME}/config.json # 手动运行 webp-server 服务 (前台运行) ${INSTALL_HOME}/webp-server --config=${INSTALL_HOME}/config.json使用参数一览: 代码语言：javascript复制webp-server --help Usage of webp-server: -V Show version information. -config string /path/to/config.json. (Default: ./config.json) (default "config.json") -dump-config Print sample config.json -dump-systemd Print sample systemd service file. -jobs int Prefetch thread, default is all. (default 2) -prefetch Prefetch and convert image to webp -v Verbose, print out debug info. WeiyiGeek.Start webp-server 服务 温馨提示: webp-server 默认生成的config.json配置文件实例及其参数解释。 代码语言：javascript复制$ cat /opt/webps/config.json { "HOST": "127.0.0.1", "PORT": "3333", "QUALITY": "80", "IMG_PATH": "/usr/share/nginx/html", "EXHAUST_PATH": "/opt/webps/cache", "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"], "ENABLE_AVIF": false }HOST：一般不修改。PORT：webp_server_go 的运行端口。QUALITY：转换质量，默认为 80%。IMG_PATH：固定格式，可以为 /usr/share/nginx/html 目录路径 或者 Remote Backend 站点 "IMG_PATH": "https://test.webp.sh"EXHAUST_PATH：固定格式，/运行 Halo 的用户名/.halo/cacheALLOWED_TYPES：需要转换的格式温馨提示: 默认情况下"ENABLE_AVIF": false是禁用 AVIF 支持，因为将图像转换为 AVIF 会消耗 CPU。 温馨提示: 使用 prefetch 参数会将您的所有图像转换为 WebP, 如果要在预取时控制要使用的线程，请添加 -jobs=4, 默认情况下它将使用您所有的 CPU 内核。 代码语言：javascript复制# 本地 CPU 内核数 $ lscpu | grep "^CPU(s)" CPU(s): 2 # 指定 webp 预取时使用的内核数 /usr/local/bin/webp-server -prefetch -jobs=1 --config=${INSTALL_HOME}/config.json # INFO[2022-07-27 11:47:25][153:main.convertLog()] [email protected]%: /usr/local/app/weiyigeek/img/wechat-search.png->/opt/webps/cache/img/wechat-search.png.1647996506.webp 32641->12416 38.04% deflatedStep 2.当然也可使用systemd来管理webp服务，好在 webp 为我们提供标准的 systemd 服务文件, 可使用如下命令进行生成与配置。 代码语言：javascript复制/usr/local/bin/webp-server -dump-systemd > /lib/systemd/system/webp-server.service systemctl daemon-reload systemctl enable webp-server.service systemctl start webp-server.service温馨提示: 使用 -dump-systemd 参数生成的配置文件，其中默认的 webp-server 路径为 /opt/webps/webp-server，并且配置文件路径为 /opt/webps/config.json，如果你的安装路径不是上述安装路径请更改/lib/systemd/system/webp-server.service中对应路径。 代码语言：javascript复制$ cat /lib/systemd/system/webp-server.service [Unit] Description=WebP Server Go Documentation=https://github.com/webp-sh/webp_server_go After=nginx.target [Service] Type=simple StandardError=journal WorkingDirectory=/opt/webps ExecStart=/opt/webps/webp-server --config /opt/webps/config.json Restart=always RestartSec=3s [Install] WantedBy=multi-user.target扩展补充: 使用Supervisor托管启动。 代码语言：javascript复制[program:webpserver] command=/your/webservergo/path/webp-server-linux-amd64 --config=/your/webservergo/path/config.json directory=/your/webservergo/path autorestart=true startsecs=3 startretries=3 stdout_logfile=/your/log/path/webpserver.out.log stderr_logfile=/your/log/path/webpserver.err.log stdout_logfile_maxbytes=2MB stderr_logfile_maxbytes=2MB user=root priority=999 numprocs=1 process_name=%(program_name)s_%(process_num)02dStep 3.Nginx 配置示例只允许图像发送到 WebP Server Go，其他扩展应该只发送原始文件，让您的 Nginx 访问图片后端代理到 proxy_pass http://localhost:3333/，你的 webp-server 就可以运行了。 代码语言：javascript复制# static.conf # https - static.weiyigeek.top server { listen 80; listen 443 ssl http2; server_name static.weiyigeek.top; charset utf-8; access_log /var/log/nginx/static/static.log custom buffer=128k flush=3m; # CORS add_header Access-Control-Allow-Origin '*.weiyigeek.top'; add_header Access-Control-Allow-Methods 'GET,POST'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; # HSTS add_header Strict-Transport-Security "max-age=15768000;includeSubDomains;preload" always; # XXS-Protection add_header X-XSS-Protection "1; mode=block"; # ssl 证书 ssl_certificate /root/.acme.sh/weiyigeek.top_ecc/fullchain.cer; ssl_certificate_key /root/.acme.sh/weiyigeek.top_ecc/weiyigeek.top.key; ssl_session_cache shared:MozSSL:10m; ssl_session_timeout 1d; ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE:ECDH:AES:HIGH:EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:!NULL:!aNULL:!eNULL:!EXPORT:!PSK:!ADH:!DH:!DES:!MD5:!RC4; ssl_prefer_server_ciphers on; # 访问规则 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 ^~ /wp-content/uploads/ { add_header Cache-Control 'private'; proxy_pass http://127.0.0.1:3333; } }检查并重载Nginx配置: 代码语言：javascript复制# 检查配置文件是否有问题 nginx -t # 重载 Nginx 配置 nginx -s reload温馨提示: 上述配置中我添加了Nginx安全方面的配置，如果你只是测试验证则可以取消上述ssl等安全配置。 Step 4.重载 nginx 后查看源站图片相应头与通过webp-server图片响应头的区别。 源站图片地址: https://www.weiyigeek.top/img/wechat-search.pngwebp格式图片地址: https://static.weiyigeek.top/img/wechat-search.png WeiyiGeek.webp-server images 温馨提示: WebP Server Go 将呈现以下标头etag和x-compression-rate作为响应, 前者格式为W/"-",而后者格式为 size(webp_image)/size(original_image) 如果超过1则返回原图。 Step 5.我们还可以在webp服务器中支持多路径，仅仅只需要一个创建链接符号 ,例如：ln -s /app/weiyigeek.gitee.io/img/ /usr/share/nginx/html/blog/，然后在分别访问如下验证区别。 源站图片地址: https://blog.weiyigeek.top/img/banner.jpgwebp格式图片地址: https://static.weiyigeek.top/blog/banner.jpg WeiyiGeek.webp-server banner 从上述两个对比结果中可以看到使用webp-server转换后的图片体积直线下降, 此处以banner.jpg图片文件为例，可以看到从原图98K下降到了17.57K。 代码语言：javascript复制# 原图大小 (98K) $ ls -alh banner.jpg -rw-r--r-- 1 ubuntu ubuntu 98K Apr 13 20:40 banner.jpg # Nginx Gzip 源站图片大小 80.57KB ~ (原图 98KB) 下载于：220 毫秒 # Webp 格式图片大小 17.57 KB ~ (18 kB) 下载于：187 毫秒 $ ls /opt/webps/cache/blog -rw-r--r-- 1 root root 18K Jul 27 14:33 banner.jpg.1649853609.webpDocker安装部署描述: 如果要运行 webp-server insider docker 容器，可以运行以下命令。 代码语言：javascript复制# Docker command docker run -d -p 3333:3333 -v /path/to/pics:/opt/pics --name webp-server webpsh/webp-server-go # docker-compose.yml tee docker-compose.yml |
【本文地址】