之前看到一個(gè)不錯(cuò)的界面嵌洼，下載后發(fā)現(xiàn)無法顯示預(yù)覽圖案疲，以為是圖片的擴(kuò)展名錯(cuò)了，仔細(xì)一看麻养，擴(kuò)展名是.webp褐啡，那么webp是什么格式呢？如何在電腦上直接識(shí)別預(yù)覽呢回溺？
webp介紹
webp是Google開發(fā)的一種支持有損壓縮和無損壓縮的圖片格式（也支持alpha通道春贸，動(dòng)畫）混萝。在相同尺寸下會(huì)比jpg遗遵、png有更小的體積，同時(shí)清晰度也可以保障逸嘀，所以在網(wǎng)絡(luò)傳輸上會(huì)比png和jpg更快车要。
常見的圖片格式對(duì)比
我們先來回顧下工作中常用的圖片格式。
UI設(shè)計(jì)師除了要完成界面設(shè)計(jì)外崭倘，還要給程序員提供頁面的圖片資源翼岁，也就是通常所說的切圖。我們經(jīng)常使用的切圖格式有jpg司光、png琅坡、gif動(dòng)圖這幾種位圖，當(dāng)然也有svg這種矢量格式圖片残家，以及iconfont解決方案榆俺。下面是簡(jiǎn)單的介紹對(duì)比。
jpg-有損壓縮坞淮，適合畫面復(fù)雜的照片類圖片
png-無損壓縮茴晋，支持alpha透明，切圖首選
gif-動(dòng)態(tài)圖片回窘，支持alpha索引透明
Iconfont-代碼化诺擅、矢量化的前端圖標(biāo)解決方案
svg-矢量圖片，體積小不失真
擴(kuò)展一下啡直，svg其實(shí)是支持動(dòng)圖的烁涌，驚不驚喜苍碟，意不意外？以后UI黑客會(huì)分享一下svg動(dòng)圖知識(shí)撮执。
隨著時(shí)代和技術(shù)的發(fā)展驰怎，傳統(tǒng)的圖片格式慢慢不適用如今的網(wǎng)絡(luò)環(huán)境和用戶需求，webp就是一種在體積和視覺表現(xiàn)方面都比較好的格式二打。不過在瀏覽器支持這方面县忌，webp還是沒法和png、jpg相比继效，由于是Google開發(fā)的症杏，所以自家的Chrome瀏覽器還是很好支持的。
Mac顯示webp圖片
既然webp有著非常好的優(yōu)點(diǎn)瑞信，所以目前有越來越多的網(wǎng)站使用厉颤。可是下載到電腦中卻無法顯示預(yù)覽凡简。尤其是Mac電腦逼友。
很多時(shí)候我們直接按空格鍵，使用QuickLook就可以預(yù)覽很多格式的文件秤涩。比如查看PSD文件帜乞，不需要打開PS，直接按空格就可以查看筐眷。同樣的PDF黎烈、PPT、Word都可以直接預(yù)覽匀谣。這樣的操作有個(gè)傳神的名字：一指禪照棋。
但是預(yù)覽webp就不行了。只能把webp圖片拖動(dòng)到Chrome瀏覽器里面去查看武翎。
不過烈炭，作為一名追求工作效率的UI設(shè)計(jì)師，我可忍受不了把webp圖片拖到Chrome去查看這種復(fù)雜糟糕的體驗(yàn)宝恶。
所以給大家推薦一個(gè)插件：WebP.qlgenerator符隙，屬于QuickLook的增強(qiáng)型插件。直接讓webp像jpg卑惜、png那樣正常去看膏执。
QuickLook插件安裝
1、首先下載插件
百度云盤鏈接:https://pan.baidu.com/s/1YQuVAgu7mx5YtkCX3a4y8w
提取碼: ncbj
2露久、移動(dòng)插件到QuickLook目錄
復(fù)制路徑/Library/QuickLook更米，打開Finder，依次選擇：前往-前往文件夾-粘貼路徑后回車毫痕，然后把下載的插件復(fù)制到這個(gè)目錄征峦，這時(shí)候會(huì)提示輸入你的電腦密碼迟几。
3、用終端重啟QuickLook
打開終端（Terminal）栏笆，輸入qlmanage -r并回車类腮，之后出現(xiàn)resetting quicklookd提示就可以。
我們?cè)倏纯磩偛艧o法預(yù)覽的webp圖片蛉加，已經(jīng)可以預(yù)覽了蚜枢。
webp動(dòng)圖
webp是支持動(dòng)態(tài)圖像的，體積相比gif也會(huì)小很多针饥，但是目前這個(gè)插件還無法直接識(shí)別webp動(dòng)圖厂抽，只支持靜態(tài)圖片預(yù)覽。后期如果有更簡(jiǎn)單的查看webp動(dòng)圖方法UI黑客會(huì)及時(shí)分享丁眼。不過webp動(dòng)圖目前遇到的非常少筷凤，新技術(shù)的推廣需要時(shí)間。
Win電腦查看webp的方法
Win電腦下webp也是無法直接顯示縮略圖的苞七，使用Win的同學(xué)可以安裝Windows WebP 編解碼組件https://www.cr173.com/soft/72994.html
jpg藐守、png轉(zhuǎn)webp在線工具
最后，推薦兩個(gè)在線webp轉(zhuǎn)化工具蹂风，可以方便壓縮圖片體積卢厂、轉(zhuǎn)換圖片格式。
更多UI設(shè)計(jì)干貨文章請(qǐng)關(guān)注UI黑客
微信公眾號(hào) uihacker
UI黑客官網(wǎng)http://www.uihacker.com/
UI黑客論壇http://bbs.uihacker.com/
