คู่มือการบีบอัดรูปภาพฉบับสมบูรณ์: เลือก JPG·PNG·WebP ตามการใช้งาน

เผยแพร่ 2026-04-13 อ่าน 8 นาที

สรุป (TL;DR)

สุดสัปดาห์ที่แล้วผมลากรูปแมวขนาด 4.2MB ลงใน Squoosh ด้วย WebP คุณภาพ 80 ผลที่ได้คือ 380KB ซึ่งลดลง 91% และบนหน้าจอมือถือผมแยกไม่ออกเลยว่าต่างจากต้นฉบับตรงไหน นี่คือภาพของการบีบอัดแบบสูญเสียที่ทำงานอย่างถูกต้อง ทุกครั้งที่ผมลืมข้อเท็จจริงนี้ ก็จะต้องรอ 3 วินาทีให้ hero image ขนาด 2MB ส่งผ่าน LTE อีกครั้ง แล้วบทเรียนก็จะกลับมาด้วยตัวเอง

การเลือกฟอร์แมตรูปภาพไม่ได้ตัดสินที่ “อะไรดีที่สุด” แต่ตัดสินที่ “ใช้ทำอะไร” สำหรับรูปถ่ายที่มีโทนต่อเนื่อง ฟอร์แมตแบบสูญเสียอย่าง JPEG, WebP (lossy), และ AVIF เหมาะสมและรักษาไฟล์ให้เล็กโดยที่ตามองไม่ค่อยเห็นความต่าง ที่คุณภาพทางสายตาใกล้เคียงกัน WebP มักให้ไฟล์เล็กกว่า JPEG ราว 25–35% ส่วน AVIF มักเล็กกว่า JPEG ราว 40–50% ขึ้นอยู่กับการตั้งค่า encoder ตรงข้าม สำหรับโลโก้ ไอคอน สกรีนช็อต และภาพที่ต้องการขอบคมและความอ่านง่ายของตัวอักษร ฟอร์แมตไม่สูญเสียอย่าง PNG, WebP (lossless), TIFF ปลอดภัยกว่า ถ้าต้องการความโปร่งใสและภาพเคลื่อนไหวพร้อมกัน ตัวเลือกหลักคือ WebP, APNG, AVIF การรองรับเบราว์เซอร์ ณ ต้นปี 2026 กว้างมาก WebP รองรับตั้งแต่ Chrome 32 (2014), Firefox 65, และ Safari 14 (ปลายปี 2020) ส่วน AVIF ทำงานได้ใน Chrome 85 (สิงหาคม 2020), Firefox 93 (ตุลาคม 2021), และ Safari 16 (กันยายน 2022) เป็นต้นไป แนวทางพื้นฐานที่สมเหตุสมผลคือ “SVG สำหรับโลโก้เวกเตอร์ WebP หรือ AVIF สำหรับรูปถ่าย PNG สำหรับสกรีนช็อต” พร้อม fallback เป็น JPEG ผ่าน <picture> เมื่อต้องรองรับสภาพแวดล้อมเก่า

ภูมิหลังและแนวคิด

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

JPEG ถูกกำหนดเป็นมาตรฐานในปี 1992 ใช้ Discrete Cosine Transform (DCT) แบบบล็อกที่ใช้กับบล็อกพิกเซล 8×8 WebP ต่อยอดจากเทคนิค intra-frame ของ VP8 video codec ส่วน AVIF ใช้เครื่องมือ intra-frame ของ AV1 ทั้งสองจึงทันสมัยกว่า JPEG มากในวิธีการทำนาย แปลง และ quantize ข้อมูล PNG ต่างโดยสิ้นเชิง เป็นฟอร์แมต ไม่สูญเสีย ที่ใช้อัลกอริทึมตระกูล deflate พร้อมรองรับช่อง alpha transparency และ palette แบบ indexed PNG ไม่ทิ้งข้อมูลใดๆ แต่สำหรับเนื้อหาภาพถ่าย ความบริสุทธิ์นั้นต้องแลกกับไฟล์ที่ใหญ่กว่ามาก

เปรียบเทียบและข้อมูล

ฟอร์แมตสูญเสียไม่สูญเสียความโปร่งใสแอนิเมชันการบีบอัดทั่วไป (รูปถ่าย)การรองรับเบราว์เซอร์ 2025
JPEGใช่ไม่ไม่ไม่ประมาณ 10:1ทุกเบราว์เซอร์
PNGไม่ใช่ใช่APNGประมาณ 2–3:1ทุกเบราว์เซอร์
WebPใช่ใช่ใช่ใช่เล็กกว่า JPEG ราว 25–35%Safari 14 (2020) ขึ้นไป ครอบคลุมแทบทุกเบราว์เซอร์
AVIFใช่ใช่ใช่ใช่เล็กกว่า JPEG ราว 40–50%Chrome 85+, Firefox 93+, Safari 16+
GIFใช่ (palette 256 สี)ไม่1-bit เท่านั้นใช่ไม่เหมาะกับรูปถ่ายทุกเบราว์เซอร์

ตัวเลขข้างต้นเป็นแนวโน้มทั่วไป การบีบอัดจริงขึ้นอยู่กับเนื้อหาต้นฉบับ encoder preset และเป้าหมายคุณภาพ JPEG ที่คุณภาพ 85 และ 60 อาจต่างกัน 3–4 เท่าในขนาด และข้อได้เปรียบของ AVIF แคบลงเมื่อใช้ preset เร็ว

สถานการณ์จริง

สถานการณ์ 1 — ภาพย่อและ hero image ของบล็อก ผมตรวจสอบเว็บของตัวเองและพบว่า hero image ส่ง 1.8MB การ export ใหม่เป็น WebP คุณภาพ 82 ลดเป็น 210KB และ Largest Contentful Paint ของหน้าลดจาก 2.4 วินาทีเหลือ 1.1 วินาทีใน Lighthouse บน 4G ที่จำลอง ตั้ง WebP เป็นฟอร์แมตหลัก แล้วใช้ <picture> ส่ง JPEG เป็น fallback สำหรับสภาพแวดล้อมเก่ามาก ปรับขนาดรูปให้ตรงกับความกว้างจริงของ CSS เสมอ

สถานการณ์ 2 — โลโก้และไอคอน ถ้ามีไฟล์เวกเตอร์ต้นฉบับ ให้ export เป็น SVG ก่อน ผมเคยเห็น landing page ที่ export โลโก้แบรนด์สีแดงเป็น JPEG คุณภาพ 75 แล้วขอบแดงเลือดไหลเป็นฮาโลสีชมพูรอบทุกตัวอักษร chroma subsampling ที่ 4:2:0 ทำลายขอบแดงบนพื้นเข้มก่อนเกือบทุกอย่าง ถ้ามีเพียง raster ให้เลือก PNG หรือ WebP แบบไม่สูญเสีย

สถานการณ์ 3 — สกรีนช็อตและภาพ UI สกรีนช็อตควรตั้งค่าเริ่มต้นเป็น PNG chrome ของเบราว์เซอร์ โค้ด snippet และฟอนต์ CJK แสดง JPEG artifact ชัดเจน ผมเคยโดน reviewer ตำหนิว่า “ฟอนต์ monospace เบลอ” ใน PR สองตัวติดกัน ถ้าต้องลดขนาดไฟล์ให้ใช้ pngquant (บน macOS brew install pngquant) ลด palette เป็น 256 สี สกรีนช็อต UI แทบไม่มีความต่างที่มองเห็นได้ และไฟล์มักเล็กลง 4–6 เท่า

สถานการณ์ 4 — การจัดเก็บต้นฉบับ สำหรับต้นฉบับที่อาจประมวลผลใหม่ภายหลัง (ต้นฉบับภาพถ่าย raw scan product shot) ให้เก็บสำเนาไม่สูญเสียเช่น TIFF หรือ WebP lossless ไว้ใน cold storage แล้วสร้างเวอร์ชัน lossy สำหรับ delivery เมื่อจำเป็น การบีบ JPEG แบบ lossy ซ้ำๆ จะทำให้คุณภาพลดลงทุกครั้ง (“generation loss”)

ความเข้าใจผิดที่พบบ่อย

“PNG คุณภาพสูงสุดเสมอ” ไม่สูญเสียจริง แต่สำหรับรูปถ่าย ความบริสุทธิ์นั้นแลกกับไฟล์ที่ใหญ่เกินจำเป็นหลายเท่า บนมือถือ รูปถ่ายขนาดหลายเมกะไบต์ทำร้ายเวลาโหลดที่รับรู้และ Core Web Vitals

“WebP ใช้งานไม่ได้กับทุกเบราว์เซอร์” ตั้งแต่ Safari 14 ปลายปี 2020 WebP ได้รับการรองรับในทุกเบราว์เซอร์กระแสหลัก ถ้าต้องการ legacy support จริงๆ <picture> พร้อม JPEG fallback เป็นทางออกที่สะอาด

“AVIF คือเวทมนตร์” ประสิทธิภาพการบีบอัดเยี่ยม แต่การ encode ช้ากว่า JPEG หรือ WebP อย่างมีนัยสำคัญ บน M2 MacBook Air ของผม avifenc --speed 4 ใช้เวลา 5–9 วินาทีต่อรูป 2400×1600 หนึ่งรูป และที่ --speed 0 คาดว่า 30 วินาทีขึ้นไป การ decode บนมือถือเก่าก็อาจเป็นปัญหา AVIF เหมาะกับ pipeline แบบ batch และการ optimize ที่ build time

“ใช้ JPEG ก็พอ” เคยเป็นตัวเลือกที่สมเหตุสมผลจนถึงราวปี 2015 แต่ WebP และ AVIF สมัยใหม่มักให้ไฟล์เล็กกว่าที่คุณภาพใกล้เคียงกันพร้อมการรองรับที่กว้างขวาง pipeline ใหม่ควรใช้ WebP เป็น baseline แทน JPEG

“คุณภาพสูงกว่าดีกว่าเสมอ” เหนือคุณภาพ 85 สำหรับ JPEG หรือ WebP ขนาดไฟล์โตเร็วกว่าคุณภาพที่รับรู้ ผู้ชมมักแยกไม่ออกระหว่างคุณภาพ 85 และ 95 แต่ไฟล์อาจใหญ่เป็นสองเท่า วัดด้วย perceptual metric (SSIM, butteraugli) แทนการเชื่อ quality slider ตามตัวเลข

เช็กลิสต์

  1. ต้นฉบับเป็นเวกเตอร์ไหม ถ้าใช่ บันทึกเป็น SVG
  2. ต้องการความโปร่งใสไหม
    • ใช่ และเนื้อหาเป็นรูปถ่าย → WebP แบบ lossy + alpha หรือ AVIF
    • ใช่ และเนื้อหาเป็นโลโก้/ไอคอน → PNG หรือ WebP lossless
  3. ต้องการแอนิเมชันไหม → WebP แบบแอนิเมชัน, APNG หรือ AVIF GIF ที่จำกัด 256 สีไม่เหมาะกับรูปถ่าย
  4. เนื้อหาเป็นรูปถ่ายหรือไล่สีเยอะไหม → ตั้งเป็น WebP lossy และเพิ่ม AVIF ที่ bandwidth สำคัญ
  5. เนื้อหาเป็นสกรีนช็อตหรือ UI ที่เน้นข้อความไหม → PNG หรือ WebP lossless
  6. ต้องการความเข้ากันได้สูงสุดไหม → ใช้ <picture> พร้อม source ลำดับ AVIF → WebP → JPEG

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

ทดลอง trade-off เหล่านี้ได้โดยตรงใน เครื่องมือบีบอัดรูปภาพของ Patrache Studio ที่อ้างถึงใน relatedToolUrl รูปภาพมักเป็นส่วนหนึ่งของ asset pipeline ขนาดใหญ่ จึงมีประโยชน์ที่จะอ่านคู่มือพี่น้องเช่น การรวม·แบ่ง PDF ในเบราว์เซอร์ ที่ครอบคลุมกรณีรูปภาพลงเอยในสัญญาหรือชุดสแกน และ ความปลอดภัยของ QR Code ที่ควรอ่านถ้ารูปของคุณมี QR สแกนได้บนบรรจุภัณฑ์หรือโปสเตอร์

อ้างอิง

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

tools.patrache.studio/image/compress/