使用命令行创建 WebP 图片

已经为您安装了 webp 命令行工具,您可以立即开始使用。此工具可以将 JPG、PNG 和 TIFF 图片转换为 WebP 格式。

将图片转换为 WebP #

  1. Click Remix to Edit to make the project editable. 1. Click Tools.

  2. Click Logs.

  3. Click Console.

  4. 输入以下命令:

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

此命令以 50 的质量(0 最差;100 最佳)转换 images/flower1.jpg 文件并将其保存为 images/flower1.webp

执行此操作后,您应该在控制台中看到如下内容:

Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |

您刚刚成功将图片转换为 WebP。

但是,像这样一次对一张图片运行 cwebp 命令,转换许多图片将需要很长时间。如果您需要这样做,您可以改为使用脚本。

  • 在控制台中运行此脚本(不要忘记反撇号):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

此脚本以 50 的质量转换 images/ 目录中的所有文件,并将它们保存为同一目录中的新文件(文件名相同,但文件扩展名为 .webp)。

✔︎ 签入 #

您的 images/ 目录中现在应该有 6 个文件:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

接下来,更新此 Glitch,向支持它的浏览器提供 WebP 图片。

使用 <picture> 标签添加 WebP 图片 #

利用 <picture> 标签可向较新的浏览器提供 WebP,同时保持对旧浏览器的支持。

  • index.html 中将 <img src="images/flower1.jpg"/> 替换为下列 HTML:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
  • 接下来,使用 <picture> 标记替换 flower2.jpgflower3.png<img> 标记。

✔︎ 签入 #

完成后,index.html<picture> 标签应如下所示:

<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower2.webp">
<source type="image/jpeg" srcset="images/flower2.jpg">
<img src="images/flower2.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower3.webp">
<source type="image/png" srcset="images/flower3.png">
<img src="images/flower3.png">
</picture>

接下来,使用 Lighthouse 验证您是否在站点上正确地实施了 WebP 图片。

利用 Lighthouse 验证 WebP 使用情况 #

利用 Lighthouse 的 Serve images in next-gen formats(以下一代格式提供图片)性能审计可以了解是否站点上的所有图片都在使用诸如 WebP 的下一代格式。

  1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  2. Click the Lighthouse tab.

  3. Make sure the Performance checkbox is selected in the Categories list.

  4. Click the Generate report button.

  5. 验证是否通过了以下一代格式提供图片审计。

在 Lighthouse 中通过'以下一代格式提供图片'审计

成功!现在,您在站点上提供的便是 WebP 图片。

Last updated: Improve article