Update 2020/12/22

推荐一个项目—— WebP Server-Go。

直接让图片的路径反代到该服务上面，就可以在保持图片的URL地址不变的情况下，将图片的格式转换为webp，达到图片体积减少的效果。

在图片转换后会自动缓存到指定的目录中。

具体配置看文档即可。

因

一个博客要美哒哒，肯定要漂亮的图片。

在此之前，本博客的来源图片主要是来自 凌一的API。

但是API里面提供的图实在是太大了，1-2MB，甚至高达6MB。

这就导致了移动端或者一些网络环境不佳的地方，加载图片非常之久。

在 Google Chrome 里面，使用Fast 3G来模拟网络环境不佳的情景，图片加载的平均时间基本去到了35秒。

这怎么能忍？

最终效果

先说说最后的效果 =。=

在 Google Chrome 里面，使用Fast 3G来模拟网络环境不佳的情景，图片的平均加载时间在5s左右。

但是在API请求这块，从http1.1升级到http2似乎并没有太大的提升，可能是因为返回的内容实在是太少了。

从35s到5s，四舍五入，相当于节约了85%的时间。

极大提高了用户的体验。

当然也直接放弃了safari用户。

解决方案

解决的核心是 使用 Google 推荐的图片格式 —— webp。

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

Source: https://developers.google.com/speed/webp

WebP是一种支持有损压缩和无损压缩的图片文件格式，根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。

Source: https://aotu.io/notes/2016/06/23/explore-something-of-webp/index.html

转换

在转换这块，使用的是Google官方提供的cwebp。

具体的安装以及使用，请参考官方的教程。

没有什么比官方的教程详细了。

图片的存放

本人将处理好的webp图片放到GitHub的Repo中，并通过 jsDelivr 进行调用。

进而实现图片的全球CDN以及H2加载图片。

API

为了方便自己的站点调用图片，本人便参考了 凌一API 写出了适合自己的API。

 1const express = require("express");
 2const app = express();
 3const port = 3000;
 4
 5const getRandomNumber = (min, max) => {
 6  return Math.floor(Math.random() * (max - min + 1)) + min;
 7};
 8
 9app.get("/img", (req, res) => {
10    res.redirect(`https://cdn.jsdelivr.net/gh/zsnmwy/APIIMG/miku/${getRandomNumber(1,109)}.webp`);
11});
12
13app.listen(port, () => {
14  console.log(`image api listening at http://localhost:${port}`);
15});
16

通过配置Caddy的反向代理，就可以将服务对外开放。

现在API已经可用——https://zsnmwy.net/img

欢迎大家合理调用，目前只有miku的图片。