What is WebP?

WebP, is a kind of image file format that provides lossless compression and lossless compression at the same time, is Google’s new image technology, it can make the web map file effectively compressed, and does not affect the compatibility of picture format and actual clarity, so that the overall web download speed up.

  • WebP lossless compression images can be 26% smaller than PNG images of the same size;
  • WebP lossy compressed images can be 25-34% smaller than a JPEG of the same size;
  • WebP supports lossless transparent layer channels at the cost of a 22% increase in byte storage;
  • WebP lossy transparent images can be 3 times smaller than PNG images of the same size.

Advantages of WebP versus GIF:

  • Supports lossy and lossless compression, and can combine lossy and lossless picture frames
  • Smaller in size, converting GIF to lossy WebP reduces volume by 64% and converting lossless WebP by 19%
  • More colorful colors, support 24-bit RGB colors and 8-bit Alpha transparent channel (GIF only supports 8-bit RGB colors and 1-bit transparency)
  • Add key frames, metadata and other data

Disadvantages of WebP compared to GIF:

  • More CPU consumption and decoding time (1.5~2.2 times more)
  • UIWebView cannot load (NSUrlProtocol is needed to handle this)
  • Long compression time, about 8 times that of PNG (but usually in the server side compression, the client side decoding, so the server side can do a pre-compression)

SDImageWebPCoder link YYImage link

SDImageWebPCoder load WebP:

#import <SDWebImageWebPCoder/UIImage+WebP.h>

    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"bigGif" ofType:@"webp"];
    NSData *data = [NSData dataWithContentsOfFile:imagePath];
    self.redImgView.image = [UIImage sd_imageWithWebPData:data];
Copy the code

YYImage load WebP:

#import "YYImage.h"

    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"bigGif" ofType:@"webp"];
    NSData *data = [NSData dataWithContentsOfFile:imagePath];
    self.redImgView.image = [YYImage imageWithData:data];
Copy the code

SDImageWebPCoder resolves WebP

YYImage parsing WebP principle:

YYImage parsing source code. PNG

SDImageWebPCoder summary:

  • Rendering takes a long time to parse (for 13M WebP frames, it takes 28s to parse) – when parsing, it will occupy a high CPU and memory (note that parsing is put into child threads).
  • After parsing is complete, CPU and memory are freed
  • Reduce cache memory by CoreGraphics rendering (13M WebP, only 2M cached in memory)

YYImage summary:

  • Each frame is displayed immediately after it is parsed. If the render time of each frame > the playback time of each frame, it will stall
  • It occupies CPU and memory for a long time and needs to be released manually (because every frame will be constantly parsed when WebP GIF is playing).
  • Faster parsing time (frame by frame parsing)

// Based on the advantages of SDImageWebPCoder and YYImage parsing speed, the loading scheme is summarized as follows:

  1. //SDImageWebPCoder decodes WebP in child thread
  2. // Load WebP with YYImage before SDImageWebPCoder decodes successfully
  3. // After SDImageWebPCoder decodes successfully, cache to memory, directly use the UIImage resolved by SDImageWebPCoder