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

webp介绍

տ3appwebp 是 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图片

տ3app既然 webp 有着非常好的上海快三安卓app下载—主页-彩经_彩喜欢点,所以目前有越来越多的网站使用,比如淘宝就有些图片使用了 webp。可是下载到电脑中却无法显示预览。

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

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

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

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

QuickLook 插件安装

1. 首先下载插件

网盘链接:http://pan.baidu.com/s/1b23WP_1pbxfvyNH0ekTOQA

提取码:p47g

2. 移动插件到 QuickLook 目录

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

3. 用终端重启QuickLook

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

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

Win电脑查看webp的方法

տ3appWin电脑下 webp 也是无法直接显示缩略图的,如果不装其他软件,电脑无法识别打开。这里准备了一张鱼腥草的 webp图片,无法显示。

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

网盘链接:http://pan.baidu.com/s/1b23WP_1pbxfvyNH0ekTOQA

提取码:p47g

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

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

webp动图

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

jpg、png转webp在线工具

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

欢迎关注作者的微信公众号:「UI黑客」

「更多图片压缩工具推荐」

点赞 1
收藏 26
继续阅读相关文章

发表评论 已发布 8

还可以输入 800 个字
 
 
载入中....
8 收藏