1、JPEG:
①支持摄影图像或写实图像的高级压缩,并且可利用压缩比例控制图像文件大小;
②有损压缩会使图像数据质量下降,
③JPG不适合具有大块颜色相近的区域或亮度,适合差异十分明显的较简单的图片,
④JPG在存储摄影或写实图像一般能达到最佳的压缩效果,比如网站的背景图,轮播图,用户头像等
2、PNG的优缺点
①能在保证最不失真的情况下尽可能压缩图像文件的大小。
②PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位。
③对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,PNG8可以用来做小图标(icons) ,按钮,背景等。
3、 GIF图片
是一种无损压缩的格式,GIF格式可以用来做动画
总结一下,对于色彩与图像内容比较丰富,变化比较多端的,适合使用jpg,例如大型背景、头像、人物照片等。对于颜色单一,有大色块的图像,例如图标等,适合用png,压缩效率高,并且有透明。小动画可以使用gif,便不适合使用复杂的视频。
网络中图片是占用流量较大的一部分,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要,特别在移动设备上。
WebP(发音:weppy)是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。
WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的发送时间。2011年11月8日,Google开始让WebP支持无损压缩和透明色(alpha通道)的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。
离最初发布已经有10年时间了。支持无损压缩和alpha通道透明色,兼具png与jpg的优势。
(webp有什么特点与优势,这里可以是一个考点)
webp格式日渐势起,主流浏览器已经开始支持webp,互联网大厂像Facebook、 ebay,淘宝、腾讯、知乎等,都已经在不遗余力应用webp格式了。前端开发人员学习和使用webp格式,势必必行。
使用效果:
YouTube的视频缩略图采用WebP后,网页加载速度提升了10%;谷歌网上应用商店采用WebP后,每天可节省几TB的带宽,页面平均加载时间大约减少1/3;谷歌移动应用市场采用WebP图片格式后,每天节省了50TB的存储空间;2014年腾讯新闻客户端应用了WebP后,流量峰值带宽降低9GB,网络连接延时不变的前提下,平均图片延时和数据下载延时降低了100ms。
关于webp的压缩原理,比较复杂,可以阅读看这篇文章:https://zhuanlan.zhihu.com/p/23648251。
https://developers.google.com/speed/webp/download
Google提供了三家主流系统的工具:
Download for Windows | Download for Linux | Download for Mac OS X
包括编码、解码、查看工具。工具包并不大,只有几mb大小。
关于错误:
cwebp CoCreateInstance(MAKE_REFGUID(CLSID_WICImagingFactory), NULL, CLSCTX_INPROC_SERVER, MAKE_REFGUID(IID_IWICImagingFactory), (LPVOID*)&factory) failed 80040154 Couldn't access Windows Imaging Component (are you running Windows XP SP3 or newer?). Most formats not available.
windows7报了这个错误,解决方法去这个地址:
https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
下载no-wic结尾的软件包,仍然是三个平台都有的。
cwebp -- 将其它图片转为webp格式图片 (不包括GIF)
dwebp -- 将webp格式图片转为其它格式图片
gif2webp -- 将GIF转换为webp图片
vwebp -- webp图片浏览器
接下来看看这几个工具如何使用。
png转webp:
cwebp star.png -o star.webp
显示无损带alpha透明通道的压缩,达到527Bytes。
反向解码:
dwebp star.webp -o star2.png
“as PNG format by default”
默认输出就是png格式,所以无须指定格式。
将gif转为webp格式:
gif2webp ./timg.gif -o timg.webp
将一组图片转换为webp动图:
img2webp [file_level_options] [files] [per_frame_options...]
img2webp argument_file_name
查看文件信息:
webpinfo ./timg.webp
2020年9月25日
【关于作者】
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。