---
title: "JPEG 怎麼存才不會糊？壓縮原理圖解：8×8 方塊、量化、色度抽樣與重存三十次實驗"
slug: jpeg-compression-why-images-get-blurry
url: https://rar.design/posts/jpeg-compression-why-images-get-blurry
published_at: 2026-10-21
author: "設計師 Riven"
category: "平面設計"
access: public_access
---

# JPEG 怎麼存才不會糊？壓縮原理圖解：8×8 方塊、量化、色度抽樣與重存三十次實驗

> 三條線索查出照片變糊的原因，照片、截圖、Logo 各該怎麼轉存

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-10-21

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