使用 WebP 图像格式的完整指南 - 文章教程

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

发布于 2020-12-17 字数 13754 浏览 1075 评论 0

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

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

  • 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

3.动画GIF

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

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

摘要:

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

有损(JPG) 无损(PNG) 动画,GIF
原版的 165KB 587KB 6.8MB
使用工具进行优化 101KB 278KB
WebP格式 70KB 112KB 6.3MB

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

使用工具转换为WebP

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

WebPonize for Mac

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

webponize

 

适用 Windows的 Webpconv

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

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

 

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

sudo port install webp

 

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

要转换/还原的命令

以下是命令:

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

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

示例cwebp -q 80 example.png -o example.webp

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

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

示例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

 

WebP浏览器支持

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

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

webp browser support

 

对于 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

 

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

WebPCodec

 

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

参考

原文:https://www.imqianduan.com/browser/webp.html

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0