縮減圖片下載大小

大部分的下載流量都包含圖片。因此,可下載的圖片越小,應用程式可為使用者提供的網路體驗就更好。此頁面說明如何縮小檔案尺寸,讓檔案更適合在網路中使用。

關於圖片格式

Android 應用程式通常會使用以下一或多種檔案格式的圖片:AVIF、PNG、JPG 和 WebP。每種格式都有縮小圖片尺寸可採用的步驟。

AVIF

Android 12 (API 級別 31) 以上版本支援使用 AV1 圖片檔案格式 (AVIF) 的圖片。AVIF 是一種容器格式,適用於使用 AV1 圖片編碼的圖片和序列。AVIF 會利用影片壓縮的影格內編碼內容。與 JPEG 等舊版的圖片格式相比,這種方式可以大幅提高相同檔案大小的圖片品質。如要深入瞭解這種格式的優勢,請參閱 Jake Archibald 的網誌文章

PNG

縮小 PNG 檔案大小的關鍵,在於減少圖片中包含的每一列像素不重複色彩數量。使用較少的顏色,可提高管道所有其他階段的壓縮效能。

減少不重複色彩的數量可以帶來重大的影響,因為 PNG 的壓縮成效是會依水平相鄰像素顏色的差異程度而有所不同。因此,減少 PNG 圖片中每列的不重複顏色數量,有助於縮減檔案大小。

提醒您,在決定要採用這個策略時,減少不重複的色彩數量,即可有效地將圖片的失真編碼階段套用至圖片。不過,如果是人類肉眼看似無傷大雅的小錯誤,編碼工具可能無法正確判斷其帶來的負面影響。因此,建議您手動執行此作業,以在有效壓縮與可接受的影像品質之間取得適當平衡。

在這個方面,有兩種不同的做法特別實用:盡可能發揮索引格式的效能,以及套用向量量化。

盡可能發揮索引格式的效能

如果要減少顏色,應先從嘗試最佳化顏色開始,這樣您才可以在匯出圖片為 PNG 時使用索引格式。索引格式顏色模式的運作原理,是選擇要使用的 256 種最佳顏色,然後使用索引將所有像素值替換成該調色盤。這樣可將 1600 萬種 (可能的) 顏色減少為 256 種顏色:從每個像素 3 個 (不含透明度) 或 4 個 (含透明度) 位元組減少為每個像素 1 個位元組。 此變更是縮小檔案大小的第一步,也是很重要的一個步驟。

圖 1 顯示圖片及其已建立索引的變化版本。

圖 1.轉換為索引格式的圖片前後對照。

圖 2 顯示圖 1 中圖片使用的調色盤:

圖 2.圖 1 中圖片使用的調色盤。

以調色盤顯示呈現圖片,對於改善檔案大小而言非常有幫助,因此如果您的大多數圖片都可以轉換,就值得做此投資。

當然,並非所有圖片都能以 256 種色彩準確呈現。舉例來說,某些圖片可能需要 257、310、512 或 912 種顏色,才能正確顯示。在這種情況下,向量量化也可能有所幫助。

向量量化

如果將建立索引圖片的程序描述為向量量化 (VQ),也許會更為精確。VQ 是多維度數字的四捨五入程序。在這個程序中,圖片的所有顏色都會依照其相似度分組。特定群組中的所有顏色,都會以單一的「聚焦點」值取代,這可大幅減少顏色在該儲存格中 (如果使用 Voronoi 術語,則為「協作平台」) 可能有的錯誤。在圖 3 中,綠點代表輸入顏色,紅點則是用以取代輸入顏色的聚焦點。每個儲存格都以藍線為界。

圖 3. 將向量量化套用至圖片中的顏色。

套用 VQ 至圖片,可使用在視覺品質中「相當接近」的單一顏色取代每個顏色群組,從而減少不重複顏色的數目。

此技巧也可讓您定義圖片中不重複顏色的數量上限。舉例來說,圖 4 以 1670 萬種顏色 (每像素 24 位元,簡稱 bpp) 顯示鸚鵡的頭部,另外一個版本只允許使用 16 種 (3 bpp) 不重複顏色。

圖 4. 圖片在套用向量量化的前後對照。

您馬上就會發現有品質降低的情況;大多數的漸層顏色都已經取代,在圖片中加入色帶效果。這張圖片需要超過 16 種不重複的顏色。

在管道中設定 VQ 步驟,可協助您更瞭解圖片使用的實際顏色數量,並且大幅減少這些顏色。您可以運用多種現成的工具實作這項技巧。

JPG

如果您使用 JPG 圖片,可以採用幾項小變更以大幅縮減檔案大小。其中包括:

  • 透過不同的編碼方法產生較小的檔案 (不影響品質)。
  • 稍微調整品質以帶來更好的壓縮效果。

採用這些策略通常可以減少檔案大小高達 25%。

選擇工具時,請注意相片匯出工具可能會在圖片中插入不必要的中繼資料,例如 GPS 資訊。請至少嘗試利用現有的工具,從檔案中移除這些資訊。

WebP

WebP 是 Android 4.2.1 (API 級別 17) 支援的新圖片格式。此格式可為網路中的圖片提供絕佳的低失真率和失真壓縮。 使用 WebP 時,開發人員可以製作更精美的小型圖片。平均而言,WebP 低失真率圖片檔案比 PNG 小 26%。這些圖片檔案也支援透明度 (也稱為 Alpha 管道),位元組只多出 22%

如果是相等的 SSIM 品質索引,WebP 失真圖片會比同等級 JPG 圖片小 25-34%。如果可接受使用失真 RGB 壓縮,失真 WebP 也支援透明度,而且通常產生的檔案大小會比 PNG 小 3 倍。

如要進一步瞭解 WebP,請造訪 WebP 網站

您可以使用 Android Studio,將現有的 BMP、JPG、PNG 或靜態 GIF 圖片轉換為 WebP 格式。詳情請參閱「使用 Android Studio 建立 WebP 圖片」。

選取一種格式

不同的圖片格式適合不同類型的圖片。JPG 和 PNG 的壓縮程序非常不同,且產生的結果可能大不相同。

PNG 和 JPG 之間的決定通常取決於圖片本身的複雜性。圖 5 顯示兩張因開發人員採用的壓縮配置不同而效果迥異的圖片。左邊的圖片有許多細小細節,因此壓縮時比 JPG 更有效率。右圖為相同顏色的圖片,使用 PNG 可更有效壓縮。

圖 5. JPG 與 PNG 的適用案例比較

WebP 格式可支援失真與低失真率模式,是 PNG 和 JPG 的理想選擇。請注意,目前只有執行 Android 4.2.1 (API 級別 17) 以上版本的裝置有原生支援功能。幸運的是,大多數的裝置都符合這項需求。

圖 6 提供簡單的視覺化呈現,協助您決定要使用哪種壓縮配置。

圖 6. 決定壓縮配置

決定最佳品質值

您有許多技術可以採用,在壓縮與圖片品質之間取得適當平衡。其中一項技術使用純量值,因此只適用於 JPG 和 WebP。另一項技術則使用 Butteraugli 程式庫,且適用於所有圖片格式。

純量值 (僅限 JPG 和 WebP)

JPG 和 WebP 的功用在於可以使用純量值,在品質與檔案大小之間取得平衡。秘訣是找出圖片的正確品質值。如果品質等級過低,就會產生一個與圖片品質較差的小檔案。品質等級過高,不但會使檔案大小增加,也不會為使用者帶來明顯的益處。

最直接的解決方案就是挑選一些非最大值,然後使用該值。不過請注意,品質值會對每張圖片產生不同的影響。舉例來說,雖然大部分的圖片都能夠呈現 75% 的品質,但有時可能會出現達不到此效果的問題。請務必根據代表圖片的代表性樣本選擇最大值進行測試。此外,請務必針對原始圖片執行所有測試,而不是使用壓縮版本。

對於每天上傳及重新傳送數百萬張 JPG 的大型媒體應用程式而言,針對每個資產進行微調是不切實際的做法。您可以根據圖片類別指定數個不同的品質等級以解決這個問題。舉例來說,您可以將 35% 設為縮圖的品質,因為較小的圖片會隱藏其他壓縮成果。

Butteraugli

Butteraugli 專案是一個程式庫,可用於測試圖片的「視覺錯誤門檻」(也就是觀眾會開始注意到圖片降級的時間點)。換句話說,這個專案會嘗試量化壓縮圖片的扭曲程度。

Butteraugli 可讓您定義視覺品質的目標,然後執行 PNG、JPG、WebP 失真和 WebP 低失真率壓縮。然後您可以選擇最適合檔案大小與 Butteraugli 級別的圖片。圖 7 說明如何使用 Butteraugli,找出在視覺扭曲夠高,可讓使用者發現問題前的 JPG 最低品質等級,;這個結果大約是檔案大小縮減 65%。

圖 7. 這是圖片採用 Butteraugli 技術的前後對照。

Butteraugli 可讓您根據輸出或輸入內容繼續操作。也就是說,您可以找到使用者看到所見圖片中的扭曲失真前的最高品質設定,也可以反覆設定圖片扭曲等級,以瞭解相關的品質等級。

放送大小

大家都很希望能夠在伺服器中只保留圖片的單一解析度。當裝置存取圖片時,伺服器會以該解析度放送圖片,並在裝置中儲存縮小的圖片。

這個解決方案對開發人員來說很方便,但對使用者而言可能會很困擾,因為這個解決方案會強制要求使用者下載更多不一定需要的資料。建議您改為儲存多種大小的圖片,然後以最適合特定用途的大小放送。舉例來說,如果是縮圖,請放送實際縮圖圖片,而不是放送完整尺寸版本的縮小圖片,所需使用的網路頻寬就會減少許多。

這個方法可以大幅增加下載速度,如果使用者採用的是用量有限或依照用量計費的數據方案也能減少支出。此外,圖片在裝置和主要記憶體中的佔用空間也會減少。若是大型圖片 (例如 4K 圖片),這個方法也可以避免裝置在載入圖片前先調整圖片大小。

如要採用這種做法,您需要使用後端圖片服務,以適當的解析度提供不同解析度的圖片。目前有服務可以針對這項工作提供相關協助。舉例來說,App Engine 的內建大小調整功能就可以做到這一點。