我的网站中有大量背景图在同一个页面中,下载下来太大罗,需要瘦身,这cwebp工具不错。
在Ubunut的环境apt install webp就可以安装罗。
关於webp转码,在这个网站有详细的中文说明 ,你可以参考看看:
https://developers.google.com/speed/webp/docs/cwebp
并非所有的浏览器都支持webp,例如早期的MacOS中的safari,或许您想要连jpeg一起转码。
以Ubuntu为例,您可在Ubuntu环境安装以下两个包。
我是在Docker的环境进行安装的,采用自己架构的简易Docker环境phpenv。
sudo apt install imagemagick webp
完成了上方安装命令,记获得道具三样:
cwebp
identify
convert
有了命令后,这支bash就诞生啦,此bash可分为三个部份。
开始前请注意,我写的这支bash极其暴力不会留下原图,
您如果要保留原图,请自己备份再测试哦!!
#!/bin/bash
#抓目录下所有的.jpg档
for o in $(ls *.jpg)
do
filename="${o%.*}"
#同档名webp不在在,进行优化,生成webp文件
if [ ! -f "$filename.webp" ]; then
cwebp -q 60 -resize 2048 0 $o -o "$filename.webp"
#取得转码后的宽高
WxH=$(identify ${filename}.webp|awk '{print $3}')
#将原始的jpeg加上prefix origin_
mv $o origin_$o
convert origin_$o -resize ${WxH} $o
#移除原始的jpeg,如果需保留请注解
rm origin_$o
fi
done
#jpeg大於600k文件,但确有webp时处理
#代表已转码过,可能只日是jpg来源又被大档覆盖,防重覆下载
SIZE=600k
for o in $(find *.jpg -type f -size +${SIZE})
do
filename="${o%.*}"
if [ -f "$filename.webp" ]; then
#先使用原长宽进行jpg优化
WxH=$(identify ${filename}.webp|awk '{print $3}')
mv $o origin_$o
convert origin_$o -resize ${WxH} $o
fi
done
#强制优化,上面优化无效,JPG还是大於600K时,出大绝招
#直接把图档宽度降低1364,再转码
for o in $(find *.jpg -type f -size +${SIZE})
do
filename="${o%.*}"
cwebp -q 60 -resize 1364 0 $o -o "$filename.webp"
#取得转码后的宽高
WxH=$(identify ${filename}.webp|awk '{print $3}')
#将原始的jpeg加上prefix origin_
mv $o origin_$o
convert origin_$o -resize ${WxH} $o
#移除原始的jpeg,如果需保留请注解
rm origin_$o
done
第一段循环: 正常处理,抓有jpeg无webp的档,进型图档缩小。
抓目录下所有的jpg档,取出档名,检查是否有同档名的webp存在(因为有带表转过了嘛)
不存在同档名的webp文件时,使用cwebp进行转码。
转出来后,我用identify命令抓出webp的图档长宽。
因为convert命令,不能像webp那样,指定宽度,高度等比调整,
所以转码后的webp长宽透过identify入手后,直接拿来给convert用,进行jpg档缩小优化。
第二段循环: 重覆处理,当有jpeg又有webp时,但jpeg文件容量大於600k( 归类原因: jpeg档又被原始大档覆盖或第一段的过程真的缩不下来,极少发生)。
防优化过后的jpg可能再次被我下载,於是又被重新转码,
因此,这里抓超出600k的JPG档,然后同时也存在webp同档名的文件。
然后使用webp的长宽,再次重新优化一次jpg。
第三段循环: 毁天减地处理,这里我出大绝招了,图档宽度再缩减,采无差别攻击webp跟jpeg都一起缩小宽度。
就是有些jpg图很不乖,优化后还是很大,超出600k,所以第三段我就出大绝了。
用find命令,抓出大於600k的jpg图,直接缩小图档宽度,再进行优化。
理论上可以先备份webp,调完jpg后再还原webp,
但没错我就是这么暴力的解法,直接webp的宽度一起缩小不还原啦。
如果您使用了我的bash还有超出600k的文件自己看著辨,手动处理吧🤣
No Comment
Post your comment