การบีบอัดภาพทำงานอย่างไร: อธิบายเรื่อง JPEG, PNG และ WebP

คำตอบสั้น ๆ: การบีบอัดภาพทำงานอย่างไร?

รูปแบบภาพเว็บทุกประเภททำหน้าที่สองอย่าง: คาดการณ์ ค่าพิกเซลเพื่อให้ข้อมูลที่ซ้ำกันยุบตัวลง จากนั้นจึง เข้ารหัส ข้อผิดพลาดจากการคาดการณ์เหล่านั้นอย่างมีประสิทธิภาพ รูปแบบแบบสูญเสีย (Lossy formats) เช่น JPEG, WebP lossy, AVIF ยังทำการ ควอนไทซ์ (quantize) ด้วย—ซึ่งเป็นการปัดรายละเอียดความถี่สูงที่มนุษย์แทบไม่รับรู้ให้ลดลง ส่วนรูปแบบแบบไม่สูญเสีย (Lossless formats) เช่น PNG, WebP lossless จะข้ามขั้นตอนการควอนไทซ์และเก็บรักษาทุกพิกเซลไว้

การตัดสินใจในทางปฏิบัติ:

เนื้อหาภาพ	รูปแบบที่ดีที่สุด	เหตุผล
ภาพถ่าย, การไล่ระดับสีที่ซับซ้อน	WebP/AVIF lossy	ขนาดไฟล์เล็กที่สุด, ดวงตามนุษย์มองข้ามการสูญเสียได้
ข้อความคมชัด, UI, งานลายเส้น, โลโก้	PNG หรือ WebP lossless	การควอนไทซ์จะทำให้ขอบเบลอ
ภาพถ่ายสีเต็มที่ต้องการแก้ไขภายหลัง	PNG (หรือเก็บ master เป็น RAW/JPEG)	หลีกเลี่ยงการเข้ารหัสซ้ำแบบสูญเสีย
ความเข้ากันได้สูงสุด	JPEG	ถอดรหัสได้ทุกที่ แต่มีขนาดใหญ่ที่สุด

อ่าน AVIF vs WebP vs JPEG comparison สำหรับการตัดสินใจเลือกรูปแบบ; บทความนี้เน้นไปที่สิ่งที่เกิดขึ้นภายในตัวเข้ารหัสแต่ละตัว

ความแตกต่างระหว่าง Lossy และ Lossless คืออะไร?

การบีบอัดแบบ Lossless จะสร้างภาพใหม่ให้เหมือนต้นฉบับทุกพิกเซล มันทำงานโดยการค้นหาความซ้ำซ้อน: สีที่เหมือนกันต่อเนื่อง, รูปแบบที่ทำซ้ำ, และการไล่ระดับสีที่คาดเดาได้ PNG, GIF, และ WebP-lossless ใช้แนวทางนี้ ข้อจำกัดคือเอนโทรปีของภาพ — เสียงรบกวนแบบสุ่มแทบจะไม่ถูกบีบอัดเลย

การบีบอัดแบบ Lossy จะทิ้งข้อมูลไปอย่างถาวร เคล็ดลับคือการทิ้งข้อมูลที่ระบบการมองเห็นของคุณสังเกตได้น้อยที่สุด: พื้นผิวความถี่สูงที่ละเอียด และความแตกต่างของสีเล็กน้อย JPEG, WebP-lossy, และ AVIF ทำเช่นนี้ ผลลัพธ์คือไฟล์ที่มีขนาดเล็กลงมาก — มักจะเล็กกว่าแบบ lossless 5–10× สำหรับภาพถ่าย

รูปแบบเหล่านี้ใช้เทคนิคเฉพาะ:

Technique	Used by	What it does
Chroma subsampling	JPEG, WebP, AVIF	ลดความละเอียดของสี; ดวงตาไวต่อความสว่างน้อยกว่าสี
Discrete Cosine Transform (DCT)	JPEG, AVIF	แปลงบล็อก 8×8 เป็นความถี่เพื่อให้สามารถทิ้งรายละเอียดบางส่วนได้
Predictive filtering	PNG, WebP lossless	คาดเดาแต่ละพิกเซลจากเพื่อนบ้าน; เข้ารหัสเฉพาะข้อผิดพลาดเท่านั้น
LZ77 + Huffman (DEFLATE)	PNG	บีบอัดลำดับไบต์ที่ซ้ำกันด้วยรหัสสั้นๆ
Intra-frame prediction	AVIF, WebP lossy	ยืมการคาดเดาบล็อกจากโคเดกวิดีโอเพื่อการคาดเดาที่ดีขึ้น

การบีบอัด JPEG ทำงานอย่างไรกันแน่?

JPEG คือกระบวนการสูญเสียข้อมูลแบบมาตรฐาน (canonical lossy pipeline) ซึ่งประกอบด้วย 5 ขั้นตอนที่ทำงานตามลำดับ:

Stage	สิ่งที่เกิดขึ้น
1. Color space conversion	RGB จะถูกแปลงเป็น YCbCr — ประกอบด้วย luma (ความสว่าง, Y) หนึ่งช่อง และ chroma (สี) สองช่อง
2. Chroma subsampling	ทำการลดขนาดของ chroma โดยทั่วไปจะเป็นอัตราส่วน 4:2:0 เนื่องจากสายตามนุษย์รับรู้ความสว่างได้คมชัดกว่าสี จึงทำให้ข้อมูลถูกลดลงครึ่งหนึ่งโดยที่ผู้ใช้แทบไม่รู้สึกถึงการสูญเสียคุณภาพ
3. DCT	แต่ละช่องจะถูกแบ่งออกเป็นบล็อกขนาด 8×8; Discrete Cosine Transform จะแปลงแต่ละบล็อกให้เป็นสัมประสิทธิ์ความถี่ (พื้นที่เรียบในมุมหนึ่ง, รายละเอียด/ขอบในอีกมุมหนึ่ง)
4. Quantization	สัมประสิทธิ์จะถูกหารด้วยเมทริกซ์ ความถี่สูงจะได้รับตัวหารขนาดใหญ่และหลายค่าจะปัดเศษเหลือศูนย์ นี่คือขั้นตอนที่เกิดการสูญเสียข้อมูล — แถบเลื่อนคุณภาพ (quality slider) จะปรับสเกลของเมทริกซ์นี้
5. Entropy coding	สัมประสิทธิ์ที่ถูก Quantized จะถูกจัดเรียงแบบ zigzag, ถูกเข้ารหัสด้วย run-length encoding (ช่วงศูนย์ยาวๆ จะถูกบีบอัดอย่างมาก), จากนั้นจึงถูกเข้ารหัสด้วย Huffman เป็นไบต์ JPEG สุดท้าย

เหตุผลที่ JPEG ทำให้ข้อความและขอบคมชัดเบลอ: สัมประสิทธิ์ความถี่สูงทำหน้าที่เก็บรายละเอียดของขอบ และการ Quantization ก็จะทำให้ค่าเหล่านั้นเป็นศูนย์ หากปรับคุณภาพให้ต่ำพอ คุณจะเห็นสิ่งแปลกปลอมของการบล็อกขนาด 8×8

คุณสามารถดูการทำงานของ quantization ได้จากการครอปภาพที่มีรายละเอียดของขนเพียงส่วนเดียว บริเวณขนาด 500×280 เดียวกันนี้ เมื่อถูกเข้ารหัสที่ระดับคุณภาพสามระดับ จะแสดงให้เห็นอย่างชัดเจนว่าแถบเลื่อนคุณภาพได้แลกเปลี่ยนอะไรไปบ้าง:

Same feather crop as JPEG q95 (24 KB), q75 (16 KB), q50 (9 KB): lower quality brings 8x8 blocking

ที่ q95 ขนแต่ละเส้นยังคงแยกจากกันได้ชัดเจน เมื่อถึง q75 เส้นใยละเอียดเริ่มเบลอรวมกัน และที่ q50 บล็อกขนาด 8×8 จะมองเห็นได้อย่างชัดเจนและพื้นผิวจะถูกทำให้เลอะเทอะ — ไฟล์มีขนาดเล็กกว่า แต่การสูญเสียข้อมูลนั้นกลายเป็นสิ่งที่ผู้ชมสังเกตได้แล้ว

การบีบอัดของ PNG ทำงานอย่างไร?

PNG เป็นแบบไร้การสูญเสียข้อมูล (lossless) และทำงานแตกต่างออกไปโดยสิ้นเชิง มีสองขั้นตอน:

Row filtering ก่อนการบีบอัด แต่ละสแกนไลน์จะถูกกรองเพื่อให้สามารถคาดเดาได้มากขึ้น PNG กำหนดตัวกรองห้าประเภท (None, Sub, Up, Average, Paeth); ตัวเข้ารหัสจะเลือกตัวที่ดีที่สุดสำหรับแต่ละแถว

Filter	Predicts each pixel from…	Works well on…
None	Nothing (raw)	Already-random data
Sub	The pixel to the left	Horizontal gradients
Up	The pixel above	Vertical patterns
Average	Left and above, averaged	Smooth gradients
Paeth	A linear prediction of left/above/upper-left	Complex, edge-heavy art

DEFLATE compression ไบต์ที่ผ่านการกรองจะผ่าน LZ77 (ค้นหาลำดับซ้ำ, แทนที่ด้วย back-references) บวกกับ Huffman coding (รหัสสั้นสำหรับค่าทั่วไป) — ซึ่งเป็นอัลกอริทึมเดียวกับที่ ZIP ใช้

เคล็ดลับการเพิ่มประสิทธิภาพ PNG ที่ช่วยได้จริง:

ใช้ PNG-8 (indexed, ≤256 colors) สำหรับกราฟิกแบบแบน (flat graphics) — มีขนาดเล็กกว่า PNG-24 มาก
ลบส่วนที่ไม่จำเป็นออก: EXIF, ICC profiles ที่ไม่ได้ใช้, หรือ alpha channel หากรูปภาพนั้นทึบแสง
บีบอัดซ้ำด้วย optipng หรือ pngquant (ตัวหลังจะแปลงเป็น 8-bit ด้วย dithering เพื่อประหยัดพื้นที่อย่างมากสำหรับภาพถ่ายที่ ต้อง คงรูปแบบ PNG)

ทำไม WebP ถึงมีขนาดเล็กกว่าทั้งสองรูปแบบ?

WebP มีโหมดอิสระ 2 โหมด:

Lossy WebP ได้รับแรงบันดาลใจจาก VP8 video codec มันใช้ block prediction ทั่วทั้งเฟรม (ไม่เพียงแค่ภายในบล็อก 8×8 เหมือน JPEG) มีการแปลงแบบ 4×4 และ 8×8 transforms รวมถึง arithmetic entropy coding ที่ดีกว่า ผลลัพธ์ที่ได้มีขนาดเล็กกว่า JPEG ประมาณ 25–34% เมื่อเทียบคุณภาพแล้ว
Lossless WebP ใช้ได้ถึง 13 prediction modes, มีการแปลง color-space เพื่อลดความสัมพันธ์ของช่องสัญญาณ (decorrelate channels) และใช้ LZ77 variant โดยทั่วไปแล้วจะมีขนาดเล็กกว่า PNG ประมาณ ~20–26% สำหรับเนื้อหาเดียวกัน

AVIF ก้าวไปอีกขั้นด้วยการใช้ intra-frame tools ของ AV1 video codec ซึ่งทำให้มีประสิทธิภาพเหนือกว่า WebP lossy อีก 20–30% ข้อเสียคือความเร็วในการเข้ารหัส — AVIF ใช้เวลาสร้างนาน ดูคู่มือ TinyPNG alternatives สำหรับเครื่องมือที่ส่งออก WebP และ AVIF

คุณวัดคุณภาพการบีบอัดอย่างไร?

มีตัวชี้วัดหลักสองอย่างที่ใช้กัน ตัวใดตัวหนึ่งก็ไม่สมบูรณ์แบบ ดังนั้นควรใช้ทั้งคู่

Metric	สิ่งที่ใช้วัด	การตีความโดยประมาณ
PSNR (Peak Signal-to-Noise Ratio)	ความแตกต่างของพิกเซลทางคณิตศาสตร์, ในหน่วย dB	>40 dB: ยอดเยี่ยม · 30–40: พอใช้ได้ · <30: สูญเสียที่มองเห็นได้
SSIM (Structural Similarity Index)	ความคล้ายคลึงกันเชิงโครงสร้างตามการรับรู้, 0–1	>0.95: ใกล้เคียงกันมาก · 0.90–0.95: ดี · <0.90: มองเห็นได้ชัดเจน

PSNR คำนวณได้ง่าย แต่ไม่ได้คำนึงถึงสิ่งที่มนุษย์สังเกตเห็น ในขณะที่ SSIM มีความสัมพันธ์ที่ดีกว่ากับการรับรู้ แต่ก็ยังประเมินสิ่งแปลกปลอมที่ทำให้เสียสมาธิ (เช่น การเกิดริ้วรอบข้อความ) ต่ำเกินไป สำหรับการตัดสินใจผลิตภัณฑ์จริง ควร ดูผลลัพธ์ด้วยตาเปล่าในขนาดการแสดงผลที่ตั้งใจไว้ มากกว่าการเชื่อตัวเลขเพียงตัวเดียว

Mozilla JPEG quality study และ [WebP compression study] ของ Google ได้เผยแพร่วิธีการและภาพตัวอย่าง หากคุณต้องการทำซ้ำการเปรียบเทียบ

ต้องใช้การตั้งค่าคุณภาพแบบไหน?

เริ่มต้นจากค่าเริ่มต้นเหล่านี้ แล้วปรับให้เหมาะสมกับเนื้อหาของคุณ นี่เป็นเพียงแนวทาง ไม่ใช่กฎเกณฑ์ที่ตายตัว

กรณีการใช้งาน	รูปแบบ	คุณภาพเริ่มต้น	ขนาดเป้าหมาย
Hero / LCP image	WebP or AVIF	75–80	<200 KB
Product photo	WebP or AVIF	80–85	<100 KB
Thumbnail	WebP	70–75	<30 KB
Logo / icon	PNG or SVG	lossless	<10 KB
Text-heavy screenshot	PNG	lossless	(varies)

กฎสองข้อที่สำคัญกว่าตัวเลข:

เปรียบเทียบที่คุณภาพทางสายตาที่ตรงกัน ไม่ใช่ตัวเลขคุณภาพที่ตรงกัน AVIF q60, WebP q75, และ JPEG q85 ดูคล้ายกันมาก การนำทั้งสามมาเปรียบเทียบที่ "q80" จึงไม่มีความหมาย
ปรับขนาดก่อนบีบอัด ภาพต้นฉบับจากกล้องขนาด 4000px ที่ถูกบีบอัดเป็น JPEG q80 ยังคงมีขนาดดาวน์โหลด 4000px คุณควรลดขนาดลงให้เท่ากับขนาดที่แสดงผลก่อน — วิธีนี้ช่วยประหยัดไบต์ได้มากกว่าการปรับคุณภาพใด ๆ

กราฟความสัมพันธ์ระหว่างขนาดกับคุณภาพแสดงให้เห็นว่าทำไมช่วง 75–85 จึงเป็นคำแนะนำที่ใช้กันทั่วไป ในภาพตัดขอบรายละเอียดขนเดียวกัน ขนาดไฟล์จะลดลงอย่างรวดเร็วในช่วงแรก จากนั้นก็จะแบนราบ — และการสูญเสียคุณภาพที่มองเห็นได้จะเร่งขึ้นเมื่อต่ำกว่า q75 การผลักดันให้เกินจุดนั้นช่วยประหยัดไบต์ได้เพียงเล็กน้อย แต่แลกมาด้วยรายละเอียดจริง:

กราฟเส้นแสดงขนาดไฟล์ JPEG ที่วัดได้ในช่วงคุณภาพ q95 ถึง q35 โดยเน้นจุดที่เหมาะสมที่สุดระหว่าง q75-85

วิธีการบีบอัดรูปภาพให้มีประสิทธิภาพในทางปฏิบัติคืออะไร?

เริ่มต้นจากไฟล์ต้นฉบับที่ดีที่สุด ถ่ายภาพด้วย RAW หรือ JPEG คุณภาพสูง; การบีบอัดเป็นกระบวนการสะสม ดังนั้นควรหลีกเลี่ยงการเข้ารหัสไฟล์ที่สูญเสียคุณภาพไปแล้วซ้ำอีก
ปรับขนาดก่อน ให้ตรงกับพื้นที่ที่ต้องการแสดงผลบนหน้าเว็บด้วย Image Resizer ก่อนขั้นตอนอื่นใด
เลือกรูปแบบตามเนื้อหา ภาพถ่าย → WebP/AVIF แบบสูญเสียคุณภาพ; ข้อความ/UI → PNG หรือ WebP แบบไม่สูญเสียคุณภาพ
เข้ารหัสด้วยคุณภาพที่เหมาะสม เริ่มต้นที่ 75–80 สำหรับภาพถ่ายใน Image Compressor
ลบ metadata สำหรับเว็บสาธารณะ (เก็บ EXIF ไว้สำหรับไฟล์เก็บถาวร); Image Converter สามารถจัดการทั้งรูปแบบ + metadata ได้ในขั้นตอนเดียว
ตรวจสอบที่ขนาดแสดงผล และให้บริการ fallback ด้วย <picture> เพื่อให้ไคลเอนต์รุ่นเก่าได้รับ JPEG

ข้อผิดพลาดที่พบบ่อย

การบีบอัด JPEG ที่ถูกบีบอัดไปแล้วซ้ำ. การเข้ารหัสแบบ lossy ทุกครั้งจะเพิ่ม artifacts เข้าไป ควรเก็บไฟล์ต้นฉบับ (master) ไว้
การละเลย chroma subsampling สำหรับข้อความ. 4:2:0 ใช้ได้ดีสำหรับภาพถ่าย แต่จะทำให้ข้อความสีดูเลอะเทอะ ควรใช้ 4:4:4 (หรือ PNG) สำหรับกราฟิกที่มีข้อความจำนวนมาก
การเชื่อถือค่าคุณภาพเดียวข้ามรูปแบบไฟล์. ตัวเลขนี้มีความหมายแตกต่างกันใน JPEG, WebP, และ AVIF
การปรับให้เหมาะสมก่อนย่อขนาด. ควรย่อขนาดก่อนเสมอ เพราะนั่นคือการประหยัดไบต์ที่ใหญ่ที่สุดอย่างแท้จริง
การให้บริการ AVIF/WebP โดยไม่มี JPEG fallback. เบราว์เซอร์รุ่นเก่าและไคลเอนต์อีเมลจะไม่แสดงผลอะไรเลย

คู่มือที่เกี่ยวข้อง

คำถามที่พบบ่อย

การบีบอัดรูปภาพทำงานอย่างไร?

การบีบอัดแบบ Lossless (PNG) จะค้นหาและเข้ารหัสรูปแบบที่ซ้ำกันโดยไม่เปลี่ยนแปลงพิกเซล ส่วนการบีบอัดแบบ Lossy (JPEG, WebP) จะทิ้งรายละเอียดความถี่สูงที่ตามนุษย์สังเกตได้ยากที่สุด จากนั้นจึงเข้ารหัสส่วนที่เหลือ การตั้งค่าคุณภาพจะควบคุมว่าการบีบอัดแบบ Lossy ทิ้งข้อมูลไปมากน้อยแค่ไหน

ความแตกต่างระหว่าง Lossy และ Lossless คืออะไร?

Lossless จะรักษาพิกเซลทุกพิกเซลไว้อย่างแม่นยำและสามารถกู้คืนได้อย่างสมบูรณ์ (PNG, lossless WebP) ส่วน Lossy จะทิ้งรายละเอียดเพื่อลดขนาดไฟล์และไม่สามารถกู้คืนได้ (JPEG, lossy WebP) สำหรับรูปภาพ Lossy จะให้ขนาดที่ดีกว่า; แต่สำหรับกราฟิกและต้นฉบับ Lossless จะให้คุณภาพที่ดีกว่า

รูปแบบใดที่บีบอัดรูปภาพได้ดีที่สุด?

AVIF (ขนาดเล็กที่สุดสำหรับเบราว์เซอร์สมัยใหม่) รองลงมาคือ WebP และตามด้วย JPEG สำหรับรูปภาพ PNG จะมีขนาดใหญ่ที่สุดเพราะเป็นแบบ lossless ในการส่งมอบบนเว็บ WebP เป็นค่าเริ่มต้นที่ปลอดภัย; ส่วน AVIF ใช้เมื่อคุณสามารถเข้ารหัสได้และกลุ่มเป้าหมายของคุณใช้เบราว์เซอร์สมัยใหม่

การบีบอัดลดคุณภาพหรือไม่?

Lossy ลดคุณภาพจริง แต่ที่ระดับคุณภาพ 80–85 การสูญเสียนั้นจะไม่สามารถมองเห็นได้เมื่อดูในขนาดปกติ กับดักคือการบีบอัดไฟล์แบบ lossy ซ้ำๆ (generation loss) ซึ่งจะทำให้เกิดสิ่งแปลกปลอมสะสม ควรบีบอัดเพียงครั้งเดียวจากต้นฉบับที่ไม่มีการสูญเสียข้อมูล

ถ่ายภาพผู้ชายที่ไม่ระบุตัวตนกำลังดูรูปถ่ายที่พิมพ์ออกมาในมือและท่องเว็บด้วย netbook ที่โต๊ะทำงานในห้องที่มีแสงสว่าง

เครดิตรูปภาพ

ภาพปก — Source code on a monitor, ถ่ายโดย Leonid Altman บน Pexels (แปลงเป็น WebP).
ลำดับคุณภาพ JPEG และกราฟขนาดเทียบกับคุณภาพ — สร้างโดยผู้เขียนจากภาพถ่ายขนนกมาคอว์ (Pexels #36720663, ถ่ายโดย Kaca Skok) เพื่อแสดงผลลัพธ์ JPEG ที่วัดค่าจริงในระดับคุณภาพต่างๆ

การบีบอัดภาพทำงานอย่างไร: อธิบายเรื่อง JPEG, PNG และ WebP

คำตอบสั้น ๆ: การบีบอัดภาพทำงานอย่างไร?

ความแตกต่างระหว่าง Lossy และ Lossless คืออะไร?

การบีบอัด JPEG ทำงานอย่างไรกันแน่?

การบีบอัดของ PNG ทำงานอย่างไร?

ทำไม WebP ถึงมีขนาดเล็กกว่าทั้งสองรูปแบบ?

คุณวัดคุณภาพการบีบอัดอย่างไร?

ต้องใช้การตั้งค่าคุณภาพแบบไหน?

วิธีการบีบอัดรูปภาพให้มีประสิทธิภาพในทางปฏิบัติคืออะไร?

ข้อผิดพลาดที่พบบ่อย

คู่มือที่เกี่ยวข้อง