頁面體驗提高小技巧—漸進式圖片

漸進式圖片的使用

前端性能方面有許多可優化的點，而這些優化帶來的就是用戶體驗的提高。今天咱們要聊的東西並不能給性能帶來提高，但卻能在必定程度上提高用戶的體驗。

參考 博客

    場景：在訪問頁面的時候若是圖片較大或者網速慢的狀況咱們會看到圖片加載起來是有一個明顯過程的，就是從上到下逐行呈現出來，這給用戶的信號就是再等等圖片還在加載中，而且圖片沒有加載出來的部分呈現一片空白，不利於體驗，下面就看看漸進式圖片怎麼緩解這一狀況

認識漸進式圖片

漸進式圖片實際上是一種JPEG格式的圖片，和普通的JPEG圖片的區別以下：

• 普通圖片渲染時，數據將按照存儲時的順序從上到下逐行掃描被顯示出來的，直到全部的數據都被讀取完畢，就完成了整張圖片的顯示。
• 漸進式圖片渲染過程當中，會先顯示整個圖片的模糊輪廓，隨着掃描次數的增長，圖片變得愈來愈清晰。這種格式的主要優勢是在網絡較慢的狀況下，能夠看到圖片的輪廓知道正在加載的圖片大概是什麼。

口說無憑，看看效果

• 生成兩張相同的圖片，均爲JPEG格式

一、普通圖片生成

二、漸進式圖片生成（直接ps保存爲JPEG格式，勾選連續）

• 部署到服務器查看效果

    效果描述：從上面能夠看到，兩張圖片的大小是差很少的，漸進式圖片一開始呈現的效果爲好像是一會兒就徹底加載出來了，只是看起來有點模糊。而普通圖片是逐行掃描加載，已渲染的部分清晰可見。

• 最終效果

總結

    從直觀上來看好像漸進式圖片要加載的快一點，這就是漸進式圖片可以達到的體驗提高效果。