webp介绍

图片格式

1. 传统格式

• JPEG（有损压缩）
• PNG （无损压缩、透明通道）
• GIF （多帧动画）

1. 新兴格式

• APNG （Mozilla）
• WebP （Google）VP8 视频帧内编码
  支持有损和无损压缩、支持完整的透明通道、也支持多帧动画，并且没有版权问题
• BPG （Fabrice Bellard）HEVC (即 H.265) 帧内编码
  相对于WebP 来说，同等体积下 BPG 能提供更高的图像质量，目前阻碍它流行的原因就是 HEVC 的版权问题和它较长的编码解码时间

移动端图片类型的支持情况

Android 和 iOS 目前的图片编解码架构

静态图片的编码与解码库

1. JPEG

• libjpeg
• libjpeg-turbo
• MozJPEG
• AppleJPEG

1. PNG

• libpng
• pngcrush
• ImageOptim
• TinyPNG.com

1. WebP

• libwebp
  WebP 编码主要参数: lossless | quality | method WebP 解码参数:use_threads | bypass_filtering

动态图片的编码与解码

在解码动图时，解码器通常采用所谓"画布模式"进行渲染

1. GIF
2. APNG
3. libwebp
   WebP 动图实际上是把多个单帧 WebP 数据简单打包到一个文件内，而并不是由单帧 WebP 扩展而来

---

WebP 的优势

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一

1. 同等质量但是图片更小

sample.jpg (27.9KB)

sample.webp (12.4 KB)

1. 压缩之后质量无明显变化

sample.jpg (Q30% - 10.6KB)

sample.webp (Q30% - 7.1KB)

JPEG 格式的图片在质量较低时会有明显的缺陷，尤其是当图片包含微小的细节或文本时，但 WebP 格式则没有明显的缺陷，但也会在低质量设置时产生稍微模糊的图像

1. 完美支持无损图像（适用于icon）

WebP 同样支持一如 PNG 格式的无损模式，想要生成无损的 WebP 文件，只需将「quality」变量设置为 100

WebP的缺点

1.目前WEBP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍，虽然会增加额外的解码时间，但是由于减少了文件体积，缩短了加载的时间，实际上文件的渲染速度反而变快了

2.浏览器支持——WebP 目前支持桌面上的 Chrome 和 Opera 浏览器。手机支持仅限于原生的 Android 浏览器和 Android 系统上的 Chrome 浏览器

3.本地操作系统支持——WebP 目前不被任何操作系统原生支持。

---

WebP的应用

1. 浏览器场景

• JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片, 参考jQuery Plugin of Cloudinary
• 使用 WebP 支持插件：WebPJS

1. APP场景

• Android 4.0 以下 WebP 解析库（链接）
• iOS WebP 解析库（链接）

1. 后台场景（Webp转换）

1.谷歌webp开发者网站:the command line toolscwebp
and dwebp
for converting images to and from the WebP format, as well as tools for viewing, muxing and animating WebP images.
2.谷歌开发的 PageSpeed 模块

---

Webp 在iOS中的应用

1. 本地采用webP图片

下载第三方库:$pod 'SDWebImage/WebP'
SDWebImage里面有个webP 框架,可以将webp-->NSData-->UIImage 变为可识别的图片直接给控件调用

Paste_Image.png

+ (UIImage *)sd_imageWithData:(NSData *)data {
    if (!data) {
        return nil;
    }
    
    UIImage *image;
    NSString *imageContentType = [NSData sd_contentTypeForImageData:data];
    if ([imageContentType isEqualToString:@"image/gif"]) {
        image = [UIImage sd_animatedGIFWithData:data];
    }
#ifdef SD_WEBP
    else if ([imageContentType isEqualToString:@"image/webp"])
    {
        image = [UIImage sd_imageWithWebPData:data];
    }
#endif
    else {
        image = [[UIImage alloc] initWithData:data];
        UIImageOrientation orientation = [self sd_imageOrientationFromImageData:data];
        if (orientation != UIImageOrientationUp) {
            image = [UIImage imageWithCGImage:image.CGImage
                                        scale:image.scale
                                  orientation:orientation];
        }
    }

    return image;
}

1. 在webView中使用webP

• JS 协作

A. 在网页加载出后截取到 HTML 及内部的 JS 后,调用 JS 预先准备好的方法获取需要转码的 webP 格式图片下载地址(其实一个一个的遍历也行).
B. 在App 本地开启线程下载图片,下载完成后,将图片转码由 webP—> png—>Base64
B1. 在App 本地开启线程下载图片,下载完成后,将图片转码由 webP—> png->file 生成自定义URL 例如：yxy://image/xxx.png
C. 将 Base64及原图片下载地址一一对应调用 JS 准备好的方法进行替换
C1. 将 自定义URL及原图片下载地址一一对应调用 JS 准备好的方法进行替换
D. 将下载后的图片进行缓存,并进行管理

• NSURLProtocol

NSURLProtocol是 iOS里面的URL Loading System的一部分

• 可以拦截UIWebView，基于系统的NSUIConnection或者NSUISession进行封装的网络请求。
• 忽略网络请求，直接返回自定义的Response
• 修改request（请求地址，认证信息等等）
• 返回数据拦截

- (void)startLoading
{
    // 标示改request已经处理过了，防止无限循环
    NSMutableURLRequest *mutableReqeust = [[self request] mutableCopy];
    
    if ([[mutableReqeust.URL.absoluteString lowercaseString] hasPrefix:YXYOpenConnectBaseUrl] ||
        [[mutableReqeust.URL.absoluteString lowercaseString] hasPrefix:YXYOpenConnectDevBaseUrl]) {
        mutableReqeust = [NSURLProtocolCustom changeRequset:mutableReqeust];
    }
    
    [NSURLProtocol setProperty:@YES forKey:YXYURLProtocolHandledKey inRequest:mutableReqeust];
    
    if ([mutableReqeust.URL.scheme caseInsensitiveCompare:@"yxy"] == NSOrderedSame) {
        // 处理图片
        NSString *tempPath = NSTemporaryDirectory();
        NSString *imageTempPath = [NSString stringWithFormat:@"%@%@", tempPath, self.request.URL.host];
        NSData *data = [NSData dataWithContentsOfFile:imageTempPath];
        NSUInteger length = [data length];
        NSHTTPURLResponse *response = [[NSHTTPURLResponse alloc] initWithURL:[self request].URL statusCode:200 HTTPVersion:@"HTTP/1.1" headerFields:@{@"Access-Control-Allow-Origin" : @"*", @"Content-Type" : @"image/png", @"Content-Length" : [NSString stringWithFormat:@"%lu", (unsigned long)length]}];
        
        [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
        [[self client] URLProtocol:self didLoadData:data];
        [[self client] URLProtocolDidFinishLoading:self];
    } else {
        if ([NSURLProtocolCustom isOssImageUrl:mutableReqeust]) {
            NSString *urlString = [mutableReqeust.URL absoluteString];
            NSURL *url = [NSURL URLWithString:[urlString stringByAppendingString:@"@1o.webp"]];
            @weakify(self);
            [[SDWebImageManager sharedManager] downloadImageWithURL:url options:SDWebImageLowPriority|SDWebImageRetryFailed progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
                @strongify(self);
                if (!error) {
                    if (image) {
                        NSData *jpgData = UIImageJPEGRepresentation(image, 1.0f);
                        NSUInteger length = [jpgData length];
                        NSHTTPURLResponse *response = [[NSHTTPURLResponse alloc] initWithURL:mutableReqeust.URL statusCode:200 HTTPVersion:@"HTTP/1.1" headerFields:@{@"Content-Type" : @"image/jpg", @"Content-Length" : [NSString stringWithFormat:@"%lu", (unsigned long)length]}];
                        [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
                        [[self client] URLProtocol:self didLoadData:jpgData];
                        [[self client] URLProtocolDidFinishLoading:self];
                    }
                } else {
                    [self.client URLProtocol:self didFailWithError:error];
                }
            }];
        } else {
            // 处理第三方统一接入
            self.connection = [NSURLConnection connectionWithRequest:mutableReqeust delegate:self];
        }
    }
}

---