PNG? JPG? GIF? 都是圖檔卻有大不同!

Ssu // 蘇
SSUDIO
Published in
4 min readNov 7, 2019
「.jpg」、「.png」、「.gif」都是常見的圖檔格式,那其中的差別到底在哪呢?為什麼要有兩種格式?我可以隨便亂存嗎?會爆炸(?)嗎?網路上有很多這兩者之間的說明文章,有些講解了很複雜的差異,但那些太複雜了,今天就來講一下最基本的差別吧~

其實口訣就是:png可以保存透明、jpg一定要有個背景、gif可以動。最重要的差異就是這樣啦XD

PNG,全名Portable Network Graphic,可以儲存的顏色數量多、保存圖檔的時候不失真;因為支援透明度的儲存,在漸層、透明度的呈現上是很漂亮的。

網路上看到透明背景的圖片都是.png檔案,不過因為「透明」本身是看不到的,因此會以灰白格子呈現,表達「這部份是透明的」,把圖檔下載後貼到其他顏色的背景就會發現其實圖檔本身的背景是透明的啦~

正因為PNG可以將顏色、透明度都保存得很細緻,檔案體積相對也會大很多,代表這個檔案要記憶、容納的資訊量比較大。

網路上有許多壓縮PNG的服務,原理其實就是把相近的顏色融合成一個顏色以減少檔案需要容納的資訊量,例如一張圖本來有200個顏色,把其中相近的顏色都融成同個顏色之後變成150個顏色,也就大大減少了檔案大小了!

不過如果是漸層圖檔的話,有時候因為將相近色融合在一起,導致壓縮後的圖檔漸層的地方有接縫、不漂亮。逛網頁有時候會看到有波浪狀的漸層圖檔,就是因為怕圖檔太大、網頁跑不動而壓縮過,所以才會有那些接縫喔!

JPG,全名Joint Photographic Expert Group,可以儲存的顏色數量比PNG少,但也因為這樣的壓縮法,JPG格式的檔案體積相對比較小,也因此是大多數人愛用的常見格式~

正因為可以儲存的顏色數量比較少,JPG檔無法儲存透明格式,即使檔案是透明的,儲存成JPG檔時也會自動產生一個背景(通常是白底)。

人眼可辨識的顏色數量遠比電腦少很多,因此在生成JPG檔案時,電腦會將人眼無法辨識的顏色犧牲壓縮掉,來達成檔案體積較小的效果。JPG檔很適合呈現彩色照片,因為保留了那些鮮明的色彩,僅壓縮了人眼無法辨識的顏色,因此即使檔案變小了,呈色依舊漂亮。

GIF,全名Graphics Interchange Format,將圖檔的顏色縮減到256色以內進行壓縮,能儲存的顏色數量更少了,因此不適合全彩圖片或漸層圖片。不過最大特色是支援動畫,也就是我們所熟悉的GIF動圖或是fb、imgur常見的會動的梗圖啦~有些從美劇中截圖的動圖梗,畫質看起來充滿顆粒也是因為GIF無法儲存太多顏色的關係唷!

圖片來源:https://reurl.cc/0z4qDY

介紹完畢,當然又要來個表格總結啦XD

😎 這篇文章也可以在 https://www.ssudio.com 看到喔!歡迎去逛逛XD

👉🏻延伸閱讀:RGB? CMYK? 那是什麼? 可以吃嗎?
👉🏻延伸閱讀:UIUX傻傻分不清楚? RWD? 蛤?

--

--

Ssu // 蘇
SSUDIO
Editor for

將近八年的時光都在海外生活,2016年初回到台灣定居,經營著【SSUDIO 艸魚禾蘇】設計工作室,希望能用設計為世界帶來一些小小改變。邊做邊學也過了四年,科技原始人最近默默開始打算跟上時代,在網路上留下足跡,雖然無限期拖稿但歡迎來逛逛聊聊 (*´艸`*) 🌐 www.ssudio.com