10.2【前端开发】图片文件格式：常见的图片格式对比有何优劣以及如何使用Google的webp格式？

1、JPEG:

①支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小;

②有损压缩会使图像数据质量下降,

③JPG不适合具有大块颜色相近的区域或亮度，适合差异十分明显的较简单的图片，

④JPG在存储摄影或写实图像一般能达到最佳的压缩效果，比如网站的背景图，轮播图，用户头像等

2、PNG的优缺点

①能在保证最不失真的情况下尽可能压缩图像文件的大小。

②PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位。

③对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，PNG8可以用来做小图标(icons) ,按钮，背景等。

3、 GIF图片

是一种无损压缩的格式，GIF格式可以用来做动画

总结一下，对于色彩与图像内容比较丰富，变化比较多端的，适合使用jpg，例如大型背景、头像、人物照片等。对于颜色单一，有大色块的图像，例如图标等，适合用png，压缩效率高，并且有透明。小动画可以使用gif，便不适合使用复杂的视频。

Google webp格式图片

网络中图片是占用流量较大的一部分，如何在保证图片视觉不失真前提下缩小体积，对于节省带宽和电池电量十分重要，特别在移动设备上。

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的优势。

• 同时支持有损压缩和无损压缩，并且压缩效率都比传统的jpg与png要好。WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP在相同的SSIM（Structural Similarity Index，结构相似性）下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。
• 支持动画，并且比gif有更丰富的彩色。谷歌于2014年提出了动态WebP，拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。

（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。

如何将图片转为webp格式？

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 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。