之前看到一個不錯的界面，下載后發現無法顯示預覽圖，以為是圖片的擴展名錯了，仔細一看，擴展名是.webp，那么webp是什么格式呢？如何在電腦上直接識別預覽呢？

webp介紹

webp是Google開發的一種支持有損壓縮和無損壓縮的圖片格式（也支持alpha通道，動畫）。在相同尺寸下會比jpg、png有更小的體積，同時清晰度也可以保障，所以在網絡傳輸上會比png和jpg更快。

常見的圖片格式對比

我們先來回顧下工作中常用的圖片格式。

UI設計師除了要完成界面設計外，還要給程序員提供頁面的圖片資源，也就是通常所說的切圖。我們經常使用的切圖格式有jpg、png、gif動圖這幾種位圖，當然也有svg這種矢量格式圖片，以及iconfont解決方案。下面是簡單的介紹對比。

jpg-有損壓縮，適合畫面復雜的照片類圖片

png-無損壓縮，支持alpha透明，切圖首選

gif-動態圖片，支持alpha索引透明

Iconfont-代碼化、矢量化的前端圖標解決方案

svg-矢量圖片，體積小不失真

擴展一下，svg其實是支持動圖的，驚不驚喜，意不意外？以后UI黑客會分享一下svg動圖知識。

隨著時代和技術的發展，傳統的圖片格式慢慢不適用如今的網絡環境和用戶需求，webp就是一種在體積和視覺表現方面都比較好的格式。不過在瀏覽器支持這方面，webp還是沒法和png、jpg相比，由于是Google開發的，所以自家的Chrome瀏覽器還是很好支持的。

既然webp有著非常好的優點，所以目前有越來越多的網站使用。可是下載到電腦中卻無法顯示預覽。尤其是Mac電腦。

很多時候我們直接按空格鍵，使用QuickLook就可以預覽很多格式的文件。比如查看PSD文件，不需要打開PS，直接按空格就可以查看。同樣的PDF、PPT、Word都可以直接預覽。這樣的操作有個傳神的名字：一指禪。

但是預覽webp就不行了。只能把webp圖片拖動到Chrome瀏覽器里面去查看。

不過，作為一名追求工作效率的UI設計師，我可忍受不了把webp圖片拖到Chrome去查看這種復雜糟糕的體驗。

所以給大家推薦一個插件：WebP.qlgenerator，屬于QuickLook的增強型插件。直接讓webp像jpg、png那樣正常去看。

提取碼: ncbj

復制路徑/Library/QuickLook，打開Finder，依次選擇：前往-前往文件夾-粘貼路徑后回車，然后把下載的插件復制到這個目錄，這時候會提示輸入你的電腦密碼。

打開終端（Terminal），輸入qlmanage -r并回車，之后出現resetting quicklookd提示就可以。

我們再看看剛才無法預覽的webp圖片，已經可以預覽了。

webp是支持動態圖像的，體積相比gif也會小很多，但是目前這個插件還無法直接識別webp動圖，只支持靜態圖片預覽。后期如果有更簡單的查看webp動圖方法UI黑客會及時分享。不過webp動圖目前遇到的非常少，新技術的推廣需要時間。

Win電腦下webp也是無法直接顯示縮略圖的，使用Win的同學可以安裝Windows WebP 編解碼組件https://www.cr173.com/soft/72994.html

最后，推薦兩個在線webp轉化工具，可以方便壓縮圖片體積、轉換圖片格式。

更多UI設計干貨文章請關注UI黑客

微信公眾號 uihacker