我的網站中有大量背景圖在同一個頁面中,下載下來太大囉,需要瘦身,這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