参考谷歌官网:Webp: A new image format for the Web

Webp是Google强推的新一代网络图片格式,特点就是:高质量压缩。
能压缩多少呢?5MB的原图,不降低效果,转换成webp格式后大小是几百KB。100KB的图,转换后是9KB。

虽然目前所有主流浏览器都支持这种图片格式,但不幸的是所有主流系统如Mac、Win等都还没有默认支持打开它的程序,更无法显示它的预览、缩略图。

如果想查看,最简单的方法是把*.webp文件的打开方式设定为Chrome等浏览器,双击打开在浏览器中查看。

还有很多时候我们需要对这种文件进行转换。

Google提供了一组工具集合,叫libwebp,其中包括各种webp相关转换的命令:

  • cwebp -- 将其它图片转为webp格式图片 (不包括GIF)
  • dwebp -- 将webp格式图片转为其它格式图片
  • vwebp -- webp图片浏览器
  • webpmux -- WebP muxing tool
  • gif2webp -- 将GIF转换为webp图片

下载安装参考官网:Downloading and Installing WebP

Ubuntu安装libweb库:

$ sudo apt-get install webp

Mac安装libwebp库:

$ brew install webp

注意:Homebrew安装的webp并不包括上面所有的工具,而只有cwebpdwebp

如果我们想要所有的工具,有两种方法:

  • 到官网找到自己OS对应版本的二进制包,直接运行使用
  • 自己编译

最简单就是到官网下载列表里找到自己的OS对应版本的二进制包,下载下来解压缩直接使用。
官方下载列表:https://storage.googleapis.co...

比如我的系统是Mac 10.12,那么就找到libwebp-0.6.0-mac-10.12.tar.gz这个压缩包下载:

cd /tmp
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0-mac-10.12.tar.gz
tar xvzf libwebp-*.tar.gz cd libweb-*

然后在~/.zshrc~/.bash_profile中的PATH环境变量中加入刚才二进制文件包中的bin目录,或者直接设置alias,即可开始像别的命令开始用了。

如果没有自己所用系统的二进制包,那么就只能自己编译了。每种平台的编译方法不一样,需要按照官网方法一步一步安装。

编译方法参考官方:Compiling the Utilities

将各种图片转换为Webp格式

参考:https://developers.google.com...

目前输入格式支持:png, jpg

$ cwebp INPUT.png -o OUTPUT.webp

将Webp图片转换为其它格式图片

参考:https://developers.google.com...

$ dwebp INPUT.webp -o OUTPUT.png

将GIF转换为Webp格式

参考:https://developers.google.com...

$ gif2webp INPUT.gif -o OUTPUT.webp

浏览webp图片

这个命令不是在命令行终端里浏览图片,而是在桌面上弹出一个GUI窗口显示图片,所以需要依赖本地电脑的GUI桌面。

$ vwebp INPUT.webp

转载:https://segmentfault.com/a/1190000018178569

帮谷歌推广Webp图片格式之:Webp的格式转换相关推荐

  1. java png生成webp图片_PNG转WEBP格式的动态图

    最近接手的项目上需要替换以前的UI资源,其中有部分动态图使用的是freso+webp进行显示,然而设计给的只有一帧帧的PNG格式,本来想随便转个GIF弄上去,结果透明背景的PNG转成GIF很容易出现白 ...

  2. 在Mac上如何将Webp图片转换为jpg、png格式?

    哈喽,各位小伙伴!有时我们下载一张图片,发现后缀是Webp格式的,无法正常拖入PS,这时候怎么办呢? 这里说明一下,WebP是一种现代图像格式,可为Web上的图像提供出色的无损和有损压缩.使用WebP ...

  3. 如何让Ubuntu系统支持WebP图片格式

    如何让Ubuntu系统支持WebP图片格式 本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP ...

  4. 【Android 安装包优化】WebP 图片格式兼容与性能 ( Android 中的 WebP 图片格式兼容问题 | Android 中的 WebP 图片格式性能 )

    文章目录 一.Android 中的 WebP 图片格式兼容问题 二.Android 中的 WebP 图片格式性能 三.参考资料 一.Android 中的 WebP 图片格式兼容问题 在 Android ...

  5. 「前端」webp图片适配流量优化

    本文来自尚妆前端团队南洋 发表于尚妆博客,欢迎订阅. 图片流量优化 刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片.一张图片动辄几十kb,想尽办法优化样式.脚本文件所优化的图片流量其 ...

  6. 「前端」webp图片适配流量优化 1

    本文来自尚妆前端团队南洋 发表于尚妆博客,欢迎订阅. 图片流量优化 刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片.一张图片动辄几十kb,想尽办法优化样式.脚本文件所优化的图片流量其 ...

  7. webp图片适配流量优化

    转自这里写链接内容 图片流量优化 刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片.一张图片动辄几十kb,想尽办法优化样式.脚本文件所优化的图片流量其实还不如一张图片大. 本文从两个角 ...

  8. sdwebimage 加载webp图片

    sdwebimage加载 webp / git  配置宏 - (void)setUpCusPhoto {_scrollView = [UIScrollView new];_scrollView.fra ...

  9. DPG图片压缩技术和webp图片格式

    DPG图片压缩技术和webp图片格式 一.DPG图片压缩技术 京东自主研发推出的DPG图片压缩技术,经测试该技术,可以直接节省用户近50%的浏览量,极大地提升了用户的网页打开的速度.能够兼容JPEG, ...

  10. 什么是WebP图片格式?如何在线把Webp格式转换为JPEG格式?

    我们有时候从互联网上下载图片会发现图片是WebP格式而不是常见的JPEG或者是PNG格式,用自带的图片处理软件无法打开,那么什么是WebP格式呢?我们该如何打开WebP格式的图片文件?需要进行图片处理 ...

最新文章

  1. Sonic 开源移动端云真机测试平台 - 设备中心接入安卓设备实例演示,Agent端服务部署过程详解
  2. WPF 之 线程使用
  3. 《Microsoft Sql server 2008 Internals》读书笔记--第十一章DBCC Internals(11)
  4. 基于live555实现的RTSPServer对底层进行性能优化的方法
  5. java date转sql date_java.util.Date和java.sql.Date转换(转)
  6. python中字符集
  7. CSS选择器的优先级计算
  8. 【长文】在《 Ray Tracing from the Ground Up》的基础上实现BART的动画
  9. MySQL数据库将多条记录的单个字段合并成一条记录(GROUP_CONCAT)
  10. 如何开发一个网页版的SQL查询工具
  11. 频率超出范围黑屏Linux,显示器超出频率限制黑屏怎么解决?显示器超出频率限制黑屏解决方法...
  12. 【Flutter系列】第一期——初识Dart语言
  13. OA会议 04 (查询会议签字)
  14. JavaScript调用pc和手机摄像头
  15. 【柒穆雨】平面设计好不好学?设计小白该如何学习平面设计
  16. c++:警告:warning: catching polymorphic type ‘class std::exception’ by value
  17. 面试官:SPA(单页应用)首屏加载速度慢怎么解决?
  18. 五款经典GPRS无线上网卡比拼
  19. 计算机电源功率高好吗,高额定功率等于高功耗吗?教您如何选择计算机电源
  20. CentOS6.5 安装wine

热门文章

  1. mount的挂载远程服务器文件夹
  2. 揭开 Xxl-job 的神秘面纱
  3. 苹果微信分身版ios_香草直播苹果版下载-香草直播ios苹果版「精彩直播」
  4. mysql基础命令(一)
  5. NLP NLU NLG 简介
  6. Xilinx zynqmp VCU使用
  7. 使用正则表达式在Java中悬挂缩进段落
  8. Unity用户手册-IL2CPP
  9. Java 9:“拼图计划终于给了我们急需的Java安全带”
  10. Netty 的零拷贝