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

上次更新：2022-08-18
技術理論

圖片有大有小

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

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

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

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

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

圖片壓縮的原理

首先一個中心概念：

圖檔大小=圖片信息量

圖片壓縮說到底，就是減少圖片的信息量

大家可能會有個迷思：

「減少圖片信息量，是不是破壞了圖片？」

這裡想先請大家不要害怕刪減

因為大部分圖，都會有一些不必要的信息量

在刪去這些多餘的信息量後

我們得到的，將會是同時具備「精美畫面」+「瘦身過的檔案大小」

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

我們要先知道

影響圖片信息量的3個因素

分別可以概括為：圖片格式、尺寸、以及顏色數量

圖片格式

jpg、png、tiff、tga⋯⋯

即使圖片看上去差別不大，但實際上

檔案大小是有差別

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

因為每個格式使用的編碼方法不同

有的格式會把顏色與亮度分開儲存，有些則能儲存寬闊的顏色深度

亦有格式能同時儲存很多張圖⋯⋯

選錯了圖片格式，只會讓電腦空間白白浪費

即使圖片看上去沒什麼大分別，但檔案大小可以差天共地！

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

但大小差距幾乎是100倍

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

看需求！

觀賞用/傳達意思用

一張十分簡單的分鏡稿塗鴉，旨在表達畫面元素

過於高階的格式，非但對表達沒有幫助，反而白白增加檔案大小

這時候我會選擇jpg，因為對畫面的要求不高，圖片單純作為指示，不會放入最終畫面

製作用

對於製作流程中的圖片，畫面品質很重要

因為若果中間有品質流失的情況，將直接影響後期製作，丟失的畫面信息無法修補

所以對於「製作用」規格的圖片，我一律選擇png以上（jpg不考慮）

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

順帶一提，這裡用的素材，來自之前和十八柚子合作的食物動畫

展示之前有好好問過她本人～

其實

一般會接觸到的格式也不會很多

只要記住jpg與png這兩個，就足以處理大多情況了

jpg是性價比最高的圖片格式，作為觀賞作用，檔案超小，畫面也不會太差

png屬於高品質的圖片格式，檔案會比jpg大，優勢是畫質良好

選擇適合的圖片格式！

圖片尺寸

這點我相信很容易理解

尺寸越大，檔案越大

不過大家又知不知道，圖片尺寸有哪些單位？

以下是數碼媒體最常用的兩個單位：

（Full HD也稱1080p，寬1920個像素點，高1080個像素點）

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

帶來的不同效果：

360p壓縮下，會看到明顯的模糊

1080p算是在「可看性」與「檔案大小」之間的完美平衡

4k則是留給追求超清畫質的人了，放大看可以看出，4k在細節上是比1080p要銳利一點（大家主要看植物邊緣光的部分）

一般螢幕觀看，最常用的配置

1920×1080 72dpi

就已經是不錯的品質了！（以下圖片就是1920×1080 72dpi的配置）

圖片顏色數量

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

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

你想像⋯一張圖10乘10像素，總共有100像素

那麼照道理來，每一格像素會儲存一個資料，那就是100份資料

但其實，我們的電腦並不完全是這樣計算的

電腦懂得如何「偷懶」

如果同一張圖，有2個像素是完全相同顏色的話

電腦在計算時，就可以儲存少1份顏色資料

有10個像素是完全同1種顏色的話

電腦計算時，那10個像素就可以只儲存1份顏色資料

極端來說，如果整張圖只有1款顏色（這屬於除非故意，否則不會發生的情況）

那麼

整張圖就只需要儲存1份顏色資料

簡單來說

越多相同顏色，檔案越小

而我們要做的，就是

在不影響觀賞體驗的情況下，減少圖片的顏色數量

如何做到？

我們要知道

一張正常的照片，必然存在很多難以辨別差異的相似色

ff9a5c是《會長動畫筆記》的主題色

若把最後的「c」改成「d」，其實已經是另外一種顏色了

這兩種顏色的差別，用肉眼幾乎是很難辨別出差異的

而正正是這類的近似色的情況，在電腦圖片上，到處都是⋯⋯

就像是下方這張圖

我就是隨手點的幾下顏色，每一下都不同

大家可以截圖，自己嘗試點一點顏色

我們只需要把這些相似顏色合併

例如把d84108、d24309、d64107這三個相似色

統一改成其中之一：d84108

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

會長的壓圖方法

作為Macbook使用者

我最常用，認為最方便的方法⋯⋯

Mac自帶的預覽程式

系統自帶，極為方便！

即使是photoshop如此好用的工具

也有幾秒鐘的開啟時間，雖然時間上差別很小

但感覺上的差別就稍大

從「使用者體驗」的角度來解釋

這就是「有打斷」與「無打斷」的分別

總之

在體驗到真正的方便之後，我已經無法回頭了～XD

改變大小：

工具>調整大小

就可以選擇想要的長闊、dpi（解像度）

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

改變格式：

檔案>輸出⋯

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

要壓圖的話，選jpg就好

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

當然

不是每個人都喜歡用mac

Windows同學也可以使用⋯

Photoshop

調整大小的操作方法也是很簡單
3個快捷鍵按下去，Command/Control + Alt + I
或者是沒有快捷鍵做法，Image>Image Size…

（沒錯會長是中文系統但英文軟件⋯XD）

至於轉格式

其實Photoshop的每次存圖，都可以是轉格式的過程

也是最快的作法

與一般直接存圖不同，Photoshop有個「專為網頁壓圖而設計」的功能

Save for Web！

比起直接Save as或是Export as

Save for Web能讓你對細節與準確度有更精確的把握

選擇「2-Up」後

能即時預覽「原圖」與「壓縮後」的對比

這樣能方便測試出「自己能接受的品質極限」

是令「最好畫面」與「最小檔案」之間完美平衡的一大利器

（這個方法，是舊公司裡一個很友善的老同事告訴我的～嘻嘻）

上面兩個主要都是處理「圖片格式」與「圖片尺寸」的

接下來就要介紹

把相似色同化的工具：

TinyPNG.com

一個線上網站，它會幫你尋找圖片中的相似色，然後合併

自動化瘦身過程～

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

原圖：44kb

減顏色後：29kb

檔案是瘦身了，但畫面卻難以察覺出差別！

又或者該說⋯

兩者的差別之小，已經達到「不會影響觀賞體驗」的程度了