原作者为Time主题作者,原文章发布在钻芒zmki,但是网站由于作者经营不善已经倒闭转让,使用教程可能不全,在此感谢张洪zhheo提供的转载文章。
查看效果
优化前后对比: 优化前图片占用 8.0M
优化后图片占用 1.6M 具体为 优化缩略图 和 转换webp格式
优化方案之-图片压缩篇
图片在使用前可通过下边的工具进行压缩,一般的图片都可以压缩到50%以上。并且图片质量损失极小。
TinyPNG:立即前往 Tiomg:立即前往
优化方案之-webp格式加持
首先介绍一下webp
WebP,是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。
荐使用又拍云 云储存 存放time图册,配合又拍云WebP 自适应方案,自动将图片转换成webp格式并分发。对当前还有一部分客户端并不支持 WebP 格式,可以通过 CDN 层去判断,对于支持的客户端,响应 WebP 格式的图片;不支持的客户端,响应原图。从而实现无缝适配。
看一下图就很好理解
使用前推荐搭配图床使用,可参考博主之前自建图床的文章(鉴于链接已经全部失效,就不放出来了)
lsky-pro图床可以添加又拍云USS(云储存)储存策略,当然你也可以直接在又拍云控制台上传图片。
开启又拍云webp自适应
回归正题,如何开启又拍云webp自适应。在又拍云控制台-云储存-成本控制-开启webp自适应即可(如果有又拍云cdn开启方法同)
测试是否成功
如下图所示,是通过 Chrome 浏览器开发者工具抓包显示,可以通过查看响应头和请求头相关字段,得知该图片已经被 CDN 自动转化为 WebP 格式:
优化方案之-缩略图优化
方案介绍
何为缩略图,字面意思就是 缩小省略图片 意思相同 的图片。
time首页封面就是缩略图,点击图片进入图片灯箱就是图片原图。
回到正题,由于缩略图一般显示尺寸较小,没有高清显示的需求。我们可以适当地缩小缩略图和压缩。这样又可以节省一些带宽内存
如何实现?
不管你用的又拍云还是阿里云,甚至WordPress都可以调整处理图片大小。
又拍云 云储存 图片处理:
原图:https://www.xxx.xxx/uploads/2/5d84e6d37f502.png
又拍云缩略图版本:https://www.xxx.xxx/uploads/2/5d84e6d37f502.png!up
方法和又拍云基本一致。
访问处理后的图片:
图片链接 分隔符 图片处理规则名称
理清思路后,我们可以修改time模板中的index.php 调整首页缩略图图片路径。我的阿里云图片处理规则名称是ys,分隔符是- 所以在函数后加入-ys
这样我们用户访问首页的缩略图显示的是经过压缩和缩小的图片,减少图片占用提示页面加载速度,用户点击图片加载的才是原图。
至此,大功告成。尽情的网上冲浪吧!
评论 | NOTHING