首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端

浏览器相关

前端收藏
其他
关于
公司注册

使用WebP图像格式的完整指南

2019年02月28日 发布 阅读(7367) 作者:Jerman

WebP,或非正式发音为 weppy ,是 Google开发者大约5年前 推出 的 一种图像格式 。 如果您是网页设计师,或者是努力减少和优化图像文件大小的开发人员,那么WebP能够为您带来微笑。

简而言之,以下是您需要了解的有关这种不那么新但仍然很酷的图像格式的一些重要内容:

  • WebP的文件扩展名为.webp。
  • WebP采用有损和无损压缩。
  • WebP有损图像可能 比JPEG小25-34%
  • 与PNG相比, WebP无损图像可能小25%
  • WebP支持无损透明度,即带有alpha通道的PNG。
  • WebP支持动画。 即动画GIF。

简而言之,WebP能够显着降低JPEG,GIF,PNG的图像文件大小。 这里是WebP的复习,你应该在我们进入有趣的东西之前检查一下。

一个实验

关于网络声明的最好的事情是我们总是可以运行实验来检查真实性和真实性。 以下是我做的一些实验,以了解 图像 从各种图像格式(JPEG,PNG和GIF)转换为WebP后可能会有多小

1. JPEG - 有损图像

这是我从 Pexels 抓取的随机JPEG图像 。原始文件大小 - 165kb。**↓

jpeg original
jpeg原创

使用 JpegMini优化图像*新文件大小 - 101kb↓*

jpeg optimized

jpeg优化

最后,相同的图像转换为WebP格式。 *最终文件大小 - 70kb↓*

jpeg webp

jpeg webp

另请注意: 如果将同一图像转换为以下格式,则以下是不同的文件大小:

  • GIF - 285kb
  • PNG 8 - 241.2kb
  • PNG 24 - 657.6kb
2. PNG - 无损图像

现在,让我们尝试透明的PNG。 ( 来源 )。 *原始文件大小 - 587kb↓*

png original

png原创

这是用 tinypng 优化的图像 。 *新文件大小 - 278kb↓*

png optimized

png优化

最后,图像转换为WebP格式。 *最终文件大小 - 112kb↓*

webp format

webp格式

3.动画GIF

转换为WebP时,JPEG图像从165kb变为70kb,而PNG图像从587kb变为112kb。

让我们来看看动画GIF的票价:

摘要:

这是一个总结整个实验的表格:

有损(JPG)无损(PNG)动画,GIF
原版的165KB587KB6.8MB
使用工具进行优化101KB278KB-
WebP格式70KB112KB6.3MB

如果没有大量的数学计算,这些数字表明文件大小大幅减少,从图像来看,你无法真正区分清晰度和分辨率。 较小,较轻的文件大小和相同的图像质量水平,WebP绝对值得研究。

使用工具转换为WebP

如果您已经加入并希望开始以WebP格式发布图像,那么让我们深入了解如何将图像轻松转换为此格式。 下面提到的所有方法在控制,易用性和方便性方面各不相同。 选择你的毒药。

WebPonize for Mac

WebPonize可能是在Mac上将图像转换为WebP格式的最简单,最快捷的方式。 您只需将图像拖放到WebPonize中即可进行转换。 您将收到原始文件的输出,前大小,后大小和减少百分比。 [ 下载WebPonize ]

webponize

webponize

适用 Windows的 Webpconv

如果您正在运行Windows,则Webpconv是您应该安装的应用程序。 它还有便携版本,因此您可以在闪存驱动器上独立运行它。 [ 下载Webconv ]

webpconv

webpconv

使用命令行转换

如果你感觉很怪异,你可能想要使用命令行来执行转换。 cwebp 将您的JPEG,PNG或TIFF图像转换为WebP格式, dwebp 将它们转换回PNG格式。 让我们看看它是如何工作的。

注意: 以下指南适用于Mac OS X.对于Windows和Linux用户, 请单击此处

在Mac OSX上设置MacPorts

首先,确保安装了Xcode,然后按照以下步骤操作:

  1. 下载并安装 MacPorts 。 如果您已在Mac中安装了MacPorts,请继续执行步骤2。
  2. 启动 终端
  3. 输入 “ sudo port selfupdate ”并按Enter键。 这会将您的MacPorts更新到最新版本。

    sudo port selfupdate

    sudo port selfupdate

  4. 接下来,键入“ sudo port install webp ”并按Enter键。 这将安装 libwebpWebP Library )。

    sudo port install webp

    sudo port install webp

而已。 现在让我们看一下 如何使用命令行将图像转换为WebP

要转换/还原的命令

以下是命令:

I - 将JPEG / PNG图像文件转换为WebP格式

格式 :cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

示例

  1. cwebp -q 80 example.png -o example.webp

II - 将WebP图像文件隐藏回PNG

格式 :dwebp [WebP_filename] -o [PNG_filename]

示例

  1. dwebp image.webp -o image.png

更多 :如果您通过其他方式进行转换,则以下是使用 GruntGulp 任务将JPG / PNG文件转换为WebP的说明。

转换为在线工具

如果您不想在操作系统上安装任何应用程序来执行此任务,请选择使用这些在线工具。 以下是我所了解的一些内容:

提示: 如果您使用谷歌 convert webp online ,您可能会找到更多选项。

Photoshop插件

您可能很高兴知道还有一个Photoshop插件允许您通过Photoshop将图像保存为WebP格式。 此插件支持Mac OS X(CS 2- CS 6)和Windows(32位和64位)。 [在 这里 下载插件 。]

注意 :只是认为你应该知道我在Photoshop CC上尝试过它。 没在那里工作。

photoshop plugin

photoshop插件

WebP浏览器支持

最后,我们来谈谈兼容性。 目前,您可以在以下浏览器上查看WebP格式图像( 参考 ):

  • 适用于iOS的Chrome / Chrome
  • Opera / Opera Mini

webp browser support

webp浏览器支持

对于 FireFoxSafari来说 , 运气并不是那么幸运 ,它本身仍然不支持WebP格式。 但是,您可以使用 WebPJS Javascript库 将WebP图像转换为客户端站点上的dataURI字符串

回归到其他图像格式

使用回退以避免因不受支持的浏览器而出现图像错误总是一个好主意。 在这种情况下,后备将是JPG或PNG格式的图像。 这是你如何做到的。

  1. <picture>
  2. <source srcset="example.webp 1x" type="image/webp">
  3. <img src="example.jpg" >
  4. </picture>

对于此代码, 如果用户使用Firefox或Safari , 将加载 example.jpg

预览WebP图像

您可以在Chrome和Opera浏览器上预览WebP图像。 但是如果你想在你的机器上本地进行,你需要一些工具。

Mac用户可以使用 WebPQuickLook 使用“快速查看”功能预览WebP格式图像(选择或突出显示图像,按空格键)。

WebPQuickLook

WebPQuickLook

对于Windows用户, WebPCodec 将在文件资源管理器中显示WebP图像的缩略图预览。 将显示WebP和JPEG等效项。 在某些受支持的Window OS(Vista,7,8)上,WebP图像也可以显示在Windows Photo Viewer上。

WebPCodec

WebPCodec

更多: ReSCR.it 自动提供中的WebP格式的图片,如果你存储与您的图像它的可用 MaxCDN 。 ( 了解更多

参考

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处
  • 前端项目websocket报错: VM57973 sockjs.min.js:2 Uncaught Error: Incompatible SockJS! Main site uses: "1.4.0", the iframe: "1.5.0".

    VM57973 sockjs.min.js:2 Uncaught Error: Incompatible SockJS! Main site uses: "1.4.0", the iframe: "1.5.0".

    发布:2020-12-23 阅读(4218)

  • Cookie 的 SameSite 属性

    Chrome 51 开始,浏览器的 Cookie 新增加了一个`SameSite`属性,用来防止 CSRF 攻击和用户追踪。

    发布:2020-04-21 阅读(2223)

  • serviceworker运用与实践

    本文首先会简单介绍下前端的常见缓存方式,再引入serviceworker的概念,针对其原理和如何运用进行介绍。然后基于google推出的第三方库workbox,在产品中进行运用实践,并对其原理进行简要剖析。

    发布:2020-04-14 阅读(6881)

  • 深入理解浏览器的缓存机制

    缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。

    发布:2019-10-31 阅读(2368)

  • TCP慢启动,拥塞控制,ECN 笔记

    TCP在连接过程的三次握手完成后,开始传数据,并不是一开始向网络通道中发送大量的数据包,这样很容易导致网络中路由器缓存空间耗尽,从而发生拥塞;而是根据初始的cwnd大小逐步增加发送的数据量,cwnd初始化为1个最大报文段(MSS)大小(**这个值可配置不一定是1个MSS**);每当有一个报文段被确认,cwnd大小指数增长。

    发布:2019-10-12 阅读(2352)

  • 成为高手前必懂的TCP干货

    我们在平时的开发过程中,或多或少都会涉猎到网络传输这块。 这篇文章,主要是整理一下 TCP 的一些知识要点,作为一名开发者来说,尽管有那么多的基础设施(框架、组件)帮我们屏蔽了这些细节。当我仍然认为了解它的一些基本原理必有些裨益,尤其是当你在分布式环境上遇到一些棘手问题时,一些原理性的知识可能会让你快速找到答案。

    发布:2019-05-29 阅读(2407)

  • Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级

    发布:2019-05-23 阅读(3028)

  • 使用WebP图像格式的完整指南

    WebP,或非正式发音为 weppy ,是 Google开发者大约5年前推出的 一种图像格式 。

    发布:2019-02-28 阅读(7367)

  • Life of a Pixel,让你更透彻知道浏览器是如何工作

    感谢Google巢鹏的提供的内容分享。Life of a Pixel这个演讲一开始是Chrome组新人入职的学习资料,给新人一个从高层次去看Chromium如何从HTML / CSS / JS 显示到屏幕的网页。这个演讲一直在更新,所以大家可以通过看这个演讲更新自己对Chromium的理解。

    发布:2018-12-06 来源:mp.weixin.qq.com

  • chrome浏览器忽略证书报错

    本地测试时,简易忽略chrome浏览器的证书问题

    发布:2018-11-13 阅读(3578)

  • http请求的完整过程

    http请求的完整过程

    发布:2018-10-13 阅读(1970)

  • IE6/7浏览器兼容querySelectorAll、 querySelector

    IE6/7浏览器兼容querySelectorAll、 querySelector

    发布:2016-05-28 阅读(2763)

  • 关于Preload, 你应该知道些什么?

    preload作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制。Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失。

    发布:2016-05-23 阅读(1813)

  • 网站前后端性能优化的34条经验方法

    网站前后端性能优化的34条经验方法

    发布:2014-08-22 阅读(2132)

  • [WEB安全]什么是XSRF?如何防范XSRF攻击!

    CSRF(Cross-site request forgery跨站请求伪造,也被称成为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用。尽管听起来像跨站脚本(XSS),但它与XSS非常不同,并且攻击方式几乎相 左。XSS利用站点内的信任用户,而XSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比,XSRF攻击往往不大流行(因此对其 进行防范的资源也相当稀少)和难以防范,所以被认为比XSS更具危险性

    发布:2013-04-11 阅读(2209)

  • http常用状态码

    http常用状态码

    发布:2013-02-15 阅读(2519)