WebP:现代化图片格式,显著提升站点加载效率
WebP 图片比 JPEG 和 PNG 图片小,通常文件大小会缩减 25-35%。这有助于缩减页面大小并提高性能。
- YouTube 发现,改用 WebP 缩略图后,网页加载速度提高了 10%。
- 当 Facebook 改用 WebP 后,JPEG 文件的文件大小缩减了 25-35%,PNG 文件的文件大小缩减了 80%。
WebP 是 JPEG、PNG 和 GIF 图片的绝佳替代品。此外,WebP 还提供无损和有损压缩。在无损压缩中,不会丢失任何数据。有损压缩可缩减文件大小,但可能会降低图片质量。
将图片转换为 WebP 格式
用户通常使用以下方法之一将图片转换为 WebP:cwebp
命令行工具或 Imagemin WebP 插件 (npm 软件包)。如果您的项目使用构建脚本或构建工具(例如 Webpack 或 Gulp),Imagemin WebP 插件通常是最佳选择;如果您的项目是小型项目,或者您只需要转换一次图片,则 CLI 是一个不错的选择。
将图片转换为 WebP 时,您可以选择各种压缩设置,但对于大多数人来说,只需关心质量设置即可。您可以指定质量等级,范围为 0(最差)到 100(最好)。不妨多试试,找出在图片质量和文件大小之间哪个级别最适合您的需求。
使用 cwebp
将图片转换为 WebP 格式
使用默认压缩设置转换单个文件
cwebp image.png -o image.webp
使用质量等级 80 转换单个文件
cwebp -q 80 image.png -o image.webp
转换目录中的所有文件
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
使用 dwebp
将图片转换为 WebP 格式
dwebp image.webp -o image.png
使用 WebP 图片
<img alt="Example Text" src="https://example.com/image.webp">
验证你的站点加载速度
页面速度洞察(分析)。这是谷歌提供的一项用于分析网页性能的工具,主要关注网页的加载速度等多方面性能指标,并给出优化建议等。