长文｜移动互联网时代，给你的图片减减肥吧

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

一个小的背景

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

消减尺寸

我们需要一个支持透明 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 imgView = [[WebPImageView alloc] initWithFrame:CGRectMake(0, 30, 300, 300)];
[self.view addSubview:imgView];
imgView.url = [NSURL URLWithString:@” https://yourUrl/imageName@3x.webp “];
// Add the loading View.
WebPLoadingView loadingView = [[WebPLoadingView alloc] init];
loadingView.lineColor = [UIColor orangeColor];
loadingView.lineWidth = 8;
// Add the loading view to the imageView.
imgView.loadingView = loadingView;
// If you want to add some inset on the image.
CGFloat pad = 20;
imgView.loadingInset = UIEdgeInsetsMake(pad, pad, pad 2, pad 2);

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

结论

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

• 原文标题 : Shaving Our Image Size
• 原文作者 : DALTON CHERRY
• 译文出自 : 掘金翻译计划
• 译者 : circlelove
• 校对者: rockzhai ， ldhlfzysys