自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何對(duì)移動(dòng)端的圖片流量進(jìn)行優(yōu)化

作者：lv_DaDa
移動(dòng)開發(fā) 移動(dòng)應(yīng)用
刷新一個(gè)頁面消耗的流量除了腳本樣式文件以外，大頭其實(shí)在下載的圖片。一張圖片動(dòng)輒幾十kb，想盡辦法優(yōu)化樣式、腳本文件所優(yōu)化的圖片流量其實(shí)還不如一張圖片大。本文從兩個(gè)角度介紹如何對(duì)圖片流量進(jìn)行優(yōu)化。本文進(jìn)行圖片流量?jī)?yōu)化的前提都是對(duì)于移動(dòng)端而言。

[[171480]]

刷新一個(gè)頁面消耗的流量除了腳本樣式文件以外，大頭其實(shí)在下載的圖片。一張圖片動(dòng)輒幾十kb，想盡辦法優(yōu)化樣式、腳本文件所優(yōu)化的圖片流量其實(shí)還不如一張圖片大。

本文從兩個(gè)角度介紹如何對(duì)圖片流量進(jìn)行優(yōu)化。本文進(jìn)行圖片流量?jī)?yōu)化的前提都是對(duì)于移動(dòng)端而言。

webp

首先從圖片格式方面著手，webp(google官方網(wǎng)址)是谷歌推出的一種圖片格式，優(yōu)點(diǎn)在于同等畫面質(zhì)量下，體積比jpg、png少了25%以上。以兩張jpg、png圖片為例：

  1. JPG http://cdn1.showjoy.com/images/c9/c9c2221942774550ad53342da23774de.jpg
  2. PNG http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png
size JPG PNG
無壓縮 165kb 55kb
tinypng壓縮 75kb 20kb
webp轉(zhuǎn)換 54kb 6.1kb

由表格的羅列可知，將圖片轉(zhuǎn)換為webp格式，圖片的體積比tinypng壓縮完后的體積還要小，且圖片質(zhì)量甚至還要高于tinypng壓縮。

雖然webp格式的圖片相對(duì)于png和jpg體積小質(zhì)量高，但是目前的兼容性在全球范圍只達(dá)到了70%左右。(caniuse截止20160911)

 

根據(jù)caniuse，目前在移動(dòng)端安卓機(jī)型4.4以上全部支持，但是ios全軍覆滅。我司用戶ios、安卓55分成，支持了webp至少能為一半用戶提供更小體積的圖片體驗(yàn)。而且據(jù)說ios10系統(tǒng)將支持webp，這樣一來我司產(chǎn)品的webp支持度將會(huì)更高。ios10有望支持webp

圖片服務(wù)器支持webp轉(zhuǎn)換

我司原本就有基于nginx+lua+graphicsmagick的圖片縮略圖功能，具體使用方法類似

http://cdn1.shwojoy.com/images/34/xxxxx.png

http://cdn1.shwojoy.com/images/34/xxxxx.png.300x300.png

為了支持webp轉(zhuǎn)換需要修改原先的lua腳本，添加對(duì).webp后綴的識(shí)別。使之能對(duì)類似xxxxx.png.300x300.png.webp或者xxxxx.png.webp這樣的域名進(jìn)行識(shí)別并轉(zhuǎn)換。

nginx+lua+graphicsmagick這套方案其實(shí)做的事情就是nginx對(duì)域名進(jìn)行攔截，lua腳本進(jìn)行域名后綴規(guī)則的匹配，比如說300x300.png/.webp類似的后綴，匹配完成后再在lua里調(diào)用graphicsmagick的命令，進(jìn)行一些圖片轉(zhuǎn)換、裁剪等工作。

lua腳本片段

  1. if table.isLegal(size_list) and extend == "webp" then 
  2.         command = [[/usr/local/GraphicsMagick-1.3.25/bin/gm convert -quality 75 -density 72 +profile "*"  ]] .. ngx.var.image_root ..  originalUri  .. " -geometry " .. area .. " " .. ngx.var.file; 
  3.         os.execute(command); 
  4. end 

值得注意的是graphicsmagick版本在1.3.20及以上才支持webp download

graphicsmagick能做到轉(zhuǎn)換webp還需要下載編譯libwebp。graphicsmagick支持webp教程

圖片服務(wù)器支持webp轉(zhuǎn)換后，就能實(shí)時(shí)轉(zhuǎn)化webp格式的圖片了，為接下來的webp兼容方案提供了技術(shù)支持。

  • http://cdn1.showjoy.com/images/c9/c9c2221942774550ad53342da23774de.jpg
  • http://cdn1.showjoy.com/images/c9/c9c2221942774550ad53342da23774de.jpg.webp

webp兼容方案

目前在瀏覽器端判斷是否支持webp***的方法就是特性檢測(cè)法。根據(jù)檢測(cè)結(jié)果將是否支持webp的值存入cookie，供之后需要判斷webp兼容性的地方使用。

特性檢測(cè)腳本：(參考)

  1. ;(function(doc) { 
  2.     // 給html根節(jié)點(diǎn)加上webps類名 
  3.     function addRootTag() { 
  4.         doc.documentElement.className += " webpa"; 
  5.     } 
  6.  
  7.     // 判斷是否有webp_showjoy=available這個(gè)cookie 
  8.     if (!/webp_showjoy=available/.test(document.cookie)) { 
  9.         var image = new Image(); 
  10.  
  11.         // 圖片加載完成時(shí)候的操作 
  12.         image.onload = function() { 
  13.  
  14.             // 圖片加載成功且寬度為1，那么就代表支持webp了，因?yàn)檫@張base64圖是webp格式。如果不支持會(huì)觸發(fā)image.error方法 
  15.             if (image.width == 1) { 
  16.  
  17.                 // html根節(jié)點(diǎn)添加class，并且埋入cookie 
  18.                 addRootTag(); 
  19.                 document.cookie = "webp_showjoy=available; max-age=31536000; domain="; 
  20.             } 
  21.         }; 
  22.  
  23.         // 一張支持alpha透明度的webp的圖片，使用base64編碼 
  24.         image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA=='; 
  25.     } else { 
  26.         addRootTag(); 
  27.     } 
  28. }(document));  

如果瀏覽器支持webp格式的圖片則在cookie中設(shè)置標(biāo)志，并且在html標(biāo)簽上設(shè)置webpaclassName，這個(gè)classname的作用是在less文件中兼容webp圖片。

less文件中的webp兼容

  1. .webpbg(@url) { 
  2.   background-image: url(@url); 
  3.   .webpa & { 
  4.     background-image: url('@{url}.webp'); 
  5.   } 
  6. }  

這段less取代了原先在less文件中描述背景圖片的代碼。

比如原先定義背景圖片

  1. div { 
  2.     background-image: url(xx); 
  3. }  

現(xiàn)在使用兼容方案則為：

  1. div { 
  2.     webpbg(xxx); 
  3. }  

html文件中的webp圖片兼容

我司目前html部分通過java的velocity編寫，對(duì)于同步傳遞到頁面上的圖片webp將通過如下方式兼容。

  1. <img class="slider-img" src="$!{banner.recordMap.get('圖片地址').value}.750x448.jpg$!{isWebp}"> 

$!{isWebp} 變量是后臺(tái)通過判斷瀏覽器請(qǐng)求的cookie中是否有之前定義的webp_showjoy=available，有則返回.webp后綴，無則返回空。

這樣有個(gè)問題是用戶***次瀏覽產(chǎn)品頁面時(shí)后臺(tái)判斷cookie永遠(yuǎn)是false，所以用戶***次瀏覽是不可能返回.webp后綴的圖片的。

還有一種情況是圖片大量使用的時(shí)候我們會(huì)使用懶加載進(jìn)行圖片的延遲加載。這時(shí)就可以修改懶加載插件，在插件里動(dòng)態(tài)兼容webp圖片了。

  1. /* 根據(jù)cookie返回圖片是否webp的地址 */ 
  2. function getwebpsrc (imgsrc) { 
  3.     var needwebp = false, 
  4.         src = ''; 
  5.     if (/webp_showjoy=available/.test(document.cookie)) { 
  6.         needwebp = true; 
  7.     } 
  8.     src = needwebp ? imgsrc + '.webp' : imgsrc; 
  9.     return src; 
  10. }  

到此就完成了移動(dòng)端對(duì)webp格式圖片的支持。這也是圖片流量?jī)?yōu)化其中之一方案。

retina兼容圖片流量?jī)?yōu)化

前端應(yīng)該都了解在retina屏下應(yīng)該使用@2x或者@3x等倍率的圖片，才能保證圖片的清晰度。但是為了切圖方便，部分公司都會(huì)統(tǒng)一在切圖階段切出@2x的圖片，不管瀏覽設(shè)備是retina屏還是普通屏，一律都使用@2x的圖片。這樣做有兩個(gè)壞處，一是@2x的圖片在非retina屏下會(huì)出現(xiàn)downsampled現(xiàn)象，雖然不會(huì)影響清晰度，但是會(huì)缺少一些銳利度。二是@2x的圖片相比較@1x的圖片，前者體積大于后者，這也就造成了流量的浪費(fèi)以及影響頁面打開性能。

所以正確處理方法是針對(duì)retina屏的是否采用不同尺寸的圖片。圖片裁剪已經(jīng)在圖片服務(wù)器上實(shí)現(xiàn)。在考慮retina時(shí)也需要加上webp的兼容，兩者一起作用會(huì)大大減少圖片的尺寸。

  1. @2x http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png.300x300.png.webp 
  2. @1x http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png.150x150.png.webp  

less文件兼容retina

  1. .retinabg(@file-2x; @reg-2x; @reg-1x; @type) when (isstring(@reg-2x)) { 
  2.  
  3.   background-image: url("@{file-2x}.@{reg-1x}.@{type}"); 
  4.   .webpa & { 
  5.     background-image: url('@{file-2x}.@{reg-1x}.@{type}.webp'); 
  6.   } 
  7.   @media 
  8.   only screen and (-webkit-min-device-pixel-ratio: 2), 
  9.   only screen and (   min--moz-device-pixel-ratio: 2), 
  10.   only screen and (     -o-min-device-pixel-ratio: 2/1), 
  11.   only screen and (        min-device-pixel-ratio: 2), 
  12.   only screen and (                min-resolution: 192dpi), 
  13.   only screen and (                min-resolution: 2dppx) { 
  14.     background-image: url("@{file-2x}.@{reg-2x}.@{type}"); 
  15.     .webpa & { 
  16.       background-image: url('@{file-2x}.@{reg-2x}.@{type}.webp'); 
  17.     } 
  18.   } 
  19. }  

當(dāng)要代替原先書寫時(shí)的background-image: url(),可以寫成如下方式：

  1. .retinabg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png; 300x300; 150x150; png) 

html文件兼容retina

在html中本次方案準(zhǔn)備使用html5特性srcset屬性。

secset屬性的目的在于允許開發(fā)者為某個(gè)圖片的屬性指定一系列的來源，其中這些圖片的來源是要根據(jù)客戶端顯示屏的像素分辨率來設(shè)定的。

比如在volecity模板中定義圖片資源：

  1. <img class="pic" src="$!{newProduct.image}.300x300.png$!{isWebp}" srcset="$!{newProduct.image}.150x150.png$!{isWebp} 1x, $!{newProduct.image}.300x300.png$!{isWebp} 2x"> 

這段圖片定義說明了在retina(2x)屏幕下使用300x300的圖片來源，而在飛retina屏下(1x)下使用150x150的圖。

html中懶加載的圖片

由于懶加載的圖片在插件中就會(huì)進(jìn)行src賦值的操作，所以直接在懶加載插件中根據(jù)window.devicePixelRatio進(jìn)行判斷修改圖片url。

  1. /* 根據(jù)cookie返回圖片是否webp的地址 */ 
  2. /* 根據(jù)dpr返回不同尺寸的圖片 */ 
  3. function getwebpsrc (imgsrc) { 
  4.     var areaInfo = ''; 
  5.     if (window.devicePixelRatio && window.devicePixelRatio <= 1) { 
  6.         var area = imgsrc.match(/[0-9]+x[0-9]+/); 
  7.         if (area) { 
  8.             var areaSplit = area[0].split('x'); 
  9.             areaInfo = areaSplit[0] /2 + 'x' + areaSplit[1] /2; 
  10.             imgsrc = imgsrc.replace(/[0-9]+x[0-9]+/, areaInfo) 
  11.         } 
  12.     } 
  13.     var needwebp = false, 
  14.         src = ''; 
  15.     if (/webp_showjoy=available/.test(document.cookie)) { 
  16.         needwebp = true; 
  17.     } 
  18.     src = needwebp ? imgsrc + '.webp' : imgsrc; 
  19.     return src; 
  20. }  

在這個(gè)方案下所有圖片的編寫都必須要帶上尺寸后綴(_num_x_num_),在我司圖片服務(wù)器支持下還有一個(gè)特別的好處：圖片服務(wù)器會(huì)對(duì)帶有尺寸后綴的圖片進(jìn)行尺寸裁剪的同時(shí)進(jìn)行圖片壓縮，遇到不支持webp格式的瀏覽器上就會(huì)順帶對(duì)圖片進(jìn)行壓縮，盡力地減小圖片體積。

 

srcset屬性目前在移動(dòng)端的兼容性十分不錯(cuò)，安卓4.x版本不支持。

總結(jié)

一共兩點(diǎn)圖片流量?jī)?yōu)化方案，一是針對(duì)webp圖片格式，二是針對(duì)retina。***總結(jié)下來的編寫圖片代碼的情景就為3種：

  1. html同步圖片編寫
    1. <img class="pic" src="$!{newProduct.image}.300x300.png$!{isWebp}" srcset="$!{newProduct.image}.150x150.png$!{isWebp} 1x, $!{newProduct.image}.300x300.png$!{isWebp} 2x"> 
  2. 懶加載圖片編寫
    1. <img class="goods-pic j_Lazyload" data-original="{{$value.image}}.300x300.png"src="http://cdn1.showjoy.com/images/a5/a560e106324d4670acd11b69aee0f11f.png"> 
  3. less
    1. .retinabg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png; 300x300; 150x150; png) 
    2.  
    3. webpbg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png); 

對(duì)我以上的理解有疑問和意見的歡迎找我私聊~微博-寫前端的暹羅

責(zé)任編輯：龐桂玉 來源： segmentfault
移動(dòng)應(yīng)用圖片流量?jī)?yōu)化
相關(guān)推薦

2022-11-07 07:54:05

微服務(wù)數(shù)據(jù)庫網(wǎng)關(guān)

2023-01-30 08:30:09

Tomcat性能優(yōu)化

2013-05-24 09:25:27

2010-04-19 17:09:30

Oracle sql

2010-05-17 17:09:29

Mysql LIMIT

2017-01-05 20:11:34

大數(shù)據(jù)技術(shù)審計(jì)系統(tǒng)

2012-06-14 16:04:56

移動(dòng)端圖片分享

2010-07-27 09:29:40

DB2數(shù)據(jù)移動(dòng)

2011-03-02 14:25:46

網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)數(shù)據(jù)流量

2021-05-09 22:48:40

SQL數(shù)據(jù)庫變量

2012-05-23 23:36:09

Google

2021-09-03 09:44:13

移動(dòng)端性能優(yōu)化U-APM

2018-05-22 10:30:37

深度學(xué)習(xí)蘑菇街移動(dòng)端

2022-10-17 00:00:00

SQLMySQL數(shù)據(jù)，

2023-07-13 11:24:14

SQL優(yōu)化賦值

2018-04-19 15:13:53

javascriptwebpackvue.js

2024-06-13 17:10:16

2009-12-08 18:08:43

WCF服務(wù)

2022-08-15 15:16:20

機(jī)器學(xué)習(xí)圖片深度學(xué)習(xí)

2011-06-24 16:44:43

網(wǎng)站優(yōu)化
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)