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=">複製程式碼