前言

PC 端與移動端，圖片始終是流量大戶。Retina 高 PPI 屏對畫質要求更高，如何在不損畫質前提下極致壓縮體積，成為核心課題。JPEG/PNG/GIF 優化已近極限，Google 拋出釜底抽薪之作：WebP。

緣起手機 QQ 原創表情商城：表情包體積大、2G/3G 加載慢。同事從 2013 Google I/O 了解 WebP，合作技術預研，尋找質量與體積的最美平衡。如今 WebP 獲越多關注，騰訊、淘寶、美團、Facebook、eBay 均已落地，Chrome 應用商店全面採用。分享一年探索與最新進展，期待更多業務接入。

什麼是 WebP？

WebP（發音 weppy），支持有損/無損壓縮，派生自 VP8 編碼。Google 測試：無損 WebP 比 PNG 小 45%，即使 PNG 已壓縮仍小 28%。2010 年發布，應用於 YouTube、Gmail、Google Play 等明星產品。

核心優勢

• 優異壓縮算法：體積更小、畫質肉眼無差。
• 雙模式：有損/無損自由切換。
• Alpha 透明 + 24-bit 色深：解決 PNG8 色彩不足與毛邊問題。
• 支持動畫：替代 GIF，體積更小。
• JPEG/PNG 轉換效果優秀、穩定、統一。

實測數據：YouTube 縮略圖用 WebP 後加載提速 10%；Chrome 應用商店日省數 TB 帶寬、平均加載減 1/3；Google+ 移動端日省 50TB 存儲。

兼容性與可用性

國內瀏覽器佔比分析：超 50% 用戶可直用。圖片型站點或基於 Chromium 內核產品建議嘗試。App 端：Android 4.0+ 原生支持，其他版本及 iOS 用官方解碼庫。
騰訊內部多維驗證（流暢度、解碼耗時、CPU、內存）：

測試一：Android QQ（Galaxy Nexus / Android 4.2.2）

• 解碼耗時：WebP 為 PNG 4.4 倍（24.8ms）
• 流暢度、CPU、內存：無明顯差異

測試二：iPhone QQ（iPhone 4 / iOS 5.1.1）

• 解碼耗時：WebP 為 PNG 5 倍（64.1ms）
• FPS 略低但穩定，CPU 佔用略高，內存波動可控

結論：除解碼耗時毫秒級差異外，總體體驗與 PNG 基無二致。硬件快速迭代下，App 端使用 WebP 無技術阻礙。

業務指導：原創表情商城的 WebP 最佳實踐

驗證可行後，深入探究「不同表情圖片如何獲最佳壓縮效率」：

探索一：圖片規格——16n×16n 最優

WebP 採 Fancy 採樣算法，JPEG 8×8 塊，WebP 推測 16×16 塊。實測 200×200 附近規格：16 的倍數（160、176、192、256）有損壓縮比明顯高於 4/8 倍數。建議原創表情採用 192×192 或 256×256，壓縮效率提升千分位級別。

探索二：色彩數影響

經驗：色彩複雜用 JPEG、單一用 PNG。調整 PS 色階分離色彩數，對比 WebP 有損/無損壓縮……（文中數據截斷，原理明確：色彩數越少，無損壓縮優勢越大；有損壓縮下高色彩數優势收窄。）

總結

WebP 以更優壓縮算法、雙模式、透明支持、動畫特性，成為圖片優化終極選擇。兼容性已達實用門檻，工具鏈成熟（智圖、iSparta 等）。對於追求極致性能的團隊，現在就是遷移的最佳時機。