为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

各位设计师在整理个人图库的时候都会有这样的经历,正常jpg和png都可以在Mac的文件夹中显示,但偶尔会遇到无法识别的图片格式,下载后发现无法显示预览图,而且无法打开,Win电脑也是无法打开。以为是图片的扩展名错了,仔细一看,扩展名是.webp,那么webp是什么格式呢?如何在电脑上直接识别预览呢?

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

webp介绍

webp是Google开发的一种支持有损压缩和无损压缩的图片格式(也支持alpha通道,动画)。在相同尺寸下会比jpg、png有更小的体积,同时清晰度也可以保障,所以在网络传输上会比png和jpg更快。

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

常见的图片格式对比

我们先来回顾下工作中常用的图片格式。

UI设计师除了要完成界面设计外,还要给程序员提供页面的图片资源,也就是通常所说的切图。我们经常使用的切图格式有jpg、png、gif动图这几种位图,当然也有svg这种矢量格式图片,以及iconfont解决方案。下面是简单的介绍对比。

jpg-有损压缩,适合画面复杂的照片类图片

png-无损压缩,支持alpha透明,切图首选

gif-动态图片,支持alpha索引透明

Iconfont-代码化、矢量化的前端图标解决方案

svg-矢量图片,体积小不失真

扩展一下,svg其实是支持动图的,惊不惊喜,意不意外?以后UI黑客会分享一下svg动图知识。

随着时代和技术的发展,传统的图片格式慢慢不适用如今的网络环境和用户需求,webp就是一种在体积和视觉表现方面都比较好的格式。不过在浏览器支持这方面,webp还是没法和png、jpg相比,由于是Google开发的,所以自家的Chrome浏览器还是很好支持的。

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

Mac显示webp图片

既然webp有着非常好的优点,所以目前有越来越多的网站使用,比如淘宝就有些图片使用了webp。可是下载到电脑中却无法显示预览。

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

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

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

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

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

所以给大家推荐一个插件:WebP.qlgenerator,属于QuickLook的增强型插件。直接让webp像jpg、png那样正常去看。Win电脑也有对应的方法,后文会有介绍,我们先看下Mac的安装方法。

QuickLook插件安装

1、首先下载插件

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

提取码: p47g

2、移动插件到QuickLook目录

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

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

3、用终端重启QuickLook

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

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

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

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

Win电脑查看webp的方法

Win电脑下webp也是无法直接显示缩略图的,如果不装其他软件,电脑无法识别打开。这里准备了一张鱼腥草的webp图片,无法显示,鱼腥草的味道谁尝过谁知道……

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

其实鱼腥草的花还是挺好看的,想看到它的真面目,我们需要安装Windows WebP 编解码组件(WebP Codec for Windows)。

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

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

提取码: p47g

正常安装即可,不需要重启电脑。安装好就可以看到了,这就是鱼腥草花,挺可爱的。

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

用Win自带的图片查看器看下大图,也是完美展示。

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

webp动图

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

为了让电脑直接识别webp图片,我使用了这款小插件-UI黑客

jpg、png转webp在线工具

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

https://zhitu.isux.us/

https://squoosh.app/