线上图片请丢弃 PNG 和 JPG：行使 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）：

$ hexdump--canonical pixel.webp00000000  5249464626000000  [...]  |RIFF&...WEBPVP8 |00000010  1a0000003001009d  [...]  |....0....*......|00000020  0e25 a4 00037000 fe  [...]  |.%...p...`....|0000002e

独立的 libwebp 库作为 WebP 技能类型的参考实现，可以从 Google 的 Git 客栈 或 tar 包中得到。

环球在用的 80% 的 web 赏识器兼容 WebP 名目。本文撰写时，Apple 的 Safari 赏识器还不兼容。办理这个题目的要领是将 JPG/PNG 图片与 WebP 图片一路提供，有一些要领和 WordPress 插件可以做到这一点。

为什么要这样做？

我的部门事变是计划和维护我们组织的网站。因为网站是个营销器材，而网站的速率是权衡用户体验的重要指标，我一向致力于进步网站速率，通过把图片转换为 WebP 来镌汰图片巨细是一个很好的办理方案。

我行使了 web.dev 来检测个中一个网页，该器材是由 Lighthouse 提供处事的，遵循 Apache 2.0 容许证，可以在 https://github.com/GoogleChrome/lighthouse 找到。

据其官方描写，“LIghthouse 是一个开源的，旨在晋升网页质量的自动化器材。你可以在任何民众的或必要鉴权的网页上运行它。它有机能、可用性、渐进式 web 应用、SEO 等方面的审计。你可以在 Chrome 赏识器的开拓器材中运行 Lighthouse，也可以通过呼吁行或作为 Node 模块运行。你输入一个 URL 给 Lighthouse，它会对这个网页举办一系列的审计，然后天生这个网页的审计功效陈诉。从陈诉的失败审计条目中可以知道应该怎么优化网页。每条审计都有对应的文档表明为什么该项目是重要的，以及怎样修复它。”

建设更小的 WebP 图片

我测试的页面返回了三张图片。在它天生的陈诉中，它提供了保举和方针。我选择了它陈诉有 650 KB 的 app-graphic 图片。通过把它转换为 WebP 名目，估量可以把图片巨细降到 61 KB，节减 589 KB。我在 Photoshop 中把它转换了，用默认的 WebP 配置参数生涯它，它的文件巨细为 44.9 KB。比预期的还要好！从下面的 Photoshop 截图中可以看出，两张图在视觉质量上完全一样。

左图：650 KB（现实巨细）。右图： 44.9 KB（转换之后的方针巨细）。

虽然，也可以用开源图片编辑器材 GIMP 把图片导出为 WebP。它提供了几个质量和压缩的参数：

另一张图放大后：

PNG（左图）和 WebP（右图），都是从 JPG 转换而来，两图比拟可以看出 WebP 不只在文件巨细更小，在视觉质量上也更优越。

把图片转换为 WebP

你也可以用 Linux 的呼吁行器材把图片从 JPG/PNG 转换为 WebP：

在呼吁行行使 cwebp 把 PNG 或 JPG 图片文件转换为 WebP 名目。你可以用下面的呼吁把 PNG 图片文件转换为质量参数为 80 的 WebP 图片。

cwebp -q 80 image.png -o image.webp

你还可以用 Image Magick，这个器材也许在你的刊行版本软件客栈中可以找到。转换的子呼吁是 convert，它必要的全部参数就是输入和输出文件：

convert pixel.png pixel.webp

行使编辑器把图片转换为 WebP

要在图片编辑器中来把图片转换为 WebP，可以行使 GIMP。从 2.10 版本开始，它原生地支持 WebP。

假如你是 Photoshop 用户，因为 Photoshop 默认不包括 WebP 支持，因此你必要一个转换插件。遵循 Apache License 2.0 容许证宣布的 WebPShop 0.2.1 是一个用于打开和生涯包罗动绘图在内的 WebP 图片的 Photoshop 模块，在 https://github.com/webmproject/WebPShop 可以找到。

为了能正常行使它，你必要把它放进 Photoshop 插件目次下的 bin 文件夹：

Windows x64 ：C:Program FilesAdobeAdobe PhotoshopPlug-insWebPShop.8bi

Mac：Applications/Adobe Photoshop/Plug-ins/WebPShop.plugin

WordPress 上的 WebP

许多网站是用 WordPress 搭建的（我的网站就是）。因此，Wordpress 怎么上传 WebP 图片？本文撰写时，它还不支持。可是，虽然已经有插件来满意这种需求，因此你可以在你的网站上同时筹备 WebP 和 PNG/JPG 图片（为 Apple 用户）。

在 Marius Hosting 有下面的声名：

“直接向 WordPress 上传 WebP 图片会奈何？这很简朴。向你的主题 functions.php 文件添加几行内容就可以了。Wordpress 默认不支持展示和上传 WebP 文件，可是我会向你先容一下怎么通过几个简朴的步调来让它支持。登录进你的 WordPress 打点员界面，进入‘外面/主题编辑器’找到 functions.php。复制下面的代码粘贴到该文件最后并生涯：

//** *Enable upload for webp image files.*/function webp_upload_mimes($existing_mimes){    $existing_mimes['webp']='image/webp';return $existing_mimes;}add_filter('mime_types','webp_upload_mimes');

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!