圖片格式

開發中常見的圖片格式有 GIF、PNG8、PNG24、JPEG、WEBP。

我們需要根據圖片格式的特性和場景需要選取適合的圖片格式，而不是設計給什么用什么。

PNGPNG 的目的是替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。流式網絡圖形格式(Portable Network Graphic Format，PNG)名稱來源于非官方的“PNG’s Not GIF”，是一種位圖文件(bitmap file)存儲格式，讀成“ping”。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數據。PNG使用從LZ77派生的無損數據壓縮算法。

特性支持256色調色板技術，文件體積小。

無損壓縮

最高支持48位真彩色圖像以及16位灰度圖像。

支持Alpha通道的透明/半透明特性。

支持圖像亮度的Gamma校準信息。

支持存儲附加文本信息，以保留圖像名稱、作者、版權、創作時間、注釋等信息。

漸近顯示和流式讀寫，適合在網絡傳輸中快速顯示預覽效果后再展示全貌。

使用CRC防止文件出錯。

最新的PNG標準允許在一個文件內存儲多幅圖像。

更多

JPEGJPEG是一種針對照片視頻而廣泛使用的一種有損壓縮標準方法.

特性適用于儲存24位元全采影像

采取的壓縮方式通常為有損壓縮

不支持透明或動畫

壓縮比越高影像耗損越大，失真越嚴重

壓縮比在10左右肉眼無法辨出壓縮圖與原圖的差別

更多

WEBP

WebP，是一種同時提供了有損壓縮與無損壓縮的圖片文件格式，WebP支持無損壓縮和透明色的功能。

特性同時提供有損壓縮和無損壓縮兩種圖片文件格式

文件體積小，無損壓縮后，比 PNG 文件少了 45％ 的文件大小；有損壓縮后，比 JPEG 文件少了 25% - 34% 文件大小

瀏覽器兼容差，目前只支持客戶端 Chrome 和 Opera 瀏覽器以及安卓原生瀏覽器(Andriod 4.0+)，WebP兼容性

更多

更多關于WebP：

GIFGIF圖象是基于顏色列表的(存儲的數據是該點的顏色對應于顏色列表的索引值)，最多只支持8位(256色)。GIF文件內部分成許多存儲塊，用來存儲多幅圖象或者是決定圖象表現行為的控制塊，用以實現動畫和交互式應用。

特性優秀的壓縮算法使其在一定程度上保證圖像質量的同時將體積變得很小。

可插入多幀，從而實現動畫效果。

可設置透明色以產生對象浮現于背景之上的效果。

由于采用了8位壓縮，最多只能處理256種顏色，故不宜應用于真彩色圖片

更多

團隊約定

內容圖內容圖多以商品圖等照片類圖片形式存在，顏色較為豐富，文件體積較大。優先考慮 JPEG 格式，條件允許的話優先考慮 WebP 格式

盡量不使用PNG格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大

背景圖背景圖多為圖標等顏色比較簡單、文件體積不大、起修飾作用的圖片。PNG 與 GIF 格式，優先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率

圖像顏色比較簡單的，如純色塊線條圖標，優先考慮使用 PNG8 格式，避免不使用 JPEG 格式

圖像顏色豐富而且圖片文件不太大的(40KB 以下)或有半透明效果的優先考慮 PNG24 格式

圖像顏色豐富而且文件比較大的(40KB - 200KB)優先考慮 JPEG 格式

條件允許的，優先考慮 WebP 代替 PNG 和 JPEG 格式

優化圖片是頁面顯示中很重要的部分，圖片加載關系到用戶體驗、應用性能

常見處理方式

減少文件體積大小上線的圖片都應該經過壓縮處理，壓縮后的圖片不應該出現肉眼可感知的失真區域。

壓縮優化圖片大小

采用合適的圖片格式

減少圖片資源請求數合成雪碧圖

使用建議適合使用頻率高更新頻率低的小圖標

盡量不留太多的空白

體積較大的圖片不合并

確保要合并的小圖坐標數值和合并后的 Sprites 圖尺寸均為偶數

預加載圖片預加載可以提高用戶體驗，對于圖片長列表和圖片占比很大的背景圖尤其重要。

css 預加載

利用css的background屬性可以預先加載圖片。加載后隱藏。在其他地方在請求一樣的地址時會優先去加載緩存內的圖片進行顯示，達到一個預加載的效果。不好的地方就是會影響影響頁面渲染速度

顯性預加載

顯性預加載指的則是處于預加載過程時頁面有明確的加載提示，比如進度條或者是Loading圖標，讓用戶有個心理預期，減少等待的煩躁感。

隱形預加載(基于用戶行為的資源預加載

通過觸屏頁面進度加載對應的資源。常見tabs切換，通常的處理是當用戶去點擊選項卡按鈕的時候，在對應面板呈現的時候，我們再去加載圖片內容。于是，就存在這樣一個不好的體驗——由于內容呈現瞬時，而圖片呈現是異步的，就很容易出現選項卡主體內容切換過來了，結果是個空白，過了會兒圖片才出現。

預加載組件

先加載一張縮略圖，該縮略圖通過樣式設置為和原圖一樣的寬高，這樣用戶首先能很快速地看到一張模糊的圖片，此時再去對原圖做預加載，加載完成之后對縮略圖進行替換，因為此時圖片已經下載過了，所以界面上能無縫地切換為原圖顯示

懶加載指的是圖片在頁面渲染的時候先不加載，頁面渲染完成后在指定動作觸發后再加載圖片。這種方式通常比較合適于篇幅較長的頁面，并且圖片內容的重要性低于頁面信息內容，能夠快速地先將重要的頁面信息呈現給用戶。

lazy-loadimage 自帶屬性。 圖片懶加載，在即將進入一定范圍(上下三屏)時才開始加載。

lazy-loadbooleanfalse圖片懶加載，在即將進入一定范圍(上下三屏)時才開始加載

官方推薦優化方式--關于圖片資源的優化

目前圖片資源的主要性能問題在于大圖片和長列表圖片上，這兩種情況都有可能導致 iOS 客戶端內存占用上升，從而觸發系統回收小程序頁面。建議開發者盡量減少使用大圖片資源

控制代碼包內的圖片資源

小程序代碼包經過編譯后，會放在微信的 CDN 上供用戶下載，CDN 開啟了 GZIP 壓縮，所以用戶下載的是壓縮后的 GZIP 包，其大小比代碼包原體積會更小。 但我們分析數據發現，不同小程序之間的代碼包壓縮比差異也挺大的，部分可以達到 30%，而部分只有 80%，而造成這部分差異的一個原因，就是圖片資源的使用。GZIP 對基于文本資源的壓縮效果最好，在壓縮較大文件時往往可高達 70%-80% 的壓縮率，而如果對已經壓縮的資源(例如大多數的圖片格式)則效果甚微。

寫在最后

凡事都是實踐出真知。圍繞著業務，切合實際的進行優化處理。

不要為了優化而優化。

總結

以上是生活随笔為你收集整理的html页面懒加载灰度图片大小,小程序初级指南--图片及其优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。