各位設計師在整理個人圖庫的時候都會有這樣的經(jīng)歷，正常 jpg 和 png 都可以在 Mac 的文件夾中顯示，但偶爾會遇到無法識別的圖片格式，下載后發(fā)現(xiàn)無法顯示預覽圖，而且無法打開，Win電腦也是無法打開。以為是圖片的擴展名錯了，仔細一看，擴展名是.webp，那么 webp 是什么格式呢？如何在電腦上直接識別預覽呢？
webp 是 Google 開發(fā)的一種支持有損壓縮和無損壓縮的圖片格式（也支持 alpha通道，動畫）。在相同尺寸下會比 jpg、png有更小的體積，同時清晰度也可以保障，所以在網(wǎng)絡傳輸上會比 png 和 jpg 更快。
我們先來回顧下工作中常用的圖片格式。
UI設計師除了要完成界面設計外，還要給程序員提供頁面的圖片資源，也就是通常所說的切圖。我們經(jīng)常使用的切圖格式有 jpg、png、gif動圖這幾種位圖，當然也有 svg 這種矢量格式圖片，以及 iconfont 解決方案。
下面是簡單的介紹對比：
- jpg - 有損壓縮，適合畫面復雜的照片類圖片
- png - 無損壓縮，支持 alpha 透明，切圖首選
- gif - 動態(tài)圖片，支持 alpha 索引透明
- Iconfont - 代碼化、矢量化的前端圖標解決方案
- svg - 矢量圖片，體積小不失真
擴展一下，svg 其實是支持動圖的，以后 UI 黑客會分享一下 svg 動圖知識。
隨著時代和技術的發(fā)展，傳統(tǒng)的圖片格式慢慢不適用如今的網(wǎng)絡環(huán)境和用戶需求，webp 就是一種在體積和視覺表現(xiàn)方面都比較好的格式。不過在瀏覽器支持這方面，webp 還是沒法和 png、jpg 相比，由于是 Google 開發(fā)的，所以自家的 Chrome 瀏覽器還是很好支持的。
Mac顯示webp圖片
既然 webp 有著非常好的優(yōu)點，所以目前有越來越多的網(wǎng)站使用，比如淘寶就有些圖片使用了 webp?？墒窍螺d到電腦中卻無法顯示預覽。
很多時候我們直接按空格鍵，使用 QuickLook 就可以預覽很多格式的文件。比如查看 PSD 文件，不需要打開 PS，直接按空格就可以查看。同樣的 PDF、PPT、Word 都可以直接預覽。這樣的操作有個傳神的名字：一指禪。
但是預覽 webp 就不行了。只能把 webp 圖片拖動到 Chrome 瀏覽器里面去查看。
不過，作為一名追求工作效率的 UI設計師，我可忍受不了把 webp圖片拖到 Chrome 去查看這種復雜糟糕的體驗。
所以給大家推薦一個插件：WebP.qlgenerator，屬于 QuickLook 的增強型插件。直接讓 webp 像 jpg、png 那樣正常去看。Win電腦也有對應的方法，后文會有介紹，我們先看下 Mac 的安裝方法。
1. 首先下載插件
網(wǎng)盤鏈接：https://pan.baidu.com/s/1b23WP_1pbxfvyNH0ekTOQA
提取碼：p47g
2. 移動插件到 QuickLook 目錄
復制路徑/Library/QuickLook，打開Finder，依次選擇：前往 - 前往文件夾 - 粘貼路徑后回車，然后把下載的插件復制到這個目錄，這時候會提示輸入你的電腦密碼。
3. 用終端重啟QuickLook
打開終端（Terminal），輸入 qlmanage -r 并回車，之后出現(xiàn) resetting quicklookd 提示就可以。
我們再看看剛才無法預覽的 webp圖片，已經(jīng)可以預覽了。
Win電腦下 webp 也是無法直接顯示縮略圖的，如果不裝其他軟件，電腦無法識別打開。這里準備了一張魚腥草的 webp圖片，無法顯示。
其實魚腥草的花還是挺好看的，想看到它的真面目，我們需要安裝 Windows WebP? 編解碼組件（WebP Codec for Windows）。
網(wǎng)盤鏈接：https://pan.baidu.com/s/1b23WP_1pbxfvyNH0ekTOQA
提取碼：p47g
正常安裝即可，不需要重啟電腦。安裝好就可以看到了，這就是魚腥草花，挺可愛的。
用 Win 自帶的圖片查看器看下大圖，也是完美展示。
webp動圖
webp 是支持動態(tài)圖像的，體積相比 gif 也會小很多，但是目前這個插件還無法直接識別 webp動圖，只支持靜態(tài)圖片預覽。后期如果有更簡單的查看 webp動圖方法 UI黑客會及時分享。不過 webp 動圖實際遇到的還是很少的，新技術的推廣需要時間。
jpg、png轉(zhuǎn)webp在線工具
最后，推薦兩個在線 webp 轉(zhuǎn)化工具，可以方便壓縮圖片體積、轉(zhuǎn)換圖片格式。
- 智圖：https://zhitu.isux.us/
- squoosh：https://squoosh.app/
歡迎關注作者的微信公眾號：「UI黑客」
「更多圖片壓縮工具推薦」
復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論！每天贏獎品
點擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機派送獎品
2012年成立至今，是國內(nèi)備受歡迎的設計師平臺，提供獎品贊助 聯(lián)系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發(fā)表評論 為下方 8 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓