Web图像优化(2)

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