webp是什么格式

webp是google在2010年开发的图片格式，为网页上的图片提供了的无损和有损压缩。web开发人员可以使用webp创建尺寸更小、细节更丰富的图片，从而提高网站的速度。更快的加载速度对于网站的用户体验和网站的营销效果至关重要。

为了在所有设备和用户中达到比较佳的加载效果，您网站上的图片文件大小不应超过500 kb。

相比png图片，webp无损图片通常比png图片至少小25%。在相同的ssim(结构相似性)质量指数下，webp有损图像通常比jpeg图像小25%到34%。

无损webp也支持透明。但是在可以接受有损rgb压缩的情况下，有损webp也支持透明，通常比png文件小三倍。

google报告称，动画gif文件转换为有损webp后文件大小减少了64%，转换为无损webp后文件大小减少了19%。

webp文件格式是基于riff(资源交换文件格式)的文档格式。使用hexdump，您可以看到文件的签名是52 49 46 46(riff):

$ hex dump-canonical pixel . webp 00000000 52 49 46 46 26 00 00 00[.] |riff.webpvp 8 | 00000010 1a 00 00 00 30 01 00 9d[.] |.0.*.| 00000020 0e 25 a4 00 03 70 00 fe [.] |.%.p.`.| 0000002e

独立libwebp库，作为webp技术规范的参考实现，可以从google的git仓库或者tar包中获取。

全80%的浏览器都与webp格式兼容。在写这篇文章的时候，苹果的safari浏览器不兼容。解决这个问题的办法是提供jpg/巴布亚新几内亚的图片和webp图片。有一些方法和wordpress插件可以做到这一点。

为什么要这么做？

我的部分工作是设计和维护我们组织的网站。由于网站是一个营销工具，而网站的速度是衡量用户体验的重要指标，所以我一直致力于提高网站的速度。通过将图片转换成webp来减少图片的大小是一个很好的解决方案。

我用web.dev检测了其中一个网页。该工具由灯塔公司提供，遵循apache 2.0许可证，可在https://github.com/googlechrome/lighthouse.找到

根据它的描述，“灯塔是一个开源的自动化工具，旨在提高网页的质量。您可以在公共或经过身份验证的网页上运行它。它对性能、可用性、渐进式网络应用、搜索引擎优化等进行审计。可以在chrome浏览器的开发工具中运行灯塔，也可以从命令行运行或者作为node模块运行。您输入一个指向灯塔的网址，灯塔将对该网页执行一系列审计，然后生成该网页的审计结果报告。您可以从报告中失败的审计条目中了解如何优化网页。每次审计都有一个相应的文档，解释项目为什么重要以及如何解决它。”

创建一个较小的webp图片

我测试的页面返回了三张图片。在它生成的报告中，它提供了建议和目标。我选择了它来报告650 kb的app-graphic图片。通过转换成webp格式，估计图像大小可以减少到61 kb，节省589 kb。我在photoshop里转换了，用默认的webp设置保存。它的文件大小是44.9kb.比预期的要好！从下面的photoshop截图可以看出，两张图片在视觉质量上是完全相同的。

左：650 kb(实际大小)。右：44.9 kb(转换后的目标大小)。

当然，也可以使用开源图像编辑工具gimp将图像导出到webp。它提供了几个质量和压缩参数：

另一张照片放大后：

png(左图)和webp(右图)都是从jpg转换过来的。对比两张图，可以看出webp不仅文件大小更小，视觉质量也更好。

将图片转换为webp

您还可以使用linux命令行工具将图片从jpg/巴布亚新几内亚转换为webp:

在命令行使用cwebp将png或jpg图片文件转换成webp格式。您可以使用以下命令将png图片文件转换为质量参数为80的webp图片。

cwebp-q80 image.png-o image . webp

您也可以使用image magick，它可以在您的分发仓库中找到。转换的子命令是convert，它需要的所有参数都是输入输出文件：

转换pixel.webp像素

使用编辑器将图片转换为webp

要在图片编辑器中将图片转换为webp，可以使用gimp。从2.10版本开始，它本机支持webp。

如果你是photoshop用户，你需要一个转换插件，因为默认情况下photoshop不包含webp支持。根据apache许可证2.0发布的webpshop 0.2.1是一个用于打开和保存webp图片(包括动画图片)的photoshop模块，可以在https://github.com/webmproject/webpshop.找到

为了正常使用，需要将其放入photoshop插件目录下的bin文件夹中：

windows x64:c : \程序文件\ adobe \ adobe photoshop \插件\webpshop.8bi

mac:应用/adobe photoshop/插件/webpshop.plugin

wordpress上的webp

很多网站都是用wordpress搭建的(我的网站是)。因此，沃

dpress如何上传webp图片？在写这篇文章的时候，并不支持。但是当然也有满足这个需求的插件，所以你可以在你的网站上同时准备webp和png/jpg图片(针对苹果用户)。

马吕斯主持中有以下说明：

“把webp图片直接上传到wordpress会怎么样？很简单。只需在你的主题functions.php文件中添加几行。wordpress默认不支持显示和上传webp文件，但是我将通过几个简单的步骤向您展示如何让它支持。登录到你的wordpress管理员界面，进入“外观/主题编辑器”找到functions.php。复制以下代码，将其粘贴到文件中并保存：

//* * *为webp图像文件启用上载。*/function webp _ upload _ mimes($ existing _ mimes){ $ existing _ mimes[" webp "]=" image/webp "；返回$ existing _ mimes} add _ filter(" mime _ type "，" webp _ upload _ mimes ")；

如果您想在“媒体/媒体库”中查看缩略图预览，您需要将以下代码添加到functions.php文件中。为了找到functions.php文件，进入“外观/主题编辑器”并搜索functions.php，然后复制以下代码，将其粘贴到文件中并保存：

//** *为webp图像文件启用预览/缩略图。*/function webp _ is _ displayed($ result，$ path){ if($ result===false){ $ displayed _ image _ types=array(imagetype _ webp)；$ info=@ getimagesize($ path)；if(empty($ info)){ $ result=false；} elseif(！in_array($info[2]，$ displayed _ image _ types)){ $ result=false；} else { $ result=true} }返回$ result} add _ filter(" file _ is _ displayed _ image "，" webp _ is _ displayable "，10，2)；

"

webp与未来

webp是一种健壮且优化的格式。它看起来更好，有更高的压缩比，并且具有大多数其他常见图片格式的所有特征。不要再等了，现在就用。