底层图像处理之图像处理与压缩(一)

阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680

一、四种图片格式

JPEG

是一种广泛使用的有损压缩图像标准格式,它不支持透明和多帧动画,一般摄影的作品是JEPG格式的,通过控制压缩比,可以调整图片的大小

PNG

是一种无损压缩的图片格式,他支持完整的透明通道,从图片处理的领域来讲,JEPG只有RGB三个通道,而PNG有ARGB四个通道,因此PNG图片占用空间一般比较大,会无形的增加app的大小,在做app瘦身时一般都要对PNG图片进行梳理以减小其占用的体积

GIF

  • 是一种古老的图片的格式,诞生于1987年,随着初代互联网流行开来,他的特别是支持多帧动画,表情图,

Webp

google于2010年发布,支持有损和无损、支持完整的透明通道、也支持多帧动画,目前主流的APP都已经使用了Webp,淘宝,微信,即保证了图片的大小和质量。这种格式Android 4.0后开始支持​​​​​​​

二、推荐几种图片处理网站

无损压缩ImageOptin,在不牺牲图片质量的前提下,即减下来PNG图片占用的空间,又提高了图片的加载速度 https://imageoptim.com/api

有损压缩ImageAlpha,图片大小得到极大的缩小,如果需要使用的话,一定要ui设计师看能否使用 https://pngmini.com/

有损压缩 熊猫TinyPNG 比较知名的png压缩的工具,也需要ui设计师看能够使用不 https://tinypng.com/

PNG/JPEG 转化为 wepb :智图 :http://zhitu.isux.us/

三、squoosh在线无损图片压缩工具,JPG/webP/PNG/互转

在线图片压缩网站除了压缩图片大小之外,速度、方便性、保密性也是很有必要的,如果你经常需要压缩图片,那么今天分享的 squoosh 这款工具你一定要试试。它是谷歌 Chrome 实验室团队打造,界面易操作,实用性非常之高,不仅支持JPG图片压缩,还可以把图片转换成其它常用格式(如:PNG,GIF,BMP,PDF),压缩率也非常高。

底层图像处理之图像处理与压缩(一)_第1张图片

工具名称:squoosh
工具地址: https://squoosh.app/

功能特色
高效压缩:在线直接压缩,压缩率高,速度快;
数据保密性:不用直接上传图片,数据仅在本地不会被上传到服务器;
多格式转换:可将图片转换成其它格式(JPG, BMP, GIf, PNG, PDF 等)
调整选项:图像大小、压缩率、旋转、颜色等
使用教程

  1. 打开 squoosh 网站,你会看到如下界面,把要压缩的图像直接拖到网页界面里,或者点「select an image」方式选择图像。


    底层图像处理之图像处理与压缩(一)_第2张图片
  2. 把图片拖进去后,你就会看到设置界面:

左右面板:左右的面板都可以同时设置,通常左边用原图「Original image」,右边设置压缩率。

滑动按钮:拖动中间的按钮可以对比图调整后的图像效果。


底层图像处理之图像处理与压缩(一)_第3张图片
  1. 选择要压缩的格式,目前支持格式有:

OptiPNG
MozJPEG
WebP(谷歌开发的图片格式,压缩后极小,旧浏览器不兼容)
Browse PNG
Browser JPEG(可理解为PS的导出为web所有格式)
Browser BMP
Browser GIF
Browser TIFF
Browser JPEG 2000
Browser PDF


底层图像处理之图像处理与压缩(一)_第4张图片

注意:压缩GIF并不支持多帧动画的 GIF ,不要弄错哦,这也算是一个缺点吧。

  1. 点击右下角的蓝色按钮即可下载图片,秒下哦(因为数据在本地处理)

快速找到 Squoosh
网址很难记?请在设计导航的「设计工具」栏目就能快速找到这个squoosh压缩工具咯!


底层图像处理之图像处理与压缩(一)_第5张图片

通过对比PS 的导出 WEB 格式和 Browser JPEG,两者压缩率差不多,squoosh速度快,并且有个最大的优点就是支持 webP 格式。

这个在线图片压缩工具当然不只是为设计师,更方便于前端开发人员、程序员以及编辑等
参考 http://www.shejidaren.com/squoosh-tu-pai-ya-suo-gong-ju.html
https://blog.csdn.net/reglog/article/details/81384344
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680

你可能感兴趣的:(底层图像处理之图像处理与压缩(一))