圖片格式
- 傳統(tǒng)格式
- JPEG（有損壓縮）
- PNG （無損壓縮嫌拣、透明通道）
- GIF （多幀動畫）
- 新興格式
- APNG （Mozilla）
- WebP （Google）VP8 視頻幀內(nèi)編碼
支持有損和無損壓縮狰右、支持完整的透明通道伏社、也支持多幀動畫，并且沒有版權問題 - BPG （Fabrice Bellard）HEVC (即 H.265) 幀內(nèi)編碼
相對于WebP 來說屈溉，同等體積下 BPG 能提供更高的圖像質量，目前阻礙它流行的原因就是 HEVC 的版權問題和它較長的編碼解碼時間
移動端圖片類型的支持情況
靜態(tài)圖片的編碼與解碼庫
- JPEG
- libjpeg
- libjpeg-turbo
- MozJPEG
- AppleJPEG
- PNG
- WebP
-
libwebp
WebP 編碼主要參數(shù): lossless | quality | method WebP 解碼參數(shù):use_threads | bypass_filtering
動態(tài)圖片的編碼與解碼
在解碼動圖時，解碼器通常采用所謂"畫布模式"進行渲染
- GIF
- APNG
-
libwebp
WebP 動圖實際上是把多個單幀 WebP 數(shù)據(jù)簡單打包到一個文件內(nèi)馋辈，而并不是由單幀 WebP 擴展而來
WebP 的優(yōu)勢
WebP 的優(yōu)勢體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來更小的圖片體積倍谜，而且擁有肉眼識別無差異的圖像質量迈螟；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性尔崔，在 JPEG 和 PNG 上的轉化效果都非常優(yōu)秀答毫、穩(wěn)定和統(tǒng)一
- 同等質量但是圖片更小
- 壓縮之后質量無明顯變化
JPEG 格式的圖片在質量較低時會有明顯的缺陷，尤其是當圖片包含微小的細節(jié)或文本時季春，但 WebP 格式則沒有明顯的缺陷洗搂，但也會在低質量設置時產(chǎn)生稍微模糊的圖像
- 完美支持無損圖像（適用于icon）
WebP 同樣支持一如 PNG 格式的無損模式，想要生成無損的 WebP 文件，只需將「quality」變量設置為 100
WebP的缺點
1.目前WEBP與JPG相比較蚕脏，編碼速度慢
10倍侦副，解碼速度慢1.5倍，雖然會增加額外的解碼時間驼鞭，但是由于減少了文件體積秦驯，縮短了加載的時間，實際上文件的渲染速度反而變快了
2.瀏覽器支持——WebP 目前支持桌面上的 Chrome 和 Opera 瀏覽器挣棕。手機支持僅限于原生的 Android 瀏覽器和 Android 系統(tǒng)上的 Chrome 瀏覽器
3.本地操作系統(tǒng)支持——WebP 目前不被任何操作系統(tǒng)原生支持译隘。
WebP的應用
- 瀏覽器場景
- JavaScript 能力檢測，對支持 WebP 的用戶輸出 WebP 圖片, 參考jQuery Plugin of Cloudinary
- 使用 WebP 支持插件：WebPJS
- APP場景
- 后臺場景（Webp轉換）
1.谷歌webp開發(fā)者網(wǎng)站: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.谷歌開發(fā)的 PageSpeed 模塊
Webp 在iOS中的應用
- 本地采用webP圖片
下載第三方庫:
$pod 'SDWebImage/WebP'
SDWebImage里面有個webP 框架,可以將webp-->NSData-->UIImage 變?yōu)榭勺R別的圖片直接給控件調(diào)用
+ (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 協(xié)作
A. 在網(wǎng)頁加載出后截取到 HTML 及內(nèi)部的 JS 后,調(diào)用 JS 預先準備好的方法獲取需要轉碼的 webP 格式圖片下載地址(其實一個一個的遍歷也行).
B. 在App 本地開啟線程下載圖片,下載完成后,將圖片轉碼由 webP—> png—>Base64
B1. 在App 本地開啟線程下載圖片,下載完成后,將圖片轉碼由 webP—> png->file 生成自定義URL 例如：yxy://image/xxx.png
C. 將 Base64及原圖片下載地址一一對應調(diào)用 JS 準備好的方法進行替換
C1. 將 自定義URL及原圖片下載地址一一對應調(diào)用 JS 準備好的方法進行替換
D. 將下載后的圖片進行緩存,并進行管理
- NSURLProtocol
NSURLProtocol是 iOS里面的URL Loading System的一部分
- 可以攔截UIWebView洛心，基于系統(tǒng)的NSUIConnection或者NSUISession進行封裝的網(wǎng)絡請求固耘。
- 忽略網(wǎng)絡請求，直接返回自定義的Response
- 修改request（請求地址词身，認證信息等等）
- 返回數(shù)據(jù)攔截
- (void)startLoading
{
// 標示改request已經(jīng)處理過了厅目，防止無限循環(huán)
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 {
// 處理第三方統(tǒng)一接入
self.connection = [NSURLConnection connectionWithRequest:mutableReqeust delegate:self];
}
}
}
