Skip to content

阿里云oss、又拍云储存等储存桶图片处理介绍 –配合 Time时光相册使用

张洪Heo edited this page Oct 9, 2022 · 2 revisions

原作者为Time主题作者,原文章发布在这里

授人以鱼不如授人以渔,首先介绍一下众多厂商储存桶产品中的图片处理是什么。

简单意思就是用户上传一张图片,通过在图片外链链接上带入相应的图片处理规则,即可实现简单图片云处理。比如改变图片尺寸、格式、清晰度、添加文字或图片水印等等。

相关文档: (强烈建议先阅读一下)

又拍云图片处理:https://help.upyun.com/knowledge-base/image/

阿里云oss图片处理操作指南:https://help.aliyun.com/document_detail/44686.html

七牛云什么是样式以及样式分隔符:https://developer.qiniu.com/kodo/kb/1327/

详细功能大家可以去自己使用的云储存后台查看,基本上大同小异。

Time相册推荐大家使用阿里云、又拍云、腾讯云cos(数据万象)以及七牛云储存。

好了废话不多说,这里就仅针对Time相册使用优化来介绍。

image

以上提供两个图片处理优化选项,第一个是优化缩略图,第二个是优化点击图片弹窗的大图

一、优化缩略图

为什么要优化缩略图,当网站打开后首先要加载缩略图,缩略图太大就会影响网页速度。那么如何让这个缩略图内存变小,就是我们说到的缩略图优化。

看一下我的缩略图图片处理配置,我们新建一个图片处理规则,然后给这个规则设置让图片缩小,画质降低。这些都变小了,那么图片内存占用也就变小了。(缩略图显示位置较小,不需要那么高清的图片,浪费带宽)

image

设置完成后,我们根据阿里云oss后台设置 的图片处理分隔符,添加到后台即可。比如我的:

image

设置完成后我们前台输出的图片链接就是

图片url - ys 如 https://photo-a.zmki.cn/2019/20191121-006a650b6fff2.jpg-ys

image

原图和经过缩略图图片处理后的二者图片大小缩小了10倍,而这对我们前台输出展示的优化作用是很大的

二、优化图片版权水印

这一步和上边的一样的道理,只是把图片处理规则由图片变小变成了加水印。大家会发现时光相册每张图片都是带有版权水印的。但如果每张图上传前都用PS添加一张水印,那真的太繁琐了。

image

Time 后台设置

image

这样即可实现我们创建完一个图片格式后给需要加水印的图片带上这个格式就可以了。

总结:

展开图片水印可以不加,强烈建议优化缩略图,对访问体验影响很大!以下图片为同一张图片,使用不同格式图片处理后的效果

图片缩略图:https://photo-a.zmki.cn/2019/20191121-006a650b6fff2.jpg-ys

图片加水印:https://photo-a.zmki.cn/2019/20191121-006a650b6fff2.jpg-photo