Welcome, Old Sport!

使用SVG优化PNG文件大小

by ilikecss ON 2016/03/10 1115

使用SVG优化PNG文件大小如果你从事这个行业够久,大概10年前吧,刚开始使用各类PNG的素材,因为PNG比GIF具有更好的透明度,使用方便。遗憾的是当时PNG对低级别浏览器支持很低。码农通过各种尝试,终于可以利用javascript来克服各种PNG疑难杂症!

PNG很烂

PNG的文件大小一般是JPEG的4-5倍左右。下面有两张图片大家可以比较一下。

JPEG格式图片大小

JPEG图片140kb左右

PNG格式图片大小

PNG图片要超过300kb,而且随着图片尺寸的放大,差距会越来越大。

JPEG可以通过压缩导出不同质量来控制大小,而PNG因为你需要它的高品质透明度,只能通过最近的一些工具来进行压缩。

了解一下SVG

有两个方法我们可以参考:

  • SVG其实是一种文档格式(类似HTML的DOM), 请参考这个链接了解更多
  • SVG还支持滤镜,允许你创建一个alpha通道(透明 )

最终我们可以把以上两个功能结合使用真正的SVG!

认识一下ZorroSVG

非常幸运的是Mario Klingemann制作了这款SVG生成工具,只需选择一张PNG格式半透明的图片,然后会自动生成压缩80%大小的SVG格式图片给您!

目前还没有评论



TOP