图片优化管理系统 tiny-site

MIT
Google Go
跨平台
2018-10-01
粘土帽子

tiny-您的图片实时优化专家

现今的各类应用中,图片的使用越来越多,而且移动设备的各类高清屏,图片质量的要求也越来越高,在网站上图片类的使用带宽已基本达到60%,如果能减少图片的带宽占用,能更好的提升用户体验以及节约成本。

随着接入终端的种类繁多,以往一张图片所有终端使用的暴力做法已跟不上潮流,我更倾向于不同的终端选择更适合的图片(尺寸、质量甚至于更优的图片格式),Tiny主要用于对图片做压缩或尺寸调整以及格式转换,以及图片区域剪辑,更简单的方式适配更多的场景。下面是我日常是遇到比较多的场景:

  • 图片自适应等比缩放

  • 超长宣传banner,高度固定从中间截取图片展示

  • 针对不同的终端使用不同的图片格式、图片质量

以往为了适应这些场景,基本都是生成了几种尺寸的图片,终端在使用时根据需要选择,此种方式需要预生成图片,也很难覆盖所有终端。大部分场景都是图片达不到要求或者使用了较大分辨率的图片浪费带宽。而我更希望的是:

  • 在终端中实时根据显示区域,自定义图片的尺寸

  • 根据当前网络接入类型,选择不同的图片质量

  • 根据各终端对图片格式的支持,选择更优的图片格式(如webp)

  • 图片的各参数可以随意调整,实时生成,性能也不能太差

为了能更好适应上述的场景,希望得到的就是一个能自定义高度、宽度、图片质量、图片格式以及可以自定义剪辑图片区域的工具,实时生成但不可性能太差的图片服务。

tiny数据压缩

tiny是使用golang编写的数据压缩与图片转换工具,提供HTTPGRPC的调用方式。对于文本内容,支持gzipbr两种压缩格式。对于图片,支持pngjpeg(guetzli)以及webp三种格式转换。一般不建议使用HTTP的服务,HTTP服务仅用于平时测试使用,GRPC的性能更好一些。

对于gzip与br两种文本压缩,我主要用于网站静态文件的打包,对于静态文件生成.js.gzip以及.js.br两份文件,在nginx中根据Accept-Encoding来添加后缀指定使用相应的压缩格式。过程虽然有点绕,不过只要配置好构建脚本,后续的所有工作也都不需要再做额度的工作,总体来说也不算太麻烦(也可以把nginx中的br的压缩模块编译进去,直接使用)。

相对于文本压缩,图片的选择就更多了,不同的格式,不同的尺寸,是否做区域剪辑,各类场景的组合,相比于文本的预生成,图片大部分都是需要使用实时生成的形式。在这要先提一下guetzli这种图片处理,它生成的jpeg文件更小但需要的时间很长,如果需要使用它建议还是做预处理的方式。

根据我自己的日常使用,在图格式与质量的选择,按以下两种情况:

  • 有透明度的图片(如图标),优先使用webp(0),再使用png(90)

  • 广告类等色彩鲜明的图片,对于质量要求不是太高的场景,可以优先使用webp(70)

webp的质量选择0是表示Lossless,图片质量按实际需要自己调整则可。相关代码在tinypng的处理直接使用了pngquant,而guetzli则是guetzli

tiny-site图片管理后台

tiny提供的图片转换服务只是针对开发者,完全是无法满足现实中的需要,必须的搭配它的好伙伴tiny-site才是咖啡与伴侣,它主要提三个功能:

图片上传管理

用户在上传原图之后,选择分类(或自定义一个新类别),选择上传图片类型。缓存时间为HTTP头的Cache-Control: max-age,图片都是可长期缓存的,建议配置一年,在配置完成之后,点击保存则将图片保存至数据库,可在列表中查找自己上传的图片。

HTTP的图片服务

在上传图片之后,可以在图片列表中选择所上传的图片,有三个功能可选择:

  • 图片预览,查看上传的图片

  • 图片剪辑,按一半宽度、一半高度居中截取图片,生成图片地址并复制至粘贴板

  • 图片预览,按质量选择为90,生成图片地址并复制至粘贴板

下面看看复制的两组图片地址:

  • /center/01CQPFKV5WYG8VD4QTVN5PYYJW-90-480-300.jpeg

  • /v1/01CQPFKV5WYG8VD4QTVN5PYYJW-90-0-0.jpeg

其中center表示居中剪切,总共支持三种:centerlttc,其中lt表示从左上角开始剪辑,tc表示中顶部中间开始剪辑。而后面文件名部分则由如下参数组合,文件ID-图片质量-图片宽度-图片高度.图片类型,参数如下:

  • 文件ID,是在上传图片时生成的唯一ID

  • 图片质量,根据需要选择合适的值,需要注意的是,对于webp,设置0为无损,一般用于图标

  • 图片宽度,根据需求选择合适的宽度,0为原始宽度

  • 图片高度,根据需求选择合适的高度,0为原始高度

  • 图片类型,根据终端支持的图片格式选择,可选为webp,png,jpeg

在我实际使用过程中,图片质量一般是根据终端的当前网络类型选择,非wifi一般使用60,wifi环境下则是80-90。宽度与高度则根据显示区域匹配,尽可能不做1px的拉伸缩小处理。图片类型就根据终端支持的图片格式选择则好,建议优先选择webp。

基于Token认证的文件上传

在实际使用中,有部分文件上传是程序自动处理,如果这部分还需要登录认证则比较麻烦,因此需要一个基于token校验的内部接口:

curl -XPOST -d '{
  "token": "内部token,不可泄露",
  "category": "此文件的分类",
  "fileType": "文件类型",
  "maxAge": "文件max-age",
  "data": "base64后的图片数据"
}' 'http://tiny.aslant.site/api/files/v1/token'

结语

经过调整后,CDN中图片类的流量减少了20%左右,虽然CDN的文件存储增长了10倍(因为不同分辨率,支持不同格式的终端不一),总体来说还是费用减少了好多,性能也有所提升。 我自建了一个测试环境,大家可以随便试用,如果有疑问可以直接在github上提问,感恩不言谢~ 测试地址:http://tiny.aslant.site/#/

的码云指数为
超过 的项目
加载中

评论(3)

永久封禁用户
永久封禁用户
Go写的?先收藏,回头学习学习。
粘土帽子
粘土帽子
tiny主要是用于动态实时指定图片的压缩、转换,应用场景是在终端中(手机、PC等浏览器,APP),根据显示区域、支持格式动态获取相应的图片
绝望生鱼片
绝望生鱼片
跟tinypng.com有什么关系吗?

暂无资讯

暂无问答

Any soldes moncler location you

moncler doudoune

2015/11/13 14:23
2
0
openstack kilo版本,创建实例( nova boot )时,出现500错误

现象:环境centos7 openstack版本kilo nova boot --flavor m1.tiny --image cirros-0.3.4-x86_64 --nic net-id=f309e2cc-05cb-465d-baf4-6b3b446617e9 \ --security-group default --key-na...

2016/08/18 14:37
196
1
20 jQuery Scrollbar plugin with examples

In this Article we are providing best jQuery scrollbar plugin with examples.Due to increasing popularity of custom scrollbar we are providing a list of lightweight ,stylish,flex...

2014/01/23 15:02
212
0
Tiny模板语言(VelocityPlus)初步入门

Tiny模板引擎是悠然编写的用于取代Velocity模板引擎的优先模板语言,今天主要介绍它是怎么样的一种语言及常用语法介绍。

2015/09/07 13:20
4.5K
8
Tiny1.2.0预览版全面开源

感谢 感谢OSChina为我们提供了这么好的共享与交流平台。 感谢红薯及OSChina管理团队所有打过没打过交道同仁对Tiny一直以来的支持与帮助。 感谢所有鼓励和批评我的同学们,鼓励者为我们添加勇...

2014/11/28 09:17
3.8K
9
构建Tiny生态圈

生态圈 生态圈又称商业生态圈,指商业活动的各利益相关者通过共同建立一个价值平台。各个角色关注其所在的价值平台的整体特性,通过平台撬动其它参与者的能力,使这一系统能够创造价值,并从...

2013/10/05 09:56
299
0
Tiny有毒

呵呵,想比较通俗的介绍一下Tiny,居然没有办法下手,想了半天想不好一个标题,不知如何,忽然冒出个“Tiny有毒”来,结果越体会,越觉得这个题目不错,于是乎就它了。 学习Tiny的三个层次 ...

2014/12/08 10:22
2.4K
5
Tiny快速入门之服务开发

周五发了Tiny框架即将全面开源一文,有不少同学给了不少有意义的意见和建议,其中一条就是感觉太虚了,期望来点实的,因此本文将从实打实的快速开发方面讲起,来说明一下用Tiny框架开发一些业...

2014/11/23 10:38
6.4K
10
TINY框架FAQ汇集

问题:Tiny的贡献者有哪些? 创建及主要设计者:悠悠然然 主要参与人员:Atizose,ballackhui,nishihe,达达 其它贡献人员:dandy 问题:要学习Tiny框架要有什么前提条件? 必备条件: 首先会...

2014/03/10 08:34
1K
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部