iOS SDWebImage加载webp图片

占位图.jpg

恭喜RNG获得MSI冠军，我们是冠军~~~

webp介绍

当今互联网，无论网页还是APP，流量占用最大的，多数都是因为图片，越是良好的用户体验，对图片的依赖度越高。但是图片是一把双刃剑，带来了用户体验，吸引了用户注意，却影响了性能，因为网络请求时间会相对比较长。

图片分很多种，比较主流的就是：位图（BMP），jpg（JPEG，有损压缩格式），png（无损压缩格式）等，这三种，按照图片大小和清晰度来看，依次是：BMP > png > jpg。因为jpg是有损压缩格式，所以jpg图片相对最小。iOS普遍选择的是png来作为最优先选择的图片（苹果官方也是这样建议的）。

不过，有一种图片格式，在大小上比png小，图片质量上跟png差不多，就是WebP。

简单描述一下，WebP是google创造出的一种图片格式，图片的压缩和解码都由google提供的API完成（各种语言都有，不过目前好像没看到js可以解码WebP的），在无损压缩的情况下，比png要小28%左右。

现在已经被各大浏览器厂商兼容（如：Chrome，Firefox等），不过苹果的Safri还没有兼容这种格式，所以如果UIWebView里面含有WebP的图片的话，就会显示不出来（但是我们可以通过NSUrlProtocol来做处理）。如果要在APP中使用得话，我们需要引入SDWebImage这个第三方库。

开工

查资料，SDWebImage中可以处理webp图片，在工程中pod 'SDWebImage'，但是不知道什么原因，里面并没有UIImage+WebP.h，所以下面的三方库都是下载下来手动导入的。。。

• 在github下载SDWebImage

• 在github下载YYWebImage

• 在github下载FLAnimatedImage

• 将YYWebImage中的WebP.framework导入工程，将
  FLAnimatedImage中的FLAnimatedImage、FLAnimatedImageView添加到SDWebImage下的FLAnimatedImage文件夹下，最后将SDWebImage导入工程中。

  
  
  

  说明图1
  
  
  

  说明图2

• 在target->Build Settings中搜索Preprocessor Macros，添加"SD_WEBP=1"

  
  
  

  说明图3

• 在需要加载图片的地方添加SDWebImage的方法就可以了

[_iconImgView sd_setImageWithURL:[NSURL URLWithString:dataModel.icon] placeholderImage:nil];

最后

展示图

最近闲来无事，抓了JD的接口，仿写一下界面，webp就是接口返回的图片。