之前看到一个不错的界面，下载后发现无法显示预览图，以为是图片的扩展名错了，仔细一看，扩展名是.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浏览器还是很好支持的。

Mac显示webp图片

既然webp有着非常好的优点，所以目前有越来越多的网站使用。可是下载到电脑中却无法显示预览。尤其是Mac电脑。

很多时候我们直接按空格键，使用QuickLook就可以预览很多格式的文件。比如查看PSD文件，不需要打开PS，直接按空格就可以查看。同样的PDF、PPT、Word都可以直接预览。这样的操作有个传神的名字：一指禅。

但是预览webp就不行了。只能把webp图片拖动到Chrome浏览器里面去查看。

不过，作为一名追求工作效率的UI设计师，我可忍受不了把webp图片拖到Chrome去查看这种复杂糟糕的体验。

所以给大家推荐一个插件：WebP.qlgenerator，属于QuickLook的增强型插件。直接让webp像jpg、png那样正常去看。

QuickLook插件安装

1、首先下载插件

百度云盘链接:https://pan.baidu.com/s/1YQuVAgu7mx5YtkCX3a4y8w

提取码: ncbj

2、移动插件到QuickLook目录

复制路径/Library/QuickLook，打开Finder，依次选择：前往-前往文件夹-粘贴路径后回车，然后把下载的插件复制到这个目录，这时候会提示输入你的电脑密码。

3、用终端重启QuickLook

打开终端（Terminal），输入qlmanage -r并回车，之后出现resetting quicklookd提示就可以。

我们再看看刚才无法预览的webp图片，已经可以预览了。

webp动图

webp是支持动态图像的，体积相比gif也会小很多，但是目前这个插件还无法直接识别webp动图，只支持静态图片预览。后期如果有更简单的查看webp动图方法UI黑客会及时分享。不过webp动图目前遇到的非常少，新技术的推广需要时间。

Win电脑查看webp的方法

Win电脑下webp也是无法直接显示缩略图的，使用Win的同学可以安装Windows WebP 编解码组件https://www.cr173.com/soft/72994.html

jpg、png转webp在线工具

最后，推荐两个在线webp转化工具，可以方便压缩图片体积、转换图片格式。

https://zhitu.isux.us/

https://squoosh.app/

---

更多UI设计干货文章请关注UI黑客

微信公众号 uihacker

UI黑客官网http://www.uihacker.com/

UI黑客论坛http://bbs.uihacker.com/

---