App瘦身实践之批量转换webp

Posted by PaysonChen on September 25, 2022

0x00 背景

​ WebP 在各大互联网公司已经使用得很多了。WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

0x01 优势对比

  • PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
  • 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
  • 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

0x02 实践

一般设计给资源会有压缩@2x,@3x压缩包，于是可以把这些压缩包批量转换一下：

写一个脚本：transfer2webp.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

for file in ./*
do
    suffix=zip
    if [ "${file##*.}" = "$suffix" ]; then
        echo $file 'zip'
        dir=${file%.*}
        unar -e GBK $file #没有unar环境可以安装下https://blog.csdn.net/dawn_after_dark/article/details/83504421
        for subfile in ./${dir}/*
        do
            cwebp -q 90 "${subfile}" -o "${subfile%.*}.webp"
        done

    elif test -d $file ; then
        echo $file 'fold'
    else
        echo $file 'other'
    fi
done

备注：之所以选unar而非unzip，是因为很多设计资源打包时，很可能带中文，在一开始的方案中使用了unzip会有乱码问题，为了兼容中文压缩包选用unar

CATALOG
    FEATURED TAGS