为什么要关注短视频?
WebP 图片比对应的 JPEG 和 PNG 图片小,通常文件大小会缩减 25-35%。这样可以减小页面大小并提高性能。
- YouTube 发现,改用 WebP 缩略图可使网页加载速度加快 10%。
- 改用 WebP 后,Facebook 将 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
使用 cwebp 的默认压缩设置转换单个文件:
cwebp images/flower.jpg -o images/flower.webp
使用 50
质量级别转换单个文件:
cwebp -q 50 images/flower.jpg -o images/flower.webp
转换某个目录中的所有文件:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
使用 Imagemin
Imagemin WebP 插件可以单独使用,也可以与您喜爱的构建工具(Webpack/Gulp/Grunt/等)搭配使用。这通常需要向 build 脚本或构建工具的配置文件添加大约 10 行代码。以下示例说明了如何为 Webpack、Gulp 和 Grunt 执行此操作。
如果您不使用其中某个构建工具,则可以单独使用 Imagemin 作为 Node 脚本。此脚本将转换 images
目录中的文件并将其保存到 compressed_images
目录中。
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
提供 WebP 图像
如果您的网站仅支持与 WebP 兼容的浏览器,您可以停止阅读。否则,请向较新版浏览器提供 WebP 内容,并为旧版浏览器提供后备图片:
之前:html
<img src="flower.jpg" alt="">
之后:
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
<picture>
、<source>
和 <img>
标记(包括它们相对于彼此的排序方式)都会互动,以实现此最终结果。
<picture>
<picture>
标记可为零个或多个 <source>
标记和一个 <img>
标记提供一个封装容器。
<source>
<source>
标记指定媒体资源。
浏览器会使用列出的第一个来源(采用其支持的格式)。如果浏览器不支持 <source>
标记中列出的任何格式,就会回退到加载 <img>
标记指定的图片。
<img>
<img>
标记使此代码在不支持 <picture>
标记的浏览器上正常运行。如果浏览器不支持 <picture>
标记,就会忽略不支持的标记。因此,它只会“看到”<img src="flower.jpg" alt="">
标记并加载该图片。
读取 HTTP Accept
标头
如果您有一个支持重写请求的应用后端或网络服务器,则可以读取 HTTP Accept
标头的值,此标头将通告支持哪些替代图片格式:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
读取此请求标头并根据其内容重新编写响应有助于简化图片标记。对于许多来源,<picture>
标记可能会很长。以下是可以提供 WebP 替代项的 Apache mod_rewrite
规则:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
如果您采用这种方式,则需要设置 HTTP Vary
响应标头,以确保缓存理解该图片可能会以不同类型的内容类型提供:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
上述重写规则将查找所请求任何 JPEG 或 PNG 图片的 WebP 版本。如果找到了 WebP 备用资源,则会使用正确的 Content-Type
标头对其进行提供。这样,您就可以使用类似于以下内容的图片标记,并获得自动 WebP 支持:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
验证 WebP 使用情况
Lighthouse 可用于验证您网站上的所有图片是否都是使用 WebP 提供的。运行 Lighthouse 性能审核(Lighthouse > 选项 > 性能),并查看以新一代格式提供图片审核的结果。Lighthouse 将列出未在 WebP 中提供的所有图像。