又拍云USS图片处理大小优化webp自适应及缩略图压缩-钻芒博客

由于国内服务器带宽一般都比较小，所以越来越多的站长选择把图片单独存储在云储存里，目前提供云储存的有很多，比例阿里云oss、七牛融合云、又拍云USS、腾讯云对象存储等。这里又拍云可以直接开始WEBP图片自适应，这一点也是站长非常喜欢的。所以今天我们来了解一下云存储 USS图片处理大小优化webp自适应及缩略图压缩解决方案。本文参加又拍云原创技术征文活动

图片在整个网页带宽占比中一般都是比较大的。我们使用单独存放在其他储存库里或CDN形式可以有效的提升网页加载速度。

但是图片加载带宽解决了，部分图片过大对用户和站长都是不太友好的。下面我们来介绍利用又拍云UOS图片处理来实现图片大小优化进阶操作。

云存储 USS介绍

又拍云存储（ UPYUN Storage Service，简称 USS），是面向非结构化数据的对象存储服务，具有使用简单、高稳定、高安全等特点，满足大数据、人工智能、物联网背景下的数据传输、处理、存储、分发与容灾需求。

优化前后对比:

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

优化方案之-图片压缩篇

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

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

优化方案之-webp格式加持

首先介绍一下wenbp
WebP，是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％的文件大小。

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

看一下图就很好理解

回归正题，如何开启又拍云webp自适应。在又拍云控制台-云储存-成本控制-开启webp自适应即可（如果有又拍云cdn开启方法同）

测试是否成功

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

优化方案之-缩略图优化

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

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

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

如何实现？

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

又拍云云储存图片处理:

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

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

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

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

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

版权声明 1 本网站名称：钻芒博客
2 本站永久网址：www.zuanmang.net
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END