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

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

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

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

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

Time相册推荐大家使用阿里云、又拍云、以及七牛云储存。腾讯云cos好像不带图片处理功能,这里就不推荐。

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

%title插图%num

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

一、优化缩略图

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

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

%title插图%num

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

%title插图%num

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

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

%title插图%num

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

二、优化图片版权水印

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

%title插图%num

Time 后台设置

%title插图%num

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

总结:

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

%title插图%num

文章最后更新于 2020-02-27

给TA买糖
共{{data.count}}人
人已赞赏
WordPress优化其他分享前端文档笔记

css修改浏览器内的页面滚动条样式

2020-2-11 20:42:14

其他分享文档笔记运维

织梦dedeCMS安装导入恢复方法

2020-3-9 19:49:22

2 条回复 A文章作者 M管理员
  1. 我用的阿里的oss,请问照着做了之后为什么缩略图一直转圈圈,点开大图可以显示

    • 转圈就是没加载成功,检查oss配置和链接