圖片格式
- 傳統格式
- JPEG（有損壓縮）
- PNG （無損壓縮、透明通道）
- GIF （多幀動畫）
- 新興格式
- APNG （Mozilla）
- WebP （Google）VP8 視頻幀內編碼
支持有損和無損壓縮、支持完整的透明通道、也支持多幀動畫，并且沒有版權問題 - BPG （Fabrice Bellard）HEVC (即 H.265) 幀內編碼
相對于WebP 來說，同等體積下 BPG 能提供更高的圖像質量，目前阻礙它流行的原因就是 HEVC 的版權問題和它較長的編碼解碼時間
移動端圖片類型的支持情況
Android 和 iOS 目前的圖片編解碼架構
靜態圖片的編碼與解碼庫
- JPEG
- libjpeg
- libjpeg-turbo
- MozJPEG
- AppleJPEG
- PNG
- WebP
-
libwebp
WebP 編碼主要參數: lossless | quality | method WebP 解碼參數:use_threads | bypass_filtering
動態圖片的編碼與解碼
在解碼動圖時，解碼器通常采用所謂"畫布模式"進行渲染
- GIF
- APNG
-
libwebp
WebP 動圖實際上是把多個單幀 WebP 數據簡單打包到一個文件內，而并不是由單幀 WebP 擴展而來
WebP 的優勢
WebP 的優勢體現在它具有更優的圖像數據壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質量；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都非常優秀、穩定和統一
- 同等質量但是圖片更小
sample.jpg (27.9KB)
sample.webp (12.4?KB)
- 壓縮之后質量無明顯變化
sample.jpg (Q30% - 10.6KB)
sample.webp (Q30% - 7.1KB)
JPEG 格式的圖片在質量較低時會有明顯的缺陷，尤其是當圖片包含微小的細節或文本時，但 WebP 格式則沒有明顯的缺陷，但也會在低質量設置時產生稍微模糊的圖像
- 完美支持無損圖像（適用于icon）
WebP 同樣支持一如 PNG 格式的無損模式，想要生成無損的 WebP 文件，只需將「quality」變量設置為 100
WebP的缺點
1.目前WEBP與JPG相比較，編碼速度慢
10倍，解碼速度慢1.5倍，雖然會增加額外的解碼時間，但是由于減少了文件體積，縮短了加載的時間，實際上文件的渲染速度反而變快了
2.瀏覽器支持——WebP 目前支持桌面上的 Chrome 和 Opera 瀏覽器。手機支持僅限于原生的 Android 瀏覽器和 Android 系統上的 Chrome 瀏覽器
3.本地操作系統支持——WebP 目前不被任何操作系統原生支持。
WebP的應用
- 瀏覽器場景
- JavaScript 能力檢測，對支持 WebP 的用戶輸出 WebP 圖片, 參考jQuery Plugin of Cloudinary
- 使用 WebP 支持插件：WebPJS
- APP場景
- 后臺場景（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中的應用
- 本地采用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;
}
- 在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];
}
}
}
