by Devin Yang

建立於: 1年前 ( 更新: 1年前 )

我的網站中有大量背景圖在同一個頁面中,下載下來太大囉,需要瘦身,這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的檔案自己看著辨,手動處理吧🤣

Tags: cwebp bash

Devin Yang

文章內容無法一一說明,如果您有什麼不了解處,歡迎提問哦:)

No Comment

Post your comment

需要登入才可留言!

類似的文章


terminal,shortcuts,bash

終端機熱鍵攻略

本文介紹及整理一些終端機的熱鍵,來看看有那些你不知道的吧?快來試試。

ansible,bash

我的第一隻ansible,自動化資料庫轉移

本文是我在MacOS上採用Docker方式,執行Ansible使用經驗分享, 您可以依這個目錄結構調整成您要的Ansible環境,或進行Ansible的學習。 情境是這樣的,我希望在我的測試環境可以看到最接近正式機相同的文章, 但我又不想用測試機程式直接連正式機的資料庫。 我的手動做法就把正式機db匯出來,copy到測試機再匯入, 雖然沒幾個步驟,但做起來好像還是有點煩,加上手動操作容易出錯, 這讓我想起了Ansible這個東西, 我有聽過但沒試過,不如就來試試看。

bash,cli

命令列主機資訊查詢cpu、ram及disk

介紹Linux主機上可以用那些指令查硬體資訊