我的网站支持WebP啦[B君笔记][博客]

noscript{position: fixed}我的网站支持WebP啦图片加载webp创建时间：2021-12-07 17:53:28

WebP 是啥

WebP 是一种现代图像格式，可为网络上的图像提供卓越的无损和有损压缩。使用 WebP，网站管理员和 Web 开发人员可以创建更小、更丰富的图像，从而提高 Web 速度。

与 PNG 相比，WebP 无损图像的尺寸小 26%。WebP 有损图像比同等SSIM质量指数下的可比 JPEG 图像小 25-34%。

无损 WebP以仅22% 的额外字节为代价支持透明度（也称为 alpha 通道）。对于可以接受有损 RGB 压缩的情况，有损 WebP 还支持透明度，通常提供比 PNG 小 3 倍的文件大小。

记录 2021年12月7日
WebP支持情况 2021年12月7日

就以上图为例，如果你在chrome中打开。传输大小为 74.1 kB。而图片链接为 https://bjun.tech/?_x=file.out&idm=19727d9&extr=1475x765&f=jpg,webp

将链接的参数 f=jpg,webp 删除，改为 https://bjun.tech/?_x=file.out&idm=19727d9&extr=1475x765，此时传输大小为 131 kB

还是上图，将链接的参数 f=jpg,webp 改为 f=jpg 删除，改为 https://bjun.tech/?_x=file.out&idm=19727d9&extr=1475x765&f=jpg，
此时传输大小为 113 kB

格式	webp	jpg	png(原图格式)
大小	74.1Kb	113 kB	131 kB
节省	43%	18%	0

在大部分情况下，我们并不需要无损原图。而在通用性上和大小方面，jpg又是极具优势的，而在非Sarfir的其他新版本浏览器中，webp更是具有优势。

从上述几次图片格式获取，相信你也发现了这个f的意义，即指定图片返回格式。

如默认的 f=jpg,webp，其代表的意义是：在支持的情况下，优先选择最后的格式，以此类推。如不支持webp，则使用jpg格式返回。
而这么操作的原因，正如支持情况，Safari和旧版本浏览器并不支持webp。
所以这里在后端做了个回退处理，而判断的依据就是：

图片请求的头部信息中 accept 是否包含 image/webp，如果有就返回webp格式，否则返回jpg格式。

chrome 96.0.4664 中直接在地址栏输入图片链接，其请求头是包含 image/webp。
而在稍微早前的版本是没有的，刚刚好遇到，特此记录下。而页面上img标签图片请求的头则一直有。