小程序使用WebP圖片使用踩坑
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
前情WebP是一種同時提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式，最初在2010年發布，目標是減少文件大小，相較于傳統的 PNG、JPG，甚至是動圖 GIF 的格式，WebP 比它們的空間更小。根據谷歌的測試，WebP 格式的圖片可以比 JPEG 格式的圖片小 26%-34%，比 PNG 格式的圖片小 25%-34%，所以在最近的小程序項目中，我嘗試引入WebP格式圖片以來減小包體積。 坑位一開始我負責的小程序是發布在抖音端和快手端，在抖音端使用WebP是沒啥問題的，一切都挺順利，但是直到在快手端自測時候發現，在iOS上部分有帶透明的圖片會顯示異常。 我還給官方提了BUG：webp小圖標顯示異常，官方回復說是已經解決，雖然回復已經解決，但發版更新是需要時間的，后面不得不快速過了小程序的相關頁面，把顯示異常的小圖標都換成了PNG格式圖片，想到等后續穩定了再用回WebP吧。
最近公司項目又有變化，公司希望小程序有發布微信端，項目也落在了我名下，于是我又踩到了另一深坑，我一直以為在所有小程序端中微信是鼻祖，應該是最穩定的了，我一開始也是這么認為的，因為在開發者工具上并沒有發現有什么大的問題，直到我在真機上測試，大顛眼睛，頁面上到處是空白，一開始懷疑是布局出現兼容問題，直到定位代碼才發現，全部是webp格式圖片不支持，于是查看了微信的文擋，文擋是寫得好好的，翻到最下面，說需要添加webp=“true”才可以，而且只支持網絡圖片，真的是腦袋發脹，心里惡狠狠的罵了回自己，給自己找事用什么WebP嘍。
Why?快手的問題就是平臺的BUG，微信就是平臺的限制，對于這些問題，我們開發者只能提BUG等待官方修復，但這一段修復的時間你不得不想辦法繞開，但是微信小程序這個完全就是平臺的限制了，你無能為力。 解決方案方案1：使用網絡WebP格式圖片 個人親測使用網絡WebP格式圖片確實是可以的，但是微信文擋又在瞎說，如果你用網絡WebP格式圖片的話，webp=”true”有沒有都不影響圖片的展示的，但是再微信小程序論壇搜搜，你又會發現WebP圖片顯示問題還挺多的，而且全換成網絡圖片工作量不會小，同時也會增加公司的CDN流量費用。 方案2：全部圖片換成PNG 在一次次被惡心過后我最終還是決定所有WebP格式圖片全部換回PNG圖片，在替換過程中我發現如果你用PNG圖片再通過 tinypng壓縮后你的PNG圖片也并不一定會比WebP格式圖片小，我隨便選了幾張替換的圖片做了下大小對比。
我在做圖片替換的時候并不是重切所有圖片，重切的話主要是找尋源圖會點麻煩，我的做法是所有圖片通過FreeConvert工具轉PNG，再通過TinyNG做圖片壓縮以保證圖片大小適當。 總結此文并不是web項目，按目前情況，web項目是可以放心使用WebP的， WebP確實能在一定程序上減小項目資源大小，小程序項目還是推薦用PNG+tinypng壓縮的方式使用吧，即保證圖片體積適當，又避免踩到奇奇怪怪的問題。
轉自https://www.cnblogs.com/xwwin/p/18611076 該文章在 2024/12/17 15:40:45 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
