使用WebP图像格式的完整指南
WebP，或非官方发音为weppy ，是大约5年前由Google Developers 推出的图像格式。 如果您是网站设计师，或者是致力于减少和优化图像文件大小的开发人员，则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。 ↓
使用JpegMini可以优化图像 。 新文件大小 – 101kb 。 ↓
最后，将同一图像转换为WebP格式。 最终文件大小 – 70kb 。 ↓
附带说明：如果将同一图像转换为以下格式，则这是不同的文件大小：
- GIF – 285kb
- PNG 8 – 241.2kb
- PNG 24 – 657.6kb
2. PNG –无损图像
现在，让我们尝试使用具有透明度的PNG。 （ 来源 ）。 原始文件大小 – 587kb 。 ↓
这是使用tinypng优化的图像。 新文件大小 – 278kb 。 ↓
最后，图像转换为WebP格式。 最终文件大小 – 112kb 。 ↓
3.动画GIF
转换为WebP时，JPEG图像从165kb变为70kb，而PNG图像从587kb变为112kb。
让我们看看动画GIF的票价如何：
摘要：
下表总结了整个实验：
| 有损（JPG） | 无损（PNG） | GIF动画 | |
| 原版的 | 165kb的 | 587kb | 6.8兆字节 |
| 使用工具进行了优化 | 101kb | 278kb | – |
| WebP格式 | 70kb | 112kb | 6.3兆字节 |
如果不花太多时间进行数学计算，这些数字表明文件大小会大大减少，从图像来看，您无法真正分辨出清晰度和分辨率方面的差异。 在具有相同图像质量水平的情况下，文件更小，更轻，WebP绝对值得研究。
使用工具转换为WebP
如果您已经开始使用WebP格式的图像，那么让我们深入研究如何将图像轻松转换为这种格式。 下面提到的所有方法在控件，易用性和便利性方面都各不相同。 选择你的毒药。
适用于 Mac的WebPonize
WebPonize可能是在Mac上将图像转换为WebP格式的最简单，最快的方法。 您只需要将图像拖放到WebPonize中即可完成转换。 您将收到输出，原始文件的大小前，大小后和缩小百分比。 [ 下载WebPonize ]
Webpconv 为 Windows
如果您正在运行Windows，则应安装Webpconv应用程序。 它还具有便携式版本，因此您可以在闪存驱动器上独立运行它。 [ 下载Webconv ]
使用命令行转换
如果您感到怪异，则可能需要使用命令行来执行转换。 cwebp将JPEG，PNG或TIFF图像转换为WebP格式，而dwebp将其转换回PNG格式。 让我们看看它是如何工作的。
注意：以下内容适用于Mac OSX。对于Windows和Linux用户， 请单击此处 。
在Mac OSX上设置MacPorts
首先，请确保您已安装Xcode，然后执行以下步骤：
- 下载并安装MacPorts 。 如果您的Mac中已经安装了MacPorts，请继续执行步骤2。
- 启动终端 。
- 输入“ sudo port selfupdate ”，然后按Enter。 这会将MacPorts更新到最新版本。
- 接下来，键入“ sudo port install webp ”，然后按Enter。 这将安装libwebp （ WebP库 ）。
而已。 现在让我们看一下如何使用命令行将图像转换为WebP 。
转换/还原命令
以下是命令：
I –将JPEG / PNG图像文件转换为WebP格式
格式 ：cwebp -q [图像质量] [JPEG / PNG_文件名] -o [WebP_文件名]
范例 ：
cwebp -q 80 example.png -o example.webp
II –隐藏WebP图像文件回到PNG
格式 ：dwebp [WebP文件名] -o [PNG文件名]
范例 ：
dwebp image.webp -o image.png
更多 ：如果您通过其他方式进行转换，这是使用Grunt和Gulp任务将JPG / PNG文件转换为WebP的说明。
使用在线工具进行转换
如果您不想在操作系统上安装任何应用程序来执行此任务，请选择这些联机工具。 以下是我认识的一些内容：
提示：如果您通过google convert webp online ，则可能会找到更多选项。
Photoshop插件
您可能很高兴知道，还有一个Photoshop插件，可让您通过Photoshop将图像保存为WebP格式。 此插件支持Mac OS X（CS 2-CS 6）和Windows（32位和64位）。 [在此处下载插件。]
注意 ：只是以为您应该知道我在Photoshop CC上进行了尝试。 没有在那里工作。
WebP浏览器支持
最后，让我们谈谈兼容性。 当前，您可以在以下浏览器（ ref ）上查看WebP格式的图像：
- Chrome / Chrome for iOS
- Opera / Opera Mini
对于FireFox和Safari来说运气不佳，后者仍然不支持WebP格式。 但是，您可以使用WebPJS Javascript库在客户端站点上将WebP图像转换为dataURI字符串 。
退回到其他图像格式
最好使用后备以避免显示由于不支持的浏览器而导致的图像错误。 在这种情况下，后备将以JPG或PNG格式出现在图像上。 这是您的操作方式。
<picture> source srcset="example.webp 1x" type="image/webp"> <img src="example.jpg"> </picture>
对于此代码，如果用户使用Firefox或Safari，则将加载example.jpg 。
预览WebP图像
您可以在Chrome和Opera浏览器上预览WebP图像。 但是，如果要在计算机上本地进行操作，则需要一些工具。
Mac用户可以使用WebPQuickLook通过“快速查找”功能预览WebP格式的图像（选中或突出显示图像后，按空格键）。
对于Windows用户， WebPCodec将在文件资源管理器中显示WebP图像的缩略图预览。 将同时显示WebP和JPEG等效项。 在某些受支持的Window OS（Vista，7、8）上，WebP图像也可以显示在Windows Photo Viewer上。
更多： ReSCR.it自动提供中的WebP格式的图片，如果你存储与您的图像它的可用MaxCDN 。 （ 阅读更多 ）