seo图片格局_线上图片请抛弃 PNG 和 JPG运用 WebP Linux 中国

理解一下这个开源的图片编辑工具来节省韶光和空间。

WebP 是 2010 年 Google 开拓的一种图片格式，它为网页上的图片供应了卓越的无损和有损压缩。
网站开拓者们可以利用 WebP 来创建尺寸更小、细节更丰富的图片，以此来提高网站的速率。
更快的加载速率对付网站的用户体验和网站的营销效果是至关主要的。

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

与 PNG 图片比较，WebP 无损图片常日至少要比 PNG 图片小 25%。
在同等的 SSIM（ 构造相似度(structural similarity)）质量指标下，WebP 有损图片常日比 JPEG 图片小 25% 到 34%。

无损 WebP 也支持透明度。
而在可接管有损 RGB 压缩的情形下，有损 WebP 也支持透明度，常日其大小比 PNG 文件小三倍。

Google 报告称，把动画 GIF 文件转换为有损 WebP 后文件大小减少了 64%，转换为无损 WebP 后文件大小减少了 19%。

WebP 文件格式是一种基于 RIFF（ 资源互换文件格式(resource interchange file format)）的文档格式。
你可以用 hexdump 看到文件的署名是 52 49 46 46（RIFF）：

$ hexdump --canonical pixel.webp00000000 52 49 46 46 26 00 00 00 [...] |RIFF&...WEBPVP8 |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% 的 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，它会对这个网页进行一系列的审计，然后天生这个网页的审计结果报告。
从报告的失落败审计条款中可以知道该当怎么优化网页。
每条审计都有对应的文档阐明为什么该项目是主要的，以及如何修复它。
”

我测试的页面返回了三张图片。
在它天生的报告中，它供应了推举和目标。
我选择了它报告有 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 不仅在文件大小更小，在视觉质量上也更精良。

你也可以用 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 Files\Adobe\Adobe Photoshop\Plug-ins\WebPShop.8bi

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

很多网站是用 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');

如果你想在‘媒体/媒体库’时看到缩略图预览，那么你须要把下面的代码也添加到 functions.php 文件。
为了找到 functions.php 文件，进入‘外不雅观/主题编辑器’并搜索 functions.php，然后复制下面的代码粘贴到文件末了并保存：

// Enable preview / thumbnail for webp image files./function webp_is_displayable($result, $path) { if ($result === false) { $displayable_image_types = array( IMAGETYPE_WEBP ); $info = @getimagesize( $path ); if (empty($info)) { $result = false; } elseif (!in_array($info[2], $displayable_image_types)) { $result = false; } else { $result = true; } } return $result;}add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

”

WebP 是一个健壮而优化的格式。
它看起来更好，压缩率更高，并具有其他大部分常见图片格式的所有特性。
不必再等了，现在就利用它吧。

via: https://opensource.com/article/20/4/webp-image-compression

作者： Jeff Macharyas 选题： lujun9972 译者： lxbwolf 校正： wxy

本文由 LCTT 原创编译， Linux中国 名誉推出