圖片在App裡面很常使用
現在一張圖片小則幾kb
大則2 3Mb起跳
當一個App裡面充斥著各式各樣的圖片
往往會胖死…
前陣子,因為不小心在圖片上面按了右鍵
結果看到了一個有趣的選項
這就激起了我的好奇心…『什麼是WebP ??』
==================================================
WebP的誕生可以追朔到2010年
圖片越來越精細,容量就越來越胖
這也讓Google一直想要讓圖片想辦法瘦身
圖片瘦身意味著一定要有東西被犧牲
畢竟PNG原圖可是比Jpg胖上許多
相同的圖片
Jpg和PNG容量可以相差至少7 8倍以上
(沒辦法, 我就是喜歡惡魔獵人…)
這張圖片原圖有 5120 X 2880, jpg
mac book pro上看他的容量為1.2Mb
Win 10上看他為1.18Mb
先不說四捨五入啥的精細問題
這張圖片至少有1.2Mb那麼大
如果把它塞進App呈現會如何?
似乎沒什麼
我也只是用ImageView呈現而已
但是我想說的是他打出來的APK大小
5.3Mb…你應該也不會覺得奇怪
但,這還只是一張4K的圖片的App而已
如果你的App裡面有上百張, 豈不是胖死了= =
在Google收購On2 Technologies(視訊壓縮的公司)
Google就開始了圖片瘦身計畫
目標是讓圖片有著JPEG的品質又可以減少檔案大小
WebP在較早的測試中,無失真壓縮比網路上找到的PNG檔少了45%檔案大小
45%誒….想像一下你減重一樣也減少了原本體重的45%
驚不驚人啊!!
先不談背後是如何減少的,我們只要知道這個減重計畫是非常成功的就好
相同的圖片,我用webp打出來
你看得出差別嗎? 我沒有血輪眼我是看不出來啦= =
這樣我們也就無法比較了,那我們就來看APK容量大小
相同的架構,相同的程式碼(只有在XML裡面調整而已)
jpg和webp就可以有這麼大的差別…
圖片容量呢?
mac book pro上看
jpeg: 1.2Mb
webP: 289kb
Win 10上看
jpeg: 1.18Mb
webp: 282kb
(順帶一提: PNG 8.38 Mb 『小畫家3D』轉回jpeg還是1.18Mb)
容量差距還只是在一張圖片而已
這麼好康的壓縮技術不能只有我知道啊
==================================================
雖然現在網路上的Converter百百種
但是我偷偷跟你說
Android Studio內建就可以轉啦
第一步: 先把圖片丟進專案中
第二步: 對著圖片按右鍵
接著會來到這個畫面
不用管, 直接OK
這就是要討論的重點了
前面說到,瘦身不可能沒有任何損失
你減肥你要不要花時間, 花精神去減肥?
意味著你必須犧牲你的娛樂時間
相同的, 圖片壓縮從jpeg轉到webp也會有失真
這邊就是在調整他的失真比例(預設為75%)
只是75%就可以有這麼顯著的效果, 那我們就給他來極大和極小試試看
95%容量從1.2Mb 來到1Mb
0%更是從1.2Mb腰斬到剩下68kb….
如果你有練成血輪眼的,可能看得出差別…(至少我看不出來啦)
尤其是在手機上看更是看不出差異
調整好你喜歡的失真比之後按下Finish
jpg就變成webp了
圖片瘦身連帶APK也跟著瘦身
當然App規模越大, 圖片越多越胖
這個方式可以讓你在損失最少的狀況下呈現高品質的圖片
只能祈禱你家的美術設計還沒有練成血輪眼
這樣包準他也挑不出毛病
==================================================
圖片壓縮雖然會有一點點失真
但是容量上就可以有那麼巨大的變化
連帶的APK大小也可以差那麼多
如果有任何相關問題, 歡迎留言討論
或是有興趣一起交流Android相關技術