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圖標文件，目測無明顯圖片品質損失，加載速度的確較大幅度提升，畢竟小破站，想改就該。

大型站點，請君酌情處理。