PNG图片批量转换为webp

网站在进行seo测试时，有一项推荐是更改PNG格式图片为webp，图片体积大幅减少，质量损失不多。这样会加快网页加载速度，节约带宽。

由于网页里面png图片已经又一定数量，需要批量转换格式。操作在ubuntu下完成，过程如下。

下载工具包

sudo apt install webp

单个转换测试

➜  cwebp xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File:      xray_firefox.png
Dimension: 1398 x 973
Output:    56808 bytes Y-U-V-All-PSNR 44.33 47.21 47.59   45.13 dB
        (0.33 bpp)
block count:  intra4:       1282  (23.88%)
            intra16:      4086  (76.12%)
            skipped:      3883  (72.34%)
bytes used:  header:            421  (0.7%)
            mode-partition:   7225  (12.7%)
Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       9%|      22%|      67%|    5368
    quantizer:  |      36 |      34 |      29 |      23 |
filter level:  |      11 |       7 |      12 |      10 |
➜  ls -lh xray_firefox*
-rw-rw-r-- 1 mephisto mephisto 168K Jun  3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto  56K Jul  1 16:16 xray_firefox.webp
➜  

如上所示，体积从168K减少至56k，为原来的体积的三分之一

firefox打开图片对比测试，左PNG，右WEB

调整质量因素参数测试(参数为q，0<N<100,默认值为75，下面示例为85),体积从56K增加至71K

➜ cwebp -q 85  xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File:      xray_firefox.png
Dimension: 1398 x 973
Output:    71730 bytes Y-U-V-All-PSNR 48.50 51.31 51.68   49.29 dB
        (0.42 bpp)
block count:  intra4:       1303  (24.27%)
            intra16:      4065  (75.73%)
            skipped:      3946  (73.51%)
bytes used:  header:            544  (0.8%)
            mode-partition:   7375  (10.3%)
Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       9%|      22%|      67%|    5368
    quantizer:  |      20 |      18 |      16 |      12 |
filter level:  |       7 |       4 |       3 |       2 |
➜  iPhone ls -lh xray_firefox*                       
-rw-rw-r-- 1 mephisto mephisto 168K Jun  3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto  71K Jul  1 16:23 xray_firefox.webp

批量转换

• 简单批量转换脚本

    ➜  cat test.sh 
    #/bin/bash
    for file in *.png;
    do
        echo $file
        cwebp "$file" -o "${file%.png}.webp";
    done
  

• 执行脚本

    ➜  ./test.sh
    font_result.png
    Saving file 'font_result.webp'
    File:      font_result.png
    Dimension: 1335 x 1005
    Output:    57624 bytes Y-U-V-All-PSNR 43.96 45.09 45.14   44.31 dB
            (0.34 bpp)
    block count:  intra4:       1396  (26.38%)
                intra16:      3896  (73.62%)
                skipped:      3630  (68.59%)
    bytes used:  header:            419  (0.7%)
                mode-partition:   7629  (13.2%)
    Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
        macroblocks:  |       2%|       7%|      19%|      72%|    5292
        quantizer:  |      36 |      35 |      29 |      23 |
    filter level:  |      11 |       7 |      38 |      30 |
    github_hook_result.png
    Saving file 'github_hook_result.webp'
    File:      github_hook_result.png
    Dimension: 1664 x 634
    Output:    33674 bytes Y-U-V-All-PSNR 45.81 45.92 46.16   45.89 dB
            (0.26 bpp)
    block count:  intra4:        643  (15.46%)
                intra16:      3517  (84.54%)
                skipped:      3258  (78.32%)
    bytes used:  header:            388  (1.2%)
                mode-partition:   4412  (13.1%)
    Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
        macroblocks:  |       1%|       4%|      10%|      85%|    4160
        quantizer:  |      36 |      36 |      31 |      24 |
    filter level:  |      11 |       8 |       6 |       4 |
    github_webhook.png
    Saving file 'github_webhook.webp'
    File:      github_webhook.png
    Dimension: 1085 x 687
    Output:    35696 bytes Y-U-V-All-PSNR 44.19 44.32 44.53   44.27 dB
            (0.38 bpp)
    block count:  intra4:        658  (22.50%)
                intra16:      2266  (77.50%)
                skipped:      2141  (73.22%)
    bytes used:  header:            380  (1.1%)
                mode-partition:   3715  (10.4%)
    Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
        macroblocks:  |       2%|       7%|      11%|      80%|    2924
        quantizer:  |      36 |      36 |      30 |      24 |
    filter level:  |      11 |       8 |       5 |       5 |
  
    ......
  

• 查看结果，体积越大的图片，效果越明显

    ➜  ls -lh
    total 1.9M
    -rw-rw-r-- 1 mephisto mephisto  43K May 29 12:53 404.jpg
    -rw-rw-r-- 1 mephisto mephisto 166K Jun  8 13:59 font_result.png
    -rw-rw-r-- 1 mephisto mephisto  57K Jul  1 16:29 font_result.webp
    -rw-rw-r-- 1 mephisto mephisto  96K Jun  6 18:24 github_hook_result.png
    -rw-rw-r-- 1 mephisto mephisto  33K Jul  1 16:29 github_hook_result.webp
    -rw-rw-r-- 1 mephisto mephisto  93K Jun  6 18:18 github_webhook.png
    -rw-rw-r-- 1 mephisto mephisto  35K Jul  1 16:29 github_webhook.webp
    -rw-rw-r-- 1 mephisto mephisto 184K Jun  7 18:01 google_fonts.png
    -rw-rw-r-- 1 mephisto mephisto  74K Jul  1 16:29 google_fonts.webp
    -rw-rw-r-- 1 mephisto mephisto 114K Jun  4 16:03 haha.png
    -rw-rw-r-- 1 mephisto mephisto  52K Jul  1 16:29 haha.webp
    -rw-rw-r-- 1 mephisto mephisto  79K Jun  7 18:07 libre_baskerville_font.png
    -rw-rw-r-- 1 mephisto mephisto  28K Jul  1 16:29 libre_baskerville_font.webp
    -rw-rw-r-- 1 mephisto mephisto  67K Jun 21 17:27 rime_clover.png
    -rw-rw-r-- 1 mephisto mephisto  17K Jul  1 16:29 rime_clover.webp
    -rw-rw-r-- 1 mephisto mephisto 403K Jun 21 17:48 rime_example.png
    -rw-rw-r-- 1 mephisto mephisto  50K Jul  1 16:29 rime_example.webp
    -rwxrwxr-x 1 mephisto mephisto   89 Jul  1 16:29 test.sh
    -rw-rw-r-- 1 mephisto mephisto 168K Jun  3 21:08 xray_firefox.png
    -rw-rw-r-- 1 mephisto mephisto  56K Jul  1 16:29 xray_firefox.webp
  

如今webp的支持已经比较完善了，本站绝大部分的图片都已更改为webp格式，包括ico图标文件，目测无明显图片品质损失，加载速度的确较大幅度提升，毕竟小破站，想改就该。

大型站点，请君酌情处理。