登录
  • 人们都希望被别人需要 却往往事与愿违
  • 好的程序代码本身就是最好的文档@《代码大全》Steve McConnell

个人网站无缝切换图片到webp

建站运维 Benny小土豆 7182次浏览 2097字 9个评论
文章目录[显示]

咱都知道,webp是一种非常优秀的图片格式,相比较png/jpg,webp的图片体积要小,图像质量却基本没有什么下降。网站如果使用webp,那么自然也会减少图片文件的加载时间。

大部分发行版里都应该有个工具叫做cwebp,咱可以用cwebp转换下看下具体效果

~/Downloads/test cwebp yui.png -q 80 -o result.webp
# 省略若干提示信息
~/Downloads/test ls -lh
total 8160
-rw-r--r-- 1 benny staff 335K Mar 1 20:06 result.webp
-rw-r--r--@ 1 benny staff 3.7M May 2 2019 yui.png

新文件大概是原来的8%左右,是不是很优秀!

但是如果一个一个转……聪明的你可能想要写个脚本递归转换,然后还要相应的修改数据库什么的,这样可是有点麻烦呢。那么有没有什么直接的方式呢?这就好像是,开飞机没油了,只能找个机场落地加油,然后再起飞。能不能像下面这张图这样子??

个人网站无缝切换图片到webp

这种技术呢,叫做空中加油。你看,咱都不用落地就能加油。On-the-fly哦

那么我们的……答案当然是有的啦??那就是本文的重点,这个工具就是由Nova童鞋muzicocoa以及Benny小盆友一起鼓捣的webp_server_go啦!

不如先看看这里吧??

https://webp.sh/#/ 

放心,从caniuse的统计来看,主流浏览器都支持webp了,如果遇到Safari这样的奇葩,咱直接返回了原图

个人网站无缝切换图片到webp

使用方法

使用方法很简单哦,从这里下载binary(或者自己build也行,deb和rpm也会稍后提供),创建如下json配置文件

{
"HOST": "127.0.0.1",
"PORT": "3333",
"QUALITY": "80",
"IMG_PATH": "/path/to/pics",
"ALLOWED_TYPES": ["jpg","png","jpeg"]
}

每一个配置项都很容易懂懂吧!如果不需要监听公网,那HOST就写127,藏在nginx后面。ALLOWED_TYPES是转换的图片类型,实际上目前最多用的也就是jpg和png了,暂时还未添加对bmp对支持。

我用WordPress,那么IMG_PATH就可以写/var/www/html这种,不用写到wp-content/uploads哦。

然后

./webp-server -config /path/to/config.json

Ok! 你的3333端口已经被我接管了。接下来配置下nginx什么的,比如WordPress可以这么配置,在server段中哦

location ^~ /wp-content/uploads/ {
    proxy_pass http://127.0.0.1:3333;
}

然后就可以起飞啦!

哦对了,不用担心,一张图片只会被转换一次,除非原图片变了,才会重新转换。

?呃……就是个转换图片的东西……?
?‍♀️No, it's more than that.

持久运行

都知道,session和shell是绑定的,所以总不能一直开着终端吧?那么简单的话,我们可以用screen来解决这个问题

screen -S webp
./webp-server --config /path/to/config.json

甚至我们可以使用systemd

cp init/webps.service /lib/systemd/system/
systemctl daemon-reload
systemctl enable webps.service
systemctl start webps.service

预缓存功能

咱可能是有很多图片的,如果收到请求的时候去转换,那么其实会慢的,那怎么办!

./webp-server --prefetch,这样就会帮你预先转换图片哦!到时候请求来了直接返回,经济方便又实惠。

批量转换进行中

个人网站无缝切换图片到webp

臣妾无法转换php文件为webp呀?️

转换时,你的CPU处于被支配的痛苦中……

个人网站无缝切换图片到webp

使用效果图

个人网站无缝切换图片到webp

benchmark

用老婆照片做benchmark

179张,各式各样的壁纸

这个是原图

个人网站无缝切换图片到webp

这个是转换之后的大小,大概只有原来的13%

个人网站无缝切换图片到webp

1-4M

(感谢muzi提供的图片)

压缩比为9.3%

个人网站无缝切换图片到webp

4-32M

压缩比为6.7%

个人网站无缝切换图片到webp

500K-1M

14.68%

个人网站无缝切换图片到webp

500K

23.3%

个人网站无缝切换图片到webp

手机拍摄的人像

小部分是Pixel 3拍摄的,剩下是其他手机/相机拍摄的人像。

16%

个人网站无缝切换图片到webp

所以基本上,大概图片大小会变为原来的20%左右。

嗯哼?

欢迎star、fork!欢迎提出建议,功能优化等等,不过建议使用英文哦!

相关链接

开源地址: https://github.com/webp-sh/webp_server_go
官方网站:https://webp.sh/

快来戳章鱼猫

参考阅读

让站点图片加载速度更快——引入 WebP Server 无缝转换图片为 WebP ??‍♂️

WebP Server in Rust、记 Golang 下遇到的一回「毫无由头」的内存更改

 

 


文章版权归原作者所有丨本站默认采用CC-BY-NC-SA 4.0协议进行授权|
转载必须包含本声明,并以超链接形式注明原作者和本文原始地址:
https://dmesg.app/flying-webp.html
喜欢 (20)
分享:-)
关于作者:
If you have any further questions, feel free to contact me in English or Chinese.
发表我的评论(代码和日志请使用Pastebin或Gist)
取消评论

                     

去你妹的实名制!

  • 昵称 (必填)
  • 邮箱 (必填,不要邮件提醒可以随便写)
  • 网址 (选填)
(9)个小伙伴在吐槽
  1. docker魔人不搞docker怎么行
    sontjer2022-04-14 17:00 回复
  2. 大佬你这个TG BOT回复咋搞的(我是Typecho的
    滑稽站长2021-02-08 12:32 回复
    • https://github.com/tgbot-collection/wp-comments-tgbot 你需要找typecho的API接口,自己二次开发
      --本评论由Telegram Bot回复~❤️
      Benny小土豆2021-02-08 12:34 回复
  3. 其实可以也使用 ngx_pagespeed 这样的模块
    去你妹的实名制2020-03-03 10:25 回复
  4. 沙发(
    harp2020-03-01 21:18 回复
    • 沙发童鞋你好,你可以帮我把板凳找到吗?
      --本评论由Telegram Bot回复~❤️
      Benny小土豆2020-03-01 21:20 回复