壓圖等於降低圖片品質?|圖檔壓縮的3個原理

圖片有大有小

是不是大的一定好?還是在浪費儲存空間?

會長我寫文章、做配圖的時候,就經常要壓縮圖片

圖片太大會降低讀取速度,圖片壓太小又會降低圖片品質⋯⋯

究竟圖片壓縮是怎樣運作的?

而怎樣的品質才算是可接受的?

圖片壓縮的原理

首先一個中心概念:

圖檔大小=圖片信息量

圖片壓縮說到底,就是減少圖片的信息量
大家可能會有個迷思:

「減少圖片信息量,是不是破壞了圖片?」

這裡想先請大家不要害怕刪減
因為大部分圖,都會有一些不必要的信息量
在刪去這些多餘的信息量後
我們得到的,將會是同時具備「精美畫面」+「瘦身過的檔案大小」

「用最少的信息量,保留最完整的資料」

我們要先知道
影響圖片信息量的3個因素
分別可以概括為:圖片格式、尺寸、以及顏色數量

圖片格式

jpg、png、tiff、tga⋯⋯
即使圖片看上去差別不大,但實際上
檔案大小是有差別
左圖是jpg格式、右圖是png格式

為什麼圖片格式不同會導致大小分別呢?

因為每個格式使用的編碼方法不同
有的格式會把顏色與亮度分開儲存,有些則能儲存寬闊的顏色深度
亦有格式能同時儲存很多張圖⋯⋯

JPG

例如最泛用的jpg,就是用yCbCr的方式來編碼的,犧牲人眼較難察覺差別的圖片信息,來換取超瘦身的檔案大小

PNG

而圖檔格式的另一熱門png,則使用幾乎無損的方式來壓縮圖片,導致png在大部分情況下都會比jpg大

選錯了圖片格式,只會讓電腦空間白白浪費
即使圖片看上去沒什麼大分別,但檔案大小可以差天共地!

簡單的圖片,就算用tga檔,畫面也不會有大的變化

但大小差距幾乎是100倍

那我們該如何選擇圖片格式呢?

看需求!

觀賞用/傳達意思用

一張十分簡單的分鏡稿塗鴉,旨在表達畫面元素
過於高階的格式,非但對表達沒有幫助,反而白白增加檔案大小
這時候我會選擇jpg,因為對畫面的要求不高,圖片單純作為指示,不會放入最終畫面

製作用

對於製作流程中的圖片,畫面品質很重要
因為若果中間有品質流失的情況,將直接影響後期製作,丟失的畫面信息無法修補
所以對於「製作用」規格的圖片,我一律選擇png以上(jpg不考慮)

動畫就是很多張圖串連在一起~

順帶一提,這裡用的素材,來自之前和十八柚子合作的食物動畫
展示之前有好好問過她本人~
其實
一般會接觸到的格式也不會很多
只要記住jpg與png這兩個,就足以處理大多情況了
jpg是性價比最高的圖片格式,作為觀賞作用,檔案超小,畫面也不會太差
png屬於高品質的圖片格式,檔案會比jpg大,優勢是畫質良好

選擇適合的圖片格式!

圖片尺寸

這點我相信很容易理解

尺寸越大,檔案越大

不過大家又知不知道,圖片尺寸有哪些單位?
以下是數碼媒體最常用的兩個單位:

pixels(像素)

又簡稱px,數碼世界最常見的單位。大家平常最常見的像素大小,大概是16比9的Full HD【1920 x 1080】

(Full HD也稱1080p,寬1920個像素點,高1080個像素點)

dpi(每英吋點數)

全寫為dots per inches,印刷用詞,為了詮釋「1粒像素在現實中有多大?」而出現的一個數值。

在相同的畫面品質下,只改變圖片尺寸

帶來的不同效果:
360p壓縮下,會看到明顯的模糊
1080p算是在「可看性」與「檔案大小」之間的完美平衡
4k則是留給追求超清畫質的人了,放大看可以看出,4k在細節上是比1080p要銳利一點(大家主要看植物邊緣光的部分)
一般螢幕觀看,最常用的配置

1920×1080 72dpi

就已經是不錯的品質了!(以下圖片就是1920×1080 72dpi的配置)

會長之前農耕體驗時,用iPhone拍的相片

圖片顏色數量

一張含有橙、藍、淺藍、黑,4種顏色的圖片,檔案會較大

而一張只有1種顏色的圖,檔案則較小。

左圖只有1種顏色、右圖則有4種顏色
你想像⋯一張圖10乘10像素,總共有100像素
那麼照道理來,每一格像素會儲存一個資料,那就是100份資料
但其實,我們的電腦並不完全是這樣計算的

電腦懂得如何「偷懶」

如果同一張圖,有2個像素是完全相同顏色的話
電腦在計算時,就可以儲存少1份顏色資料
有10個像素是完全同1種顏色的話
電腦計算時,那10個像素就可以只儲存1份顏色資料
極端來說,如果整張圖只有1款顏色(這屬於除非故意,否則不會發生的情況)
那麼
整張圖就只需要儲存1份顏色資料
左圖只有一個顏色,右圖則包含從黑色到白色的過百種顏色
簡單來說
越多相同顏色,檔案越小
而我們要做的,就是
在不影響觀賞體驗的情況下,減少圖片的顏色數量
如何做到?
我們要知道
一張正常的照片,必然存在很多難以辨別差異的相似色
ff9a5c是《會長動畫筆記》的主題色
若把最後的「c」改成「d」,其實已經是另外一種顏色了
ff9a5c
ff9a5d
這兩種顏色的差別,用肉眼幾乎是很難辨別出差異的
而正正是這類的近似色的情況,在電腦圖片上,到處都是⋯⋯
就像是下方這張圖
我就是隨手點的幾下顏色,每一下都不同
大家可以截圖,自己嘗試點一點顏色
我們只需要把這些相似顏色合併
例如把d84108d24309d64107這三個相似色
統一改成其中之一:d84108

就能減少所使用的顏色數量

會長的壓圖方法

作為Macbook使用者
我最常用,認為最方便的方法⋯⋯

Mac自帶的預覽程式

Mac系統自帶的圖片預覽程式
系統自帶,極為方便!
即使是photoshop如此好用的工具
也有幾秒鐘的開啟時間,雖然時間上差別很小
但感覺上的差別就稍大
從「使用者體驗」的角度來解釋
這就是「有打斷」與「無打斷」的分別
總之
在體驗到真正的方便之後,我已經無法回頭了~XD

改變大小:

工具>調整大小

就可以選擇想要的長闊、dpi(解像度)

下方更是貼心地為你計算,改變前後的檔案大小

工具>調整大小
選擇長闊、dpi

改變格式:

檔案>輸出⋯

可以選擇想要輸出成的檔案格式

要壓圖的話,選jpg就好

至於壓縮的品質,我一般會在60-80%之間選擇

檔案>輸出⋯
選擇想輸出成的格式
當然
不是每個人都喜歡用mac
Windows同學也可以使用⋯

Photoshop

調整大小的操作方法也是很簡單
3個快捷鍵按下去,Command/Control + Alt + I
或者是沒有快捷鍵做法,Image>Image Size…
(沒錯會長是中文系統但英文軟件⋯XD)
Image>Image Size…
上方的Image Size只供參考,數值不能作準
至於轉格式
其實Photoshop的每次存圖,都可以是轉格式的過程
也是最快的作法
與一般直接存圖不同,Photoshop有個「專為網頁壓圖而設計」的功能

Save for Web!

File>Save for Web (Legacy)...
選擇2-Up可以實時預覽壓圖細節
比起直接Save as或是Export as
Save for Web能讓你對細節與準確度有更精確的把握
選擇「2-Up」後
能即時預覽「原圖」與「壓縮後」的對比
這樣能方便測試出「自己能接受的品質極限」
是令「最好畫面」「最小檔案」之間完美平衡的一大利器

(這個方法,是舊公司裡一個很友善的老同事告訴我的~嘻嘻)

上面兩個主要都是處理「圖片格式」與「圖片尺寸」的
接下來就要介紹
把相似色同化的工具:
一個線上網站,它會幫你尋找圖片中的相似色,然後合併
自動化瘦身過程~

以下是用啫喱圖做的示範:

減顏色後
原圖
原圖:44kb
減顏色後:29kb
檔案是瘦身了,但畫面卻難以察覺出差別!
又或者該說⋯
兩者的差別之小,已經達到「不會影響觀賞體驗」的程度了