2026年10月21日 上午 2:09
平面設計DESIGN BASICS · IMAGE FORMATS
QUICK ANSWER
JPEG 會糊，是因為存檔的七個步驟裡有兩步會丟資料：量化把每個 8×8 方塊的細紋四捨五入，很多變成零；色度抽樣讓每 2×2 個像素共用一個顏色。照片受影響很小，文字、Logo、截圖最明顯。照片存 JPEG、品質從 75 左右開始試；有字有線的圖存 PNG；原始檔永遠留一份不失真的版本，JPEG 留到最後一步再轉。
CONTENTS
01
09
11
CHAPTER 01 · THREE MARKS
一張剛畫好的海報，按下「轉存 JPEG」，一秒鐘就模糊到像是打了馬賽克。大家習慣說「糊掉」，但把畫面放大來看，壞掉的地方其實長得不一樣：天空變成一格一格，白字旁邊多了一圈雜點，紅色的字跟藍底交界處滲出紫色。
這三種痕跡各有名字，也各有兇手：方塊感（blocking）、邊緣雜點（ringing）、顏色滲開（color bleed）。弄清楚是哪一種，就知道該調哪個設定，也就不必一路把品質往上拉。
CHAPTER 02 · SEVEN STEPS
JPEG 是 1986 年開始制定、1992 年通過的國際標準，名字是制定它的委員會 Joint Photographic Experts Group 的縮寫。最常見的「基本模式」存檔時會照固定順序走完七步：
JPEG 存檔七步驟（基本模式）
STEP 1
轉色
RGB 換成亮度 Y 與色度 Cb、Cr
不會弄丟東西
STEP 2
抽樣
色度每 2×2 像素留一個平均
會失真
STEP 3
切塊
切成 8×8 的小方塊
不會弄丟東西
STEP 4
DCT
改用 64 種花紋描述一塊
不會弄丟東西
STEP 5
量化
除以量化表、四捨五入
會失真
STEP 6
排列
之字形讀出，把 0 集中到後面
不會弄丟東西
STEP 7
編碼
連續的 0 打包、短碼編碼
不會弄丟東西
開檔時照同樣的順序倒著走回去。轉色與 DCT 計算時只有極小的取整誤差，真正會丟資料的是抽樣與量化兩步。
第一步把 RGB 換成一個亮度和兩個色度，接著才分塊、轉換、壓縮。七步裡只有兩步真正會丟東西，後面會一一對到三種痕跡。想先看完整的動態示範，這支英文影片把每一步畫得很清楚：
▲ Branch Education：How are Images Compressed? JPEG In Depth
6.2 MB
一張 1920×1080 未壓縮的大小（每像素 3 bytes）
10:1～20:1
照片常見的壓縮比，肉眼難辨的範圍，依內容而異
64
一個 8×8 方塊的像素數，也是 DCT 之後的花紋數
CHAPTER 03 · 8×8 BLOCKS
第三步把畫面切成 8×8 的小方塊，之後每一塊都獨立計算，完全不管隔壁長什麼樣子。如果兩塊在後面的步驟被捨入成不同的數值，原本平順的漸層到了方塊邊界就會突然跳一階。
這也是方塊感最常出現在天空、皮膚、漸層背景的原因：平順的區域沒有紋理可以遮住接縫。至於每一塊為什麼會被壓得這麼平，答案在第五步。
CHAPTER 04 · DCT
第四步叫 DCT（離散餘弦轉換），名字最可怕，嫌疑最大。它做的事其實很單純：把一個 8×8 方塊改用 64 種固定的花紋來描述。左上角那一格是整塊的平均，越往右下花紋越細，每一格記錄這個方塊用了多少那種花紋。
DCT 只是換一種說法，資訊沒有變少。它的價值在於：一般照片的方塊，大部分內容都集中在左上角少數幾種粗花紋裡，這讓下一步有地方可以省。
CHAPTER 05 · QUANTIZATION
第五步是真正的兇手。每一種花紋的用量都要除以「量化表」上對應的一個數，再四捨五入成整數。打開圖片時會乘回去，但四捨五入掉的部分回不來。
量化表左上角的數字小、右下角的數字大，所以越細的花紋除得越狠，越容易變成零。白字的邊緣需要大量細花紋才描述得準，細花紋一被捨掉，還原後邊緣旁邊就多出一圈雜點，這就是第二條線索「邊緣雜點」。
“
DCT 把方塊翻譯成花紋，量化決定哪些花紋留下來。
NOTE
JPEG 標準沒有規定一定要用哪張量化表，附錄裡的兩張表只是範例，由存檔的軟體自己決定、寫進檔案裡。大部分軟體都從這兩張範例表衍生。
CHAPTER 06 · QUALITY SLIDER
每天都會碰到的品質滑桿，調的就是這張量化表。品質越高，除數越小；品質越低，除數越大。以最常見的 libjpeg 系列為例：品質 50 用的就是標準附錄的範例表，75 是表上每個數字減半，100 則是全部變成 1。
軟體
品質刻度
說明
libjpeg／libjpeg-turbo
0–100
預設 75；50 是範例表原樣，100 是全部除以 1
Lightroom Classic 轉存
0–100
跟 libjpeg 同樣是 0 到 100 的刻度
Photoshop 另存新檔
0–12
Adobe 只公開刻度範圍，沒有公開對應哪張量化表
sharp（Node.js）
1–100
預設 80
要注意兩件事。第一，品質數字並非百分比，品質 80 並不代表保留八成畫質。第二，每個軟體的刻度與量化表都不一樣，A 軟體的 80 和 B 軟體的 80 存出來的檔案未必相同，Photoshop 的 12 也沒有官方換算成 0 到 100 的哪個數字。
CHAPTER 07 · CHROMA SUBSAMPLING
既然量化是兇手，把品質拉到 100、除數全部變 1，是不是就沒事了？實測結果是：雜點不見了，紅字旁邊的紫邊還在。第三條線索的兇手是另一個步驟，第二步「色度抽樣」。
存 JPEG 時，畫面通常會先拆成亮度與色度兩層。我們的眼睛對亮度細節比較敏感，對顏色細節沒那麼敏感，所以最常見的 4:2:0 設定是亮度全部保留，色度每 2×2 個像素只留一個平均，每個色度通道只剩四分之一。照片裡相鄰像素的顏色本來就接近，平均了也看不出來；但紅字壓在藍底上，四個像素一平均就變成紫色。
所以「品質 100」並不等於原圖。色度抽樣是存檔軟體可以選的設定，並非每個軟體都有開關；有字有色塊的圖，最穩的做法還是直接存成不失真的 PNG。
CHAPTER 08 · PHOTO VS TEXT
結案：七步裡會失真的是色度抽樣和量化兩步，後面的排列與編碼只是把數字收得更緊，不會再弄丟東西。但同一張量化表，為什麼照片幾乎看不出差別，字卻髒得這麼明顯？
答案寫在名字裡。JPEG 的 P 是 Photographic，標準本身就寫明它是為「連續色調」的影像設計的，照片正是這類影像的典型。照片的明暗變化平緩，內容集中在少數粗花紋；文字、線稿、平塗色塊則需要大量細花紋描述硬邊，偏偏這些細花紋最先被捨掉。像素畫也是同一類圖，這也是為什麼像素畫一存成 JPEG 就特別慘。
CHAPTER 09 · RE-SAVING
「JPEG 存一次壞一次」流傳很廣，實際存三十次看看。左邊同一張圖、同樣的品質 75 一直重存；右邊每次存之前先從左邊裁掉一個像素。
原因跟 8×8 格子有關。同一張圖用同樣設定重存，數字已經是量化表的倍數，再除再捨入還是原值，很快就穩定下來。裁掉一個像素會讓整張圖相對格子位移，每一塊裝進的內容都變了，量化就得重來一次。縮放、旋轉、加字、換品質或換軟體都是同樣的道理。
穩定也有條件
同設定重存會穩定，這個結論主要對照片成立。平塗色塊加飽和色的圖形，同樣設定也可能要存十幾、二十次才穩定。換句話說，越不適合 JPEG 的圖，重存越吃虧。
CHAPTER 10 · HOW TO EXPORT
1
照片用 JPEG
在 0–100 刻度上從 75 左右開始試，看到瑕疵再往上加 5 到 10。95 以上檔案暴增，差別很難看出來。
2
截圖、文字、Logo、線稿用 PNG
PNG 不失真，存進去什麼就拿回什麼。這類平塗加硬邊的圖，PNG 有時還比 JPEG 小。需要透明背景也只能選 PNG、WebP 或 AVIF。
3
留一份不失真的原始檔
編輯時一直存 PSD、PNG 或其他不失真格式，JPEG 留到最後一步、從原始檔直接轉出。要再改就回原始檔改，不要拿 JPEG 接著修。
另外幾件常被問的事：JPEG 沒有透明通道，透明的地方會被填成底色；Photoshop 存 JPEG 只支援 8 位元，16 位元文件會被降成 8 位元；網頁上可以考慮 WebP 或 AVIF，兩者都支援透明，主流瀏覽器也都支援了。上傳到社群平台時，平台調整尺寸就得重新編碼一次，所以上傳前那一份更該從原始檔直接轉出。
如果你做的是動態作品，例如用程式逐格算出畫面的純程式碼動畫，中間的逐格輸出也建議存 PNG，最後一步再交給影片編碼器壓縮。
CHAPTER 11 · TAKEAWAYS
痕跡
兇手
怎麼避開
方塊感
量化太重，每塊只剩平均值
品質別壓太低；平順漸層多的圖品質往上加
邊緣雜點
量化把細花紋捨成零
有字有線的圖改存 PNG
顏色滲開
色度抽樣，每 2×2 共用一個顏色
關掉色度抽樣（4:4:4），或改存 PNG
越存越糊
裁切、縮放、換品質後重存
永遠從不失真的原始檔轉出
JPEG 本身沒有好壞，它是為照片設計的工具，用在照片上，十分之一的檔案大小幾乎看不出差別。問題出在把它用在不適合的圖上，或是拿它當工作檔一改再改。每一次轉存都會經過那兩個失真的步驟，記得存之前想一下：這張圖是照片嗎？這是最後一步嗎？
“
每一次轉存，都是你的決定。
RELATED READS · 延伸閱讀
像素畫怎麼畫？Pixel Art 入門
同一系列的上一支影片，從紅白機講到 HD-2D，學會調色盤、抖色與反鋸齒。
閱讀文章 →純程式碼動畫怎麼做？拆解 12 種動態效果
這支 JPEG 影片的畫面也是用程式逐格算出來的，原理在這篇。
閱讀文章 →AI 動畫怎麼做？像素巫師、沙畫與 3D 城堡
單檔 HTML、程式碼轉 MP4、操控 Blender，四種用程式做動畫的路線。
閱讀文章 →Photoshop 復古印刷感海報七步驟
印刷網點也是把影像拆成格子再重組，換個角度看同一件事。
閱讀文章 →動態設計十二法則逐條圖解
做教學動畫時，哪些動作該慢、哪些該停，靠的就是這十二條。
閱讀文章 →Photoshop 未來神秘感人像：螢幕掃描線
用拼貼與動態模糊做出數位訊號感，跟 JPEG 方塊是近親。
閱讀文章 →EXTRA · LINKS
ITU-T T.81（JPEG 標準原文，PDF） Annex K 有本文用的兩張範例量化表
JPEG 委員會官方頁 標準的制定時間與現況
MDN 影像格式指南 照片、截圖、Logo 各適合哪種格式
libjpeg-turbo 使用說明 品質刻度、預設 75 與色度抽樣的設定
Adobe Photoshop 說明：儲存圖像格式 JPEG 品質 0 到 12 與只支援 8 位元
FAQ · 常見問題
A：沒有唯一的標準答案。在 0 到 100 的刻度上，75 到 85 是常見的起點，libjpeg 的預設是 75。看到瑕疵就往上加 5 到 10；95 以上檔案會暴增，畫質差別卻很難看出來。Photoshop 另存新檔用的是 0 到 12 的刻度，兩種刻度之間沒有官方換算。
A：還是會失真。品質 100 只是把量化表的除數全部設成 1，色度抽樣和計算時的取整誤差還在。用常見的 4:2:0 抽樣時，紅藍交界這種飽和色邊緣照樣會滲色，要完全不失真就存成 PNG。
A：沒有固定次數。同一張圖一個像素都不改、用完全相同的設定重存，照片通常存幾次就穩定下來，不再變差。只要中間裁切、縮放、加字或換品質，每存一次就重新失真一次，所以要改就回原始檔改。
A：沒有差別，是同一種格式。早期部分系統的副檔名只能三個字，才會常見 .jpg；.jpe、.jfif 也是同一種格式。
A：一般的 JPEG 沒有透明通道，透明的地方會被填成你選的底色。需要透明背景就用 PNG、WebP 或 AVIF。
A：JPEG 是為照片這類連續色調的影像設計的。截圖、文字、Logo 有大片平塗和銳利邊緣，邊緣需要的細紋正好是量化最容易捨掉的部分，平塗區又沒有紋理遮住瑕疵，所以字的旁邊會冒出一圈雜點。這類圖存 PNG 最乾淨。
A：不會。開檔、預覽、複製檔案都不會改變內容，只有重新存檔才會再跑一次失真的步驟。
