Batch Convert PNG Images to WebP

When testing a website for SEO, we recommend converting PNG images to webp. This significantly reduces image size with minimal loss of quality. This will speed up page loading and conserve bandwidth.

Since there are already a large number of PNG images on the webpage, we need to convert the formats in batches. The operation is completed in Ubuntu, and the process is as follows.

Download the toolkit

sudo apt install webp

Single conversion test

➜ cwebp xray_firefox.png -o xray_firefox.webp Saving file 'xray_firefox.webp' File: xray_firefox.png Dimensions: 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%) Residual 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 ➜

As shown above, the file size was reduced from 168KB to 56KB, one-third of the original size.

Image comparison test in Firefox: PNG on the left, web browser on the right.

png webp diff

Adjusting the quality factor parameter (q, 0<N<100, default value is 75, 85 in the example below) increased the file size from 56KB to 71KB.

➜ cwebp -q 85 xray_firefox.png -o xray_firefox.webp Saving file 'xray_firefox.webp' File: xray_firefox.png Dimensions: 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

Batch Conversion

• Simple Batch Conversion Script

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

• Execute Script

➜ ./test.sh font_result.png Saving file 'font_result.webp' File: font_result.png Dimensions: 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 |

......

• View the results. The larger the image, the more obvious the effect.

➜ 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 support is now quite comprehensive. Most of the images on this site have been converted to the WebP format, including .ico files. There's no noticeable loss in image quality, and loading speed has indeed increased significantly. After all, it's a small site, so it's fine to make the changes if you want.

For larger sites, please exercise discretion.