壓圖等於降低圖片品質？｜圖檔壓縮的3個原理 - 會長動畫筆記

而圖檔格式的另一熱門png，則使用幾乎無損的方式來壓縮圖片，導致png在大部分情況下都會比jpg大. 選錯了圖片格式，只會讓電腦空間白白浪費. 會長動畫筆記首頁文章Blender教學CG工具包作品選單首頁文章Blender教學CG工具包作品壓圖等於降低圖片品質？｜圖檔壓縮的3個原理2020-08-12技術理論圖片有大有小是不是大的一定好？還是在浪費儲存空間？會長我寫文章、做配圖的時候，就經常要壓縮圖片圖片太大會降低讀取速度，圖片壓太小又會降低圖片品質⋯⋯究竟圖片壓縮是怎樣運作的？而怎樣的品質才算是可接受的？圖片壓縮的原理首先一個中心概念：圖檔大小=圖片信息量圖片壓縮說到底，就是減少圖片的信息量大家可能會有個迷思：「減少圖片信息量，是不是破壞了圖片？」這裡想先請大家不要害怕刪減因為大部分圖，都會有一些不必要的信息量在刪去這些多餘的信息量後我們得到的，將會是同時具備「精美畫面」+「瘦身過的檔案大小」「用最少的信息量，保留最完整的資料」我們要先知道影響圖片信息量的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的FullHD【1920x1080】（FullHD也稱1080p，寬1920個像素點，高1080個像素點）dpi（每英吋點數）全寫為dotsperinches，印刷用詞，為了詮釋「1粒像素在現實中有多大？」而出現的一個數值。

在相同的畫面品質下，只改變圖片尺寸帶來的不同效果：360p壓縮下，會看到明顯的模糊1080p算是在「可看性」與「檔案大小」之間的完美平衡4k則是留給追求超清畫質的人了，放大看可以看出，4k在細節上是比1080p要銳利一點（大家主要看植物邊緣光的部分）一般螢幕觀看，最常用的配置1920×108072dpi就已經是不錯的品質了！（以下圖片就是1920×108072dpi的配置）會長之前農耕體驗時，用iPhone拍的相片圖片顏色數量一張含有橙、藍、淺藍、黑，4種顏色的圖片，檔案會較大而一張只有1種顏色的圖，檔案則較小。

左圖只有1種顏色、右圖則有4種顏色你想像⋯一張圖10乘10像素，總共有100像素那麼照道理來，每一格像素會儲存一個資料，那就是100份資料但其實，我們的電腦並不完全是這樣計算的電腦懂得如何「偷懶」如果同一張圖，有2個像素是完全相同顏色的話電腦在計算時，就可以儲存少1份顏色資料有10個像素是完全同1種顏色的話電腦計算時，那10個像素就可以只儲存1份顏色資料極端來說，如果整張圖只有1款顏色（這屬於除非故意，否則不會發生的情況）那麼整張圖就只需要儲存1份顏色資料左圖只有一個顏色，右圖則包含從黑色到白色的過百種顏色簡單來說越多相同顏色，檔案越小而我們要做的，就是在不影響觀賞體驗的情況下，減少圖片的顏色數量如何做到？我們要知道一張正常的照片，必然存在很多難以辨別差異的相似色ff9a5c是《會長動畫筆記》的主題色若把最後的「c」改成「d」，其實已經是另外一種顏色了ff9a5cff9a5d這兩種顏色的差別，用肉眼幾乎是很難辨別出差異的而正正是這類的近似色的情況，在電腦圖片上，到處都是⋯⋯就像是下方這張圖我就是隨手點的幾下顏色，每一下都不同大家可以截圖，自己嘗試點一點顏色我們只需要把這些相似顏色合併例如把d84108、d24309、d64107這三個相似色統一改成其中之一：d84108就能減少所使用的顏色數量會長的壓圖方法作為Macbook使用者我最常用，認為最方便的方法⋯⋯Mac自帶的預覽程式Mac系統自帶的圖片預覽程式系統自帶，極為方便！即使是photoshop如此好用的工具也有幾秒鐘的開啟時間，雖然時間上差別很小但感覺上的差別就稍大從「使用者體驗」的角度來解釋這就是「有打斷」與「無打斷」的分別總之在體驗到真正的方便之後，我已經無法回頭了～XD改變大小：工具>調整大小就可以選擇想要的長闊、dpi（解像度）下方更是貼心地為你計算，改變前後的檔案大小工具>調整大小選擇長闊、dpi改變格式：檔案>輸出⋯可以選擇想要輸出成的檔案格式要壓圖的話，選jpg就好至於壓縮的品質，我一般會在60-80%之間選擇檔案>輸出⋯選擇想輸出成的格式當然不是每個人都喜歡用macWindows同學也可以使用⋯Photoshop調整大小的操作方法也是很簡單3個快捷鍵按下去，Command/Control+Alt+I或者是沒有快捷鍵做法，Image>ImageSize…（沒錯會長是中文系統但英文軟件⋯XD）Image>ImageSize…上方的ImageSize只供參考，數值不能作準至於轉格式其實Photoshop的每次存圖，都可以是轉格式的過程也是最快的作法與一般直接存圖不同，Photoshop有個「專為網頁壓圖而設計」的功能SaveforWeb！File>SaveforWeb(Legacy)...選擇2-Up可以實時預覽壓圖細節比起直接Saveas或是ExportasSaveforWeb能讓你對細節與準確度有更精確的把握選擇「2-Up」後能即時預覽「原圖」與「壓縮後」的對比這樣能方便測試出「自己能接受的品質極限」是令「最好畫面」與「最小檔案」之間完美平衡的一大利器（這個方法，是舊公司裡一個很友善的老同事告訴我的～嘻嘻）上面兩個主要都是處理「圖片格式」與「圖片尺寸」的接下來就要介紹把相似色同化的工具：TinyPNG.com一個線上網站，它會幫你尋找圖片中的相似色，然後合併自動化瘦身過程～以下是用啫喱圖做的示範：減顏色後原圖原圖：44kb減顏色後：29kb檔案是瘦身了，但畫面卻難以察覺出差別！又或者該說⋯兩者的差別之小，已經達到「不會影響觀賞體驗」的程度了上一頁上一篇MotionGraphic真的不簡單｜logo動畫拆解下一篇嘗試用Minecraft風格創造出電影感下一篇會長動畫筆記首頁文章Blender教學CG工具包作品選單首頁文章Blender教學CG工具包作品請會長喝杯咖啡嗎？在Patreon上資助會長，讓你成為「會長動畫筆記」的一部分會長的Patreon：Patreon會長的FB/IG：FacebookInstagram「知識不會因為分享而貶值，反而籍著分享能收集更多知識。

」©2020會長動畫筆記AllRightsReserved