移動端圖片優化總結

webview中的圖片，而不是native；

從圖片格式來看：

　　1.色彩豐富的、大的圖片切成jpg的；

　　2.尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的；

　　3.半透明的切成png24。

png8的大小更小；可是尺寸小的圖片，相似於icon更推薦使用svg（純色使用iconfont）；

更小的圖片格式webp，可是支持度不是很好；

因此webp 優於 jpg，jpg的大小比png更小，但只有png支持透明；

每一種圖片格式都有本身的特色及適用場景；

其餘方面：

儘可能不要使用空的src，這將形成頁面重載，儘可能避免使用dataURL，由於這裏沒有使用圖片的壓縮算法，會過大，小圖能夠使用，小於3K的，能夠使用一像素的圖片，設置寬高進行佔位；

• *** 對不一樣機型的分辨率和屏幕密度作適配，下載不一樣尺寸圖片
• 增長極速模式，在2G和弱網絡下面，只下載普通質量的圖片，
• 增長不一樣圖片質量的選項給用戶

圖片的預加載與懶加載；

• 圖片的預加載是利用緩存，把圖片預先加載到頁面沒法看到的地方，等到圖片進入用戶視野後才顯示，緩存的方式只須要簡單的把圖片資源提早請求便可，（純js或者利用css的background屬性均可以）以後在使用時，獲取同一張圖片，則瀏覽器會直接使用緩存好的圖片；預加載能夠提升後續的頁面性能，但會增加首頁的渲染時間，通常來講首屏要儘量快的打開，因此不使用預加載；
• 圖片的懶加載能夠節約流量，把一些網絡資源的請求放到了後面，能夠使首頁渲染時間減短；

漸進式圖片，漸進式和普通圖片的大小几乎相近，更好的用戶體驗，開始大小框架就定好，不會像基準式圖片同樣，因爲尺寸未設定而形成迴流——提升的渲染性能

長圖文展現：

• 方案一：相似微信的圖片切分，一張長圖分爲多張展現，在加載的時候使用loading；
• 方案二：相似口碑，使用漸進式圖片展現；

PS：補充兩個佔位圖的base64編碼：

<!-- 1像素透明 -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<!-- 1像素黑色 -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">複製代碼