系统已经为您安装 webp 命令行工具,您可以开始使用了。此工具可将 JPG、PNG 和 TIFF 图片转换为 WebP 图片。
将图片转换为 WebP 格式
- 点击 Remix to Edit 使项目可修改。
- 点击终端(注意:如果“终端”按钮未显示,您可能需要使用“全屏”选项)。
- 输入以下命令:
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 图片的浏览器提供 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>
- 接下来,将
flower2.jpg
和flower3.png
的<img>
标记替换为<picture>
标记。
✔︎ 入住
完成后,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 的以新一代格式提供图片性能审核,您可以了解您网站上的所有图片是否均使用 WebP 等新一代格式。
- 如需预览网站,请按查看应用,然后按全屏 。
- 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保已选中类别列表中的效果复选框。
- 点击生成报告按钮。
- 验证已通过以新一代格式提供图片的审核。
成功!现在,您在网站上提供 WebP 图片。