为了让电脑直接识别webp图片,我使用了这款小插件 - 优设网 - UISDC

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

2019/01/16 10966评论 7

各位设计师在整理个人图库的时候都会有这样的经历,正常 jpg 和 png 都可以在 Mac 的文件夹中显示,但偶尔会遇到无法识别的图片格式,下载后发现无法显示预览图,而且无法打开,Win电脑也是无法打开。以为是图片的扩展名错了,仔细一看,扩展名是.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 有着非常好的优点,所以目前有越来越多的网站使用,比如淘宝就有些图片使用了 webp。可是下载到电脑中却无法显示预览。

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

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

不过,作为一名追求工作效率的 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,依次选择:前往 – 前往文件夹 – 粘贴路径后回车,然后把下载的插件复制到这个目录,这时候会提示输入你的电脑密码。

3. 用终端重启QuickLook

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

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

Win电脑查看webp的方法

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

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

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

提取码:p47g

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

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

webp动图

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

jpg、png转webp在线工具

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

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/identify-webp-images

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 交互设计师 优设专访 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 海报设计 用户体验设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里