怎样帮应用图片瘦身？这个方法很管用

雷锋网按：本文由掘金翻译计划译者circlelove译自《Shaving Our Image Size》校对者：rockzhai，ldhlfzysys。本文首发稀土掘金，未经允许，禁止转载。

图片是我们给用户展示产品的利器。老话说的好，「一图胜千言！」图像往往能表达出语言所不能及的含义。当然，由于移动设备带宽和资源限制，图片也带来了一系列突出的技术挑战。

我们在DSC上面临的技术挑战就是产品图像对于透明alpha通道的需求。我们已经在app上采用了美丽的仿木背景，此外还需要采用带有透明alpha通道的格式。最常见的iOS系统图片格式是PNG格式。PNG格式看上去很不错，加载也快，支持原生iOS。

一个主要的缺点是，我们的高保真度的产品图片尺寸都很大。许多这些产品图片是几兆字节的大小，而我们的应用程序有数百幅的图像。

我们为之开发了一个WebP视图控件为iOS应用来查看图片。 你可以在GitHub找到它。

一个小的背景

我们在提交APP到应用商店和在应用商店下载APP的时候都需要上传或下载这些大量的PNG格式的大图。这些显示的是不同的方案。一个需要我们在展示之前解压，另一个可能需要我们通过慢吞吞的网络去下载几百兆资源图片。 我们最终决定为我们第一个发行版选择压缩的方式。当然，这省下了大量带宽，却依然让这款APP安装后的大小高达230MB。 幸运的是，这个故事并没有结束，我们还能够减小图片的尺寸。

消减尺寸

我们需要一个支持透明alpha通道而且比PNG小的图片格式。偶然发现了Google的WebP。经过我们的测试显示WebP格式化的图片仅有原来PNG参考版本的十分之一大小，他们也同样支持透明alpha通道。这样就在下载和缓存新图片的时候省下来带宽和磁盘空间。其主要的不足在于WebP图片需要更长的解码，而iOS原生系统并不支持这种格式。我们感觉图片大小的减少值得花更长时间解码，于是致力于为iOS构建一个WebP图片查看器。

我们开始开发WebP的C程序源代码作为框架（其实更像是Swift框架）。之后利用WebP C API耦合在一个Object-C的类当中（一个Swift的版本是在工作中！）来创建一个叫做WebPImage的类。之后用WebPImage更像是在利用标准UIImage类。主要的不同在于WebPImage是解决缓慢异步解码WebP图片数据的。它同时支持所有原生iOS格式，像PNG和JPEG，还有一些非标准的，例如动态GIF和WebP图片数据，因为我们的app当中也有惊艳的动态图像。

之后我们创建了WebPImageView，也就是功能升级了的UIImageView。它提供远程缓存图片和下载解码进度条的URL。这样我们就可以用我们的WebPImageView替换所有的UIImageView，充分利用WebP格式的优势，进行“网络可用”的图片查看。

结论

截至文章写作时，我们可以将首次发行的app从230MB减小到仅有30MB，里面还包含了更多的图片。这样的结果使得利用WebP格式压缩了七倍以上的尺寸 。这需要我们复制和提交一些iOS已有的UI组件并创建PNG转换为WebP展开的进程，但是我们相信结果说明了我们努力的一切。我们可以为iOS用户提供良好的体验，既满足他们的数据计划，又尊重了他们的存储需求。Dollar Shave Club，减小图片来减小世界。