首頁 >技術論壇
動態圖檔APNG簡介
資訊設備的提升，人們對於資訊的需求也在大幅度的提高，視覺影像也有變動，從早期的靜態圖片到現今的動態圖檔。但動態圖檔是什麼呢？動態圖檔大家往往會立刻聯想到GIF(Graphics Interchange Format, GIF)，但除了GIF檔案其實還有另一種檔案格式稱為APNG(Animated Portable Network Graphics, APNG)，也是動態圖檔。它與GIF檔案的差異為何？請待我為大家詳細解說...
GIF與APNG
動態影像GIF(Graphics Interchange Format,GIF)起源於1987年由CompuServe公司開發，因為體積小但影像顯示清晰，打破大家對體積小影像呈現較為模糊的觀念，這項技術對於早期播接網路時代具有吸引力。GIF是一種點陣圖形顯示格式，以8位元（256種顏色）圖像顯示呈現。在GIF格式可以分為87a和89a，89a提高了87a的特性，圖形在顯示時分上下多次掃描完成，透過交織(Interleave)特性比非交織特性的顯示速度更加快速。GIF格式早期主要處理黑白相片為主，但現今使用的GIF格式為89a格式。簡單說GIF是一種壓縮文件，也是全球網路資訊廣泛應用的網路傳輸圖像格式。
APNG(Animated Portable Network Graphics, APNG)格式由Mozilla公司社群2004年創立，在2007年開始陸續有許多軟體開始支援APNG格式。APNG拆開字面解釋會發現是A+PNG，其實是PNG點陣圖形擴充動畫，但其實並未獲得PNG官方認可。擴充方式類似GIF格式(圖1)的89a格式類型進行，APNG格式相對於GIF格式影像顯示較為清晰，原因是因為APNG格式(圖2)可以突破256種顏色，打破GIF格式256種顏色的限制。
在動態影像中APNG格式較GIF格式影像更佳清晰是因為APNG是無壓縮圖檔，所以在讀取檔案的過程中所花費的時間相對較長。這也就是為什麼雖然APNG格式顯示較GIF格式清晰卻沒有廣泛使用的原因，早期連Google都並未支援。但隨著資訊技術的進步，Google Chrome於2018年6月開始支援APNG格式， APNG不被瀏覽器支援的問題也獲得解決。因為科技的進步讓APNG不再受到限制，現在的LINE動態貼圖為了高清晰的畫質解析度，要求投稿者必需製作APNG格式才能上傳LINE Creators Market上架出版LINE動態貼圖。
圖1. GIF檔案 圖2. APNG檔案
GIF檔案製作
動態影像GIF(Graphics Interchange Format, GIF)可以使用Adobe Photoshop製作。使用Photoshop 內視窗工具裡的時間軸進行GIF動態影像製作。
在Photoshop CC軟體裡透過圖層工作區域將要顯示的圖片先進行處理，透過眼睛功能可以將圖層依據需求進行開啟或關閉；在視窗工具裡開啟時間軸開啟影格動畫模式進行GIF檔案編輯，此方法是使用圖片的方式呈現；若是習慣時間軸模式也可以透過時間軸的方式進行GIF檔案編輯。使用時間軸將需要的圖層逐一加入並設定出現時間，若圖片再播放時不是非常流暢，可以透過Photoshop CC 時間軸內的補間動畫功能，讓不順暢的圖層針對上一個或是下一個圖層進行動畫補強的動作，不需要自己再額外花時間製作圖片即可完成順暢的動態圖檔，如下圖(圖3)。
圖3. Photoshop CC製作GIF檔案
藉由Photoshop CC時間軸製作動態圖片檔案，將製作完成動態圖片檔案點選檔案裡的轉存使用儲存為網頁用(舊版)檔案格式要選擇GIF檔案，若要重覆播放GIF圖檔要設定動畫重複播放選項為「永遠」；若只需要播放一次就讓動態圖片檔案停止選項為「一次」確定格式之後即可點選「完成」輸出動態圖片檔案為GIF格式圖檔，輸出的GIF格式圖檔可以使用Google瀏覽器模擬瀏覽。
APNG檔案製作
動態影像APNG(Animated Portable Network Graphics,APNG)可以使用APNG Assembler製作。使用APNG Assembler軟體製作只需要三個步驟即可完成APNG檔案格式(圖4、5、6)。
圖4. 圖片檔案進行壓縮
圖5. Playback Settings設定APNG檔案的秒數
圖6. Delays Settings設定APNG檔案每張圖片的秒數，建議有幾張圖片就設定幾秒
使用APNG Assembler製作動態圖片檔案，先使用Pngyu將圖檔壓縮，將要製作成動態圖片檔案的圖片準備好，並依序匯入APNG Assembler進行製作。匯入的圖片設定播放時間，完成後即可製作成APNG檔案格式的動態圖片檔案，輸出的APNG檔案格式可以透過Google瀏覽器模擬瀏覽。
詳細操作方式歡迎上資訊應用課程網站報名視覺影像系列課程，視覺影像系列課程開設Adobe Photoshop CC、Adobe Illustrator CC、InDesign、LINE動態貼圖等系列課程，歡迎上資訊應用課程網站觀看詳細課程訊息https://teach.cc.ntu.edu.tw/course。