WebP
WebP是Google最近推出的一种图像格式，旨在以可接受的视觉质量提供较低文件大小的无损和有损压缩。它包括对alpha通道透明度和动画的支持。
在去年，WebP在有损和无损模式下比压缩方式增加了几个百分点，而速度方面，算法速度提高了一倍，解压缩了提升10％。
image
WebP如何运行
- 有损压缩
使用VP8或VP9视频关键帧编码变体的WebP有损文件，平均比JPEG文件小25-34％。
在低质量范围（0-50）中，WebP相对于JPEG具有很大优势，因为它可以消除丑陋的块状伪影。中等质量设置（-m 4 -q 75）是默认的平衡速度/文件大小。在更高的范围内（80-99），WebP的优势在缩小。 WebP被推荐在速度比质量更重要的地方
(WebP有损品质设置不能直接与JPEG比较。 “70％质量”的JPEG与“70％质量”的WebP图像是完全不同的，因为WebP通过丢弃更多数据来实现更小的文件大小。)
-
无损压缩
WebP无损文件比PNG文件小26％。与PNG相比，无损加载时间减少了3％。你通常不徐要无损。无损边缘和锐利边缘（例如非JPEG）是有区别的。无损WebP可能更适合档案内容。 -
透明度
WebP有一个无损的8位透明通道，只有比PNG多22％的字节。它还支持有损RGB透明度，这是WebP独有的功能。 -
元数据
WebP文件格式支持EXIF照片元数据和XMP数字文档元数据。它还包含一个ICC颜色配置文件。
WebP提供了更好的压缩，但代价是CPU密集度更高。早在2013年，WebP的压缩速度比JPEG慢了10倍，但现在可以忽略不计（有些图像可能会慢两倍）。静态图像作为您的构建的一部分进行处理，这不应该是一个大问题。动态生成的图像可能会导致CPU超载，需要评估使用。
谁在生产中使用WebP？
image
Google使用WebP比其他有损压缩方案节省了30-35％的成本，每天处理430亿个图像请求，其中26％是无损压缩。如果浏览器支持更好，更广泛的话，节省无疑会更大。 Google也将其用于Google Play和YouTube等制作网站。
WebP如何编码？
WebP的有损编码被设计为与JPEG竞争。 WebP的有损编码有三个关键阶段
- Macro-blocking
image
将图像分成16×16（宏）的亮度像素块和两个8×8色度像素块。色度通道下采样和图像细分的想法可能听起来很熟悉，与JPEG色彩空间转换类似。
- Prediction
image
每个4×4子块具有有效进行滤波的预测模型。这定义了两个像素周围的像素 - A（正上方的行）和L（左侧的列）。使用这两个编码器填充4×4像素的测试块，并确定哪个创建最接近原始块的值。
离散余弦变换（DCT）应用了与JPEG编码类似的几个步骤。一个关键的区别是使用算术压缩器与JPEG的霍夫曼。
WebP浏览器情况
并不是所有的浏览器都支持WebP，但根据CanIUse.com的统计，全球用户支持率在74％左右。 Chrome和Opera本身就支持它。 Safari，Edge和Firefox已经尝试过，但尚未在官方发布的版本中发布。 这通常会让WebP图像给用户，直到Web开发人员。 稍后再说。
WebP并非没有缺点。 它缺少全分辨率色彩空间选项，不支持逐行解码。
如何将我的图像转换为WebP？
一些商业和开源图像编辑和处理软件包支持WebP。一个特别有用的应用是XnConvert：一个免费的，跨平台的批量图像处理转换器。
image
避免将低质量或平均质量的JPEG转换为WebP非常重要。 这是一个常见的错误，可以生成带有JPEG压缩工件的WebP图像。 这可能导致WebP的效率降低，因为它必须保存图像和JPEG添加的失真，导致质量下降两倍。 转换应用程序的最佳质量源文件，最好是原件。
脚本程序
imagemin是一个流行的图像缩小模块，也有一个用于将图像转换为WebP（imagemin-webp）的插件。这支持有损和无损模式。
有损转换
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg}'], 'images', {
use: [
imageminWebp({quality: 60})
]
}).then(() => {
console.log('Images optimized');
});
无损转换(pass lossless: true to options:)
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg,png}'], 'build/images', {
use: [
imageminWebp({lossless: true})
]
}).then(() => {
console.log('Images optimized');
});
也可以通过建立在imagemin-webp上的gulp插件和用于WebPack的WebP加载器来实现。 Gulp插件接受imagemin插件所做的任何选项：
有损转换
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('webp', () =>
gulp.src('src/*.jpg')
.pipe(webp({
quality: 80,
preset: 'photo',
method: 6
}))
.pipe(gulp.dest('dist'))
);
无损转换(pass lossless: true to options:)
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('webp-lossless', () =>
gulp.src('src/*.jpg')
.pipe(webp({
lossless: true
}))
.pipe(gulp.dest('dist'))
);
使用Bash进行批量图像优化
您可以使用cwebp将您的图像批量转换为WebP
find ./ -type f -name '*.jpg' -exec cwebp -q 70 {} -o {}.webp ;
使用jpeg-recompress批量优化您的图像来源与MozJPEG
find ./ -type f -name '*.jpg' -exec jpeg-recompress {} {} ;
并使用svgo修改这些SVG（我们将在后面介绍）
find ./ -type f -name '*.svg' -exec svgo {} ;
其他WebP图像处理和编辑应用程序
- Leptonica
- Sketch
GIMP
ImageMagick
Pixelmator
Photoshop WebP Plugin
如何查看我的操作系统上的WebP图像？
虽然您可以将WebP图像拖放到基于Blink的浏览器（Chrome，Opera，Brave）以进行预览，但也可以使用Mac或Windows的附加组件直接从操作系统预览它们。
在Mac上，请尝试WebP的Quick Look插件（qlImageSize）
在Windows上，您还可以下载WebP编解码器包，以便在“资源管理器”和“Windows照片查看器”中预览WebP图像。
如何为WebP提供服务？
没有支持WebP的浏览器可能最终不会显示图像，这是不理想的。为了避免这种情况，我们可以使用一些策略来基于浏览器支持有条件地提供WebP
使用.htaccess来提供WebP副本
以下是从您的服务器获取WebP图像到用户的一些选项
浏览器可以通过一个Accept头来显式地给WebP支持信号。如果你控制你的后端，你可以返回一个WebP版本的图像。但是这并不总是可能的（例如，对于像GitHub页面或S3这样的静态主机），所以一定要在考虑这个选项之前进行检查。
以下是Apache Web服务器.htaccess文件：:
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser support WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
如果页面上显示的.webp图像出现问题，请确保在您的服务器上启用了图像/ webp MIME类型。
将以下代码添加到.htaccess文件中：
AddType image/webp .webp
Nginx:将以下代码添加到mime.types文件中
image/webp webp
浏览器使用<picture> 元素</picture>
浏览器本身能够通过使用<图片>标签来选择要显示的图片格式。 <picture>标签利用多个<source>元素和一个<img>标签，这是包含图片的实际DOM元素。浏览器遍历源代码并检索第一个匹配项。如果用户的浏览器不支持<picture>标签，则会呈现<div>，并使用<img>标签
请注意<source>的位置。 不要将图片/网页源放在旧格式之后，而应放在之前。 理解它的浏览器将使用它们，而那些不会使用更广泛支持的框架的浏览器将会使用它们。 如果文件大小相同（当不使用媒体属性时），也可以按照文件大小的顺序放置图像。 一般来说，这与最后放弃传统的顺序是一样的。
<picture>
<source srcset="/path/to/image.webp" type="image/webp">
<img src="/path/to/image.jpg" alt="">
</picture>
<picture>
<source srcset='paul_irish.jxr' type='image/vnd.ms-photo'>
<source srcset='paul_irish.jp2' type='image/jp2'>
<source srcset='paul_irish.webp' type='image/webp'>
<img src='paul_irish.jpg' alt='paul'>
</picture>
<picture>
<source srcset="photo.jxr" type="image/vnd.ms-photo">
<source srcset="photo.jp2" type="image/jp2">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="My beautiful face">
</picture>
其他一些资源:
- Automatic CDN conversion to WebP
- WordPress WebP support
网友评论