小程序使用WebP圖片使用踩坑

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

2024年12月17日 15:38 本文熱度 1437

前情

WebP是一種同時(shí)提供了有損壓縮與無(wú)損壓縮（可逆壓縮）的圖片文件格式，最初在2010年發(fā)布，目標(biāo)是減少文件大小，相較于傳統(tǒng)的 PNG、JPG，甚至是動(dòng)圖 GIF 的格式，WebP 比它們的空間更小。根據(jù)谷歌的測(cè)試，WebP 格式的圖片可以比 JPEG 格式的圖片小 26%-34%，比 PNG 格式的圖片小 25%-34%，所以在最近的小程序項(xiàng)目中，我嘗試引入WebP格式圖片以來(lái)減小包體積。

坑位

一開始我負(fù)責(zé)的小程序是發(fā)布在抖音端和快手端，在抖音端使用WebP是沒(méi)啥問(wèn)題的，一切都挺順利，但是直到在快手端自測(cè)時(shí)候發(fā)現(xiàn)，在iOS上部分有帶透明的圖片會(huì)顯示異常。

我還給官方提了BUG：webp小圖標(biāo)顯示異常，官方回復(fù)說(shuō)是已經(jīng)解決，雖然回復(fù)已經(jīng)解決，但發(fā)版更新是需要時(shí)間的，后面不得不快速過(guò)了小程序的相關(guān)頁(yè)面，把顯示異常的小圖標(biāo)都換成了PNG格式圖片，想到等后續(xù)穩(wěn)定了再用回WebP吧。

最近公司項(xiàng)目又有變化，公司希望小程序有發(fā)布微信端，項(xiàng)目也落在了我名下，于是我又踩到了另一深坑，我一直以為在所有小程序端中微信是鼻祖，應(yīng)該是最穩(wěn)定的了，我一開始也是這么認(rèn)為的，因?yàn)樵陂_發(fā)者工具上并沒(méi)有發(fā)現(xiàn)有什么大的問(wèn)題，直到我在真機(jī)上測(cè)試，大顛眼睛，頁(yè)面上到處是空白，一開始懷疑是布局出現(xiàn)兼容問(wèn)題，直到定位代碼才發(fā)現(xiàn)，全部是webp格式圖片不支持，于是查看了微信的文擋，文擋是寫得好好的，翻到最下面，說(shuō)需要添加webp=“true”才可以，而且只支持網(wǎng)絡(luò)圖片，真的是腦袋發(fā)脹，心里惡狠狠的罵了回自己，給自己找事用什么WebP嘍。

Why?

快手的問(wèn)題就是平臺(tái)的BUG，微信就是平臺(tái)的限制，對(duì)于這些問(wèn)題，我們開發(fā)者只能提BUG等待官方修復(fù)，但這一段修復(fù)的時(shí)間你不得不想辦法繞開，但是微信小程序這個(gè)完全就是平臺(tái)的限制了，你無(wú)能為力。

解決方案

方案1：使用網(wǎng)絡(luò)WebP格式圖片

個(gè)人親測(cè)使用網(wǎng)絡(luò)WebP格式圖片確實(shí)是可以的，但是微信文擋又在瞎說(shuō)，如果你用網(wǎng)絡(luò)WebP格式圖片的話，webp=”true”有沒(méi)有都不影響圖片的展示的，但是再微信小程序論壇搜搜，你又會(huì)發(fā)現(xiàn)WebP圖片顯示問(wèn)題還挺多的，而且全換成網(wǎng)絡(luò)圖片工作量不會(huì)小，同時(shí)也會(huì)增加公司的CDN流量費(fèi)用。

方案2：全部圖片換成PNG

在一次次被惡心過(guò)后我最終還是決定所有WebP格式圖片全部換回PNG圖片，在替換過(guò)程中我發(fā)現(xiàn)如果你用PNG圖片再通過(guò) tinypng壓縮后你的PNG圖片也并不一定會(huì)比WebP格式圖片小，我隨便選了幾張?zhí)鎿Q的圖片做了下大小對(duì)比。

我在做圖片替換的時(shí)候并不是重切所有圖片，重切的話主要是找尋源圖會(huì)點(diǎn)麻煩，我的做法是所有圖片通過(guò)FreeConvert工具轉(zhuǎn)PNG，再通過(guò)TinyNG做圖片壓縮以保證圖片大小適當(dāng)。

總結(jié)

此文并不是web項(xiàng)目，按目前情況，web項(xiàng)目是可以放心使用WebP的， WebP確實(shí)能在一定程序上減小項(xiàng)目資源大小，小程序項(xiàng)目還是推薦用PNG+tinypng壓縮的方式使用吧，即保證圖片體積適當(dāng)，又避免踩到奇奇怪怪的問(wèn)題。