作者:辛宜 / 臺灣大學計算機及資訊網路中心教學研究組行政專員
資訊設備的提升,人們對於資訊的需求也在大幅度的提高,視覺影像也有變動,從早期的靜態圖片到現今的動態圖檔。但動態圖檔是什麼呢?動態圖檔大家往往會立刻聯想到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。
參考文獻