把网站所有图片资源迁移为webp格式

本网站从此把所有的需要对外显示的图片资源文件全部转换为webp格式

我为什么这样做？看完文章你就明白了

我将会先介绍如何把所有图片资源转为webp格式

cwebp下载#

cwebp是谷歌官方出品的一款将已有图片转换为webp格式文件的软件，用这个软件可以很方便的将已有的很多格式的图片资源文件转换为webp格式文件

具体的教程可以看GoogleDocs/https://developers.google.cn/speed/webp/docs/cwebp来了解更加详细的信息

如果想手动编译的话，可以访问GoogleGit/https://chromium.googlesource.com/webm/libwebp/来寻找源代码，自行编译

但是如果不想编译的话，谷歌也提供了现成的编译过的release，访问GoogleAPIs/https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html来直接下载release

需要注意的是，要获取最新版本，必须往下翻到底才能看到

文件格式如下所示：

1
libwebp-version-os-platform.zip

或者

1
libwebp-version-os-platform.tar.gz

例如：

1
libwebp-1.4.0-windows-x64.zip

按需要下载自己需要的文件

或对于 ArchLinux

1
sudo pacman -S libwebp-utils

其他发行版请搜索对应的包

使用#

下载之后就需要解压了，压缩包中只有一个目录，我们把他解压出来，解压出来后目录结构大致如下：

1
libwebp-1.4.0-windows-x64
2
│  README.md
3
│  test.webp
4
│  test_ref.ppm
5
│
6
├─bin
7
│      anim_diff.exe
8
│      anim_dump.exe
9
│      cwebp.exe
10
│      dwebp.exe
11
│      freeglut.dll
12
│      get_disto.exe
13
│      gif2webp.exe
14
│      img2webp.exe
15
│      vwebp.exe
16
│      webpinfo.exe
17
│      webpmux.exe
18
│      webp_quality.exe
19
│
20
├─doc
21
│      api.md
22
│      tools.md
23
│
24
├─include
25
│  └─webp
26
│          decode.h
27
│          demux.h
28
│          encode.h
29
│          mux.h
30
│          mux_types.h
31
│          types.h
32
│
33
└─lib
34
        libwebp.lib
35
        libwebpdemux.lib
36
        libwebpmux.lib

我们需要的只是bin目录下的cwebp.exe文件，可以讲bin目录加入进环境变量中，这里不再细讲

打开控制台，查看是否正常

1
cwebp -version

输出就像：

1
1.4.0
2
libsharpyuv: 0.4.0

正常使用（有损压缩）用法：

1
cwebp -m [可选，压缩品质(0-6)，数字越大越慢，默认为4] -q <品质(0-100)，数字越大品质越好> ./输入文件 -o ./输出.webp
2
# 例如
3
cwebp -m 6 -q 95 ./default.png -o ./default.webp

一般情况下的输出：

1
Saving file './default.webp'
2
File:      ./default.png
3
Dimension: 2338 x 1440
4
Output:    367416 bytes Y-U-V-All-PSNR 49.86 52.49 52.66   50.59 dB
5
           (0.87 bpp)
6
block count:  intra4:      12127  (91.66%)
7
              intra16:      1103  (8.34%)
8
              skipped:        26  (0.20%)
9
bytes used:  header:            586  (0.2%)
10
             mode-partition:  52214  (14.2%)
11
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
12
    macroblocks:  |       1%|       5%|      18%|      77%|   13230
13
      quantizer:  |       6 |       6 |       5 |       4 |
14
   filter level:  |       2 |       0 |       0 |       9 |

想要无损压缩的也可以，用法：

1
cwebp -lossless ./输入文件 -o ./输出.webp
2
# 例如
3
cwebp -lossless ./default.png -o ./default.webp

一般情况下的输出

1
Saving file './default.webp'
2
File:      ./default.png
3
Dimension: 350 x 350
4
Output:    11240 bytes (0.73 bpp)
5
Lossless-ARGB compressed size: 11240 bytes
6
  * Header size: 1337 bytes, image data size: 9878
7
  * Lossless features used: PREDICTION CROSS-COLOR-TRANSFORM SUBTRACT-GREEN
8
  * Precision Bits: histogram=3 transform=3 cache=0

压缩后可以使用vwebp查看是否编码正确，用法：

1
vwebp ./输出.webp

运行后会弹出一个窗口，显示的是当前图片编码后的样式

为什么用webp#

回到开头，我为什么要用webp而不用传统的png/jpg之类的格式呢？

有一个最大的好处，就是“小”

例如这个文章的头图，也就是网站的主图，压缩前的大小为3.26MB，而经过95品质的压缩后，大小来到了惊人的 358KB 即使是使用了无损压缩格式，压缩后也只有2.4MB左右

这样不但可以加快访问速度，还能省下不少的带宽，要知道Vercel免费计划每月为100GB，网站肯定是越精简越好的

所以你还有什么理由不用webp格式的图片呢

感谢您阅读此文章，如果有什么不对的地方欢迎再评论区纠正！

mail_set的铺子

cwebp下载#

使用#

为什么用webp#

继续阅读

换条路线

评论

mail_set的铺子

cwebp下载#

使用#

为什么用webp#

分享文章

沿着主题读

换条路线

评论