快轉到主要內容

AVIF跟JPEG的比較,以轉檔儲存的圖片為例子

資訊科技 資訊科技應用 AOMedia Video 1
🗓️ 民國111年 壬寅年
✍ 切換正體/簡體字
目錄

現在是網路時代,很多人應該會有隨手存圖到手機或D槽的習慣。有時候我們會下載容量巨大的原圖,一張相片或圖畫動輒就會2MB以上。可能是為了賞心悅目,或是想印出來做桌布之類的。

但,如果是松鼠症(囤積症)患者,就可能會下載到許多「不重要,但棄之可惜」的圖片資源。為了要讓圖片不佔太多空間,使用新興的"AVIF"格式,批次壓縮硬碟中較大的圖片,這樣放到雲端硬碟上也能夠快速載入。

我們的目的是要把圖片都盡量轉換到1MB以下,又能維持一定品質,減少約一半的佔用空間。文末簡單探討結果。

1. 各個圖片格式的比較
#

無損壓縮圖片是指可以將圖片還原到原始畫質,檔案比較大。有損壓縮則是降低檔案大小,方便網路傳輸。

格式說明
PNGW3C開發的無損壓縮圖片格式,支援透明圖層。支援動圖的APNG目前尚未被W3C納入標準。
JPEG/JPG由聯合圖像小組開發,大部份是使用有損壓縮,相容性最廣,讓檔案變小的同時也容易出現馬賽克。不支援透明圖層和動圖。
AVIF/AVIFS由開放媒體聯盟開發,支援無損和有損壓縮的選項。有損壓縮的時候檔案容量比JPEG更小,比較不容易出現馬賽克。支援透明圖層和動圖。
WEBP是Google為了減少網頁圖片容量開發的格式,支援可逆無損壓縮和有損壓縮,支援透明圖層和動圖。
GIF是由CompuServe開發,為最常見的動圖格式,使用256色彩產生檔案小的圖片,但也會導致顏色失真,支援透明圖層。

2. AVIF的限制
#

主流瀏覽器 (Firefox/Chrome/Edge/Safari) 和作業系統 (Linux/Windows/MacOS/Android/iOS) 都已支援AVIF,有在更新的看圖軟體應該也會陸續支援AVIF。

根據 avif.io說法,AVIF的壓縮率比WEBP更好,圖片不容易出現馬賽克也較為美觀。

如果把檔案很大的JPEG轉換成AVIF呢?也是有壓縮效果,但來源檔案還是PNG為佳。

雖然說 GIF可以轉成AVIF動圖,但若畫質變高檔案就容易變大。因此「影片直接轉AVIF動圖」會比「GIF轉AVIF」要來得划算。

目前PNG轉成AVIF可能會喪失透明圖層,有些軟體無法正常讀取,待未來更新。保守一點的作法,就是將含透明圖層的PNG和GIF動圖轉成WEBP,WEBP同樣可以減少一半以上的檔案大小。

3. 實際轉檔成AVIF
#

  1. 範例,以下這張PNG圖片有很多細節,這裡放的是壓縮過的。

  2. 原始檔案高達22MB。

  3. 再來要將圖片轉檔,使用的工具是跨平台的 ImageMagick,透過指令就可以轉換圖片。

  4. 將PNG圖片轉換成JPEG,品質選50。

magick convert example.png -quality 50% example.jpeg
  1. 將PNG圖片轉換成AVIF,品質選50。
magick convert example.png -quality 50% example.avif

大小比較
#

22MB的圖片,JPEG降低到1011KB,AVIF降低到758KB。

1011K example.jpeg
758K example.avif
23M example.png

轉檔時間比較
#

目前AVIF比JPEG慢很多。

ivon@pc:~> time convert example.png -quality 50% example.jpeg
real    0m0.790s
user    0m0.644s
sys     0m0.124s

ivon@pc:~> time convert example.png -quality 50% example.avif
real    0m8.897s
user    0m26.898s
sys     0m0.303s

放大細節比較
#

PNG vs JPEG vs AVIF

點圖放大。跟PNG相比,JPEG出現明顯鋸齒狀和其他顏色的色塊,而AVIF只是看起來變模糊了而已。

4. 批次轉換圖片
#

ImageMagick的Mogrify工具能大量轉換圖片。

我的操作步驟如下:

  1. 將目前目錄中的PNG圖片,全部轉換成AVIF圖片並儲存到桌面的output目錄。注意副檔名大小寫。
magick mogrify -format avif -quality 50 -type truecolor -alpha on -path ~/桌面/output *.png
  1. 將目前目錄中的JPEG/JPG圖片,全部轉換成AVIF圖片並儲存到桌面的output目錄。由於JPEG很多都已經壓縮過,所以使用較高品質轉換,以求保持品質又能降低大小。
magick mogrify -format avif -quality 90 -type truecolor -alpha on -path ~/桌面/output *.jpeg
  1. 將目前目錄的GIF轉換成WEBP,使用:
magick mogrify -format webp -path ~/桌面/output *.gif

5. 總結
#

硬碟某個含有JPEG + PNG + GIF組成的目錄,轉換前約3.9GB。

轉換後圖片變成由AVIF + WEBP組成,該目錄變成1.8GB。

所以這些新興的圖片格式壓縮十分有效。惟WEBP目前各大網站和系統支援度較好,AVIF可能還要再等個幾年。

相關文章

將OneDrive教育版轉移至個人版的OneDrive
資訊科技 資訊科技應用 Microsoft
在Hugo生成的靜態網頁內嵌入PDF
資訊科技 Hugo網站架設 Hugo
使用Hugo架設多國語言網站(i18n)
資訊科技 Hugo網站架設 Hugo

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。