Time相册图册优化方案-缩略图压缩和webp自适应

新版本支持懒加载Time1.1.2版本 搭配云oss图片处理使用专题，请查看下边这个文章:

云图片处理:https://www.zuanmang.net/5374.html

Time主题:https://www.zuanmang.net/4953.html

随着time主题的发布，博主整理了一下目前网站图片的优化解决方案。提供参考。

这一篇详细介绍time如何极致优化图片大小，提升访问速度。包括图片压缩，缩略图优化，webp优化等。

优化前后对比:

• 优化前图片占用 8.0M 

• 优化后图片占用 1.6M   具体为 优化缩略图 和 转换webp格式

优化方案之-图片压缩篇

图片在使用前可通过下边的工具进行压缩，一般的图片都可以压缩到50%以上。并且图片质量损失极小。

• TinyPNG:https://tinypng.com/
• Tiomg:https://tiomg.org/compress-image

优化方案之-webp格式加持

荐使用又拍云 云储存 存放time图册，配合又拍云WebP 自适应方案，自动将图片转换成webp格式并分发。对当前还有一部分客户端并不支持 WebP 格式，可以通过 CDN 层去判断，对于支持的客户端，响应 WebP 格式的图片；不支持的客户端，响应原图。从而实现无缝适配。

看一下图就很好理解

• 钻芒图床-Lsky Pro-为博客站长提供稳定图片托管:https://www.zuanmang.net/2484.html
• lsky-pro图床项目：https://github.com/wisp-x/lsky-pro
• 钻芒图床三层分发：https://www.zuanmang.net/4868.html

lsky-pro图床可以添加又拍云USS（云储存）储存策略，上边三篇文章都是讲如何搭配图床使用的，当然你也可以直接在又拍云控制台上传图片。

如下图所示，是通过 Chrome 浏览器开发者工具抓包显示，可以通过查看响应头和请求头相关字段，得知该图片已经被 CDN 自动转化为 WebP 格式：

⊗ 说一下这个方案对ios是没有用的，因为Safari不支持webp格式，不过ios端会显示原图

优化方案之-缩略图优化

何为缩略图，字面意思就是 缩小省略图片 意思相同 的图片。
time首页封面就是缩略图，点击图片进入图片灯箱就是图片原图。如下图演示。点击

上边的你看见的就是缩略图，点击了就是原图，实际上是由两张图片组成。

回到正题，由于缩略图一般显示尺寸较小，没有高清显示的需求。我们可以适当地缩小缩略图和压缩。这样又可以节省一些带宽内存

如何实现？

不管你用的又拍云还是阿里云，甚至WordPress都可以调整处理图片大小。

原图:https://60yu.w4i.cn/2019/20190920-5d84e6d37f502.png

又拍云缩略图版本:https://60yu.w4i.cn/2019/20190920-5d84e6d37f502.png!upys

方法和又拍云基本一致。

访问处理后的图片:

        图片链接   分隔符   图片处理规则名称
https://60yu.w4i.cn/2019/img_4575.jpg–img

理清思路后，我们可以修改time模板中的index.php  调整首页缩略图图片路径。我的阿里云图片处理规则名称是ys，分隔符是- 所以在函数后加入-ys

这样我们用户访问首页的缩略图显示的是经过压缩和缩小的图片，减少图片占用提示页面加载速度，用户点击图片加载的才是原图。

至此，大功告成。尽情的网上冲浪吧！

相关链接:

• 又拍云:如何通过 WebP 自适应方案减少图片资源大小
• 又拍云:图片处理-快速入门
• 阿里云：快速使用 OSS 图片处理服务
• time主题：Time相册主题 for typecho模板

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=7x3d1ef6mcj3