อัตราส่วนการบีบอัดภาพ: คู่มือคุณภาพและขนาด

ปรับปรุงล่าสุด: June 28, 2026

อัตราส่วนการบีบอัดภาพจะบอกคุณว่ารูปภาพมีขนาดเล็กลงแค่ไหนหลังจากส่งออก มันเป็นประโยชน์ แต่ใช้ได้ก็ต่อเมื่อคุณจับคู่ตัวเลขนั้นกับการตรวจสอบด้วยสายตาเท่านั้น อัตราส่วน 12:1 อาจยอดเยี่ยมสำหรับภาพพื้นหลังที่นุ่มนวล แต่ไม่สามารถยอมรับได้สำหรับภาพหน้าจอผลิตภัณฑ์ที่มีข้อความขนาดเล็ก

คู่มือนี้จะให้สูตร, ช่วงคุณภาพทั่วไป, และรายการตรวจสอบสำหรับการเผยแพร่สำหรับ WebP, JPEG, PNG, และ AVIF ใช้มันเมื่อคุณต้องการหน้าเว็บที่เล็กลงโดยที่รูปภาพไม่ดูเบลอหรือผิดเพี้ยน

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

อัตราส่วนการบีบอัดภาพที่ดีคือการลดขนาดไบต์ให้ได้มากที่สุดเท่าที่จะทำได้ แต่ยังคงดูสะอาดตาที่ขนาดแสดงผลสุดท้าย คำนวณดังนี้: ขนาดไฟล์ต้นฉบับหารด้วยขนาดไฟล์ที่ถูกบีบอัด ภาพขนาด 4 MB ที่ถูกบีบอัดเหลือ 500 KB จะมีอัตราส่วน 8:1

สำหรับภาพถ่ายบนเว็บ เป้าหมายที่ใช้งานได้จริงมักจะอยู่ที่ 5:1 ถึง 12:1 หลังจากปรับขนาดและส่งออกเป็น WebP หรือ AVIF สำหรับภาพหน้าจอที่มีข้อความเยอะ โลโก้ และรูปภาพ UI อัตราส่วนที่ต่ำกว่าก็ถือว่าปกติ เพราะขอบคมและสีเรียบต้องการการปกป้อง PNG แบบ Lossless หรือ WebP แบบ lossless อาจให้ผลเพียง 1.2:1 ถึง 3:1

อย่าตัดสินการบีบอัดด้วยอัตราส่วนเพียงอย่างเดียว ให้ตรวจสอบใบหน้า ขอบผลิตภัณฑ์ การไล่ระดับสี และข้อความขนาดเล็ก หากผู้ใช้สามารถเห็นอาการบล็อกกิ้ง (blocking), วงแหวน (ringing), การเลอะ (smearing) หรือแถบ (banding) แสดงว่าอัตราส่วนนั้นรุนแรงเกินไป แม้ว่าขนาดไฟล์จะดูน่าสนใจก็ตาม

คุณจะคำนวณอัตราส่วนการบีบอัดภาพได้อย่างไร?

ให้ใช้ขนาดไบต์ต้นฉบับและขนาดไบต์สุดท้ายหลังจากดำเนินการเผยแพร่จริงทั้งหมด: การครอบตัด (crop), การปรับขนาด (resize), การล้างข้อมูลเมตา (metadata stripping), การแปลงรูปแบบ (format conversion) และการตั้งค่าคุณภาพ หากคุณคำนวณก่อนการปรับขนาด ตัวเลขที่ได้มักจะคลาดเคลื่อน

ให้ใช้จำนวนไบต์ที่แน่นอนเมื่อคุณกำลังปรับแต่ง build pipeline ใช้ KB หรือ MB แบบปัดเศษเมื่อคุณกำลังจัดทำเอกสารการตั้งค่าในส่วนบรรณาธิการ การตัดสินใจนี้ไม่เปลี่ยนแปลง: ขนาดที่เล็กลงจะมีประโยชน์ก็ต่อเมื่อภาพยังคงสื่อสารหน้าที่ของมันได้

แนวทางของ Google สำหรับรูปภาพเน้นทั้งความเร็วและคุณภาพ: รูปภาพมักเป็นตัวขับเคลื่อนน้ำหนักหน้าเว็บ แต่รูปภาพที่เบลอหรือไม่ชัดเจนนั้นไม่ดีต่อผู้ใช้และตัวอย่างการค้นหา นอกจากนี้ยังแนะนำองค์ประกอบภาพ HTML ที่สามารถถูกรวบรวมข้อมูลได้, alt text ที่สื่อความหมาย, และรูปแบบที่รองรับ เช่น JPEG, PNG, WebP, SVG, และ AVIF ใน Google Images best practices

ควรใช้สัดส่วนใดสำหรับ WebP, JPEG, PNG, และ AVIF?

สัดส่วนที่เหมาะสมขึ้นอยู่กับเนื้อหาของรูปภาพ ภาพถ่ายจะมีการบีบอัดสูงเพราะการเปลี่ยนแปลงพื้นผิวเพียงเล็กน้อยนั้นยากต่อการสังเกต ส่วนภาพหน้าจอและแผนภาพจะมีการบีบอัดน้อยกว่า เนื่องจากข้อความ เส้น และขอบ UI ทำให้เห็นสิ่งผิดปกติได้ชัดเจน

คู่มือรูปแบบรูปภาพของ MDN ระบุว่า WebP สามารถเป็นแบบสูญเสียข้อมูล (lossy) หรือไม่สูญเสียข้อมูล (lossless) ได้ ในขณะที่ lossy WebP และ lossless WebP ใช้การแสดงแทนภายในที่แตกต่างกัน นั่นคือเหตุผลที่ไม่มี "WebP ratio" เพียงค่าเดียว การตั้งค่าที่ถูกต้องขึ้นอยู่กับว่าเนื้อหาสามารถทนต่อการสูญเสียข้อมูลได้หรือไม่ ดู image file type and format guide ของ MDN สำหรับพฤติกรรมของรูปแบบ

สำหรับบทความนี้ ผมได้เข้ารหัสกราฟิกขนาด 1400 by 788 จำนวนสี่ภาพในเครื่องด้วย ImageMagick และ WebP ไฟล์ที่เผยแพร่ออกมามีขนาด 23 KB, 28 KB, 35 KB, และ 40 KB ซึ่งมีขนาดเล็กผิดปกติเนื่องจากสินทรัพย์เหล่านี้เป็นแผนภาพที่สะอาด ไม่ใช่ภาพถ่ายจากกล้อง โปรดใช้ตัวเลขเหล่านี้เป็นหลักฐานว่ากราฟิกแบนบีบอัดแตกต่างจากรายละเอียดของภาพถ่าย

สำหรับการเปรียบเทียบข้อดีข้อเสียของรูปแบบที่กว้างขึ้น โปรดเปรียบเทียบบทความนี้กับ AVIF vs WebP Comparison หากคุณต้องการรายละเอียดอัลกอริทึมเบื้องหลังสิ่งผิดปกติ ให้อ่าน How Image Compression Works

ทำไมการตั้งค่าคุณภาพถึงเริ่มประหยัดข้อมูลได้น้อยลงหลังจากจุดหนึ่ง?

ตัวเข้ารหัสส่วนใหญ่จะมีประสิทธิภาพสูงในช่วงแรก แต่จะมีการแลกเปลี่ยนที่ยากลำบากในภายหลัง การแปลงจากไฟล์กล้องต้นฉบับเป็น WebP q80 อาจลบข้อมูลที่มองไม่เห็นออกไปจำนวนมาก การลดจาก q70 เป็น q55 อาจช่วยประหยัดไบต์ได้น้อยลง ในขณะที่ทำให้เกิดสิ่งแปลกปลอม (artifacts) ที่สังเกตได้ง่ายขึ้น

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

ให้ใช้ลำดับนี้เมื่อปรับแต่งคุณภาพ:

1. ปรับขนาดเป็นความกว้างสูงสุดที่แสดงผลจริงที่คุณให้บริการ
2. ส่งออก WebP หนึ่งตัวที่ q85, อีกตัวที่ q80 และอีกตัวที่ q75
3. เปิดภาพเหล่านี้เทียบกับต้นฉบับในขนาดการแสดงผลที่ตั้งใจไว้
4. ตรวจสอบใบหน้า ข้อความ ขอบผลิตภัณฑ์ เงา และการไล่ระดับสีที่ราบรื่น
5. เลือกเวอร์ชันที่เล็กที่สุดที่ไม่ดูเสื่อมสภาพ
6. บันทึกอัตราส่วนที่ได้สำหรับประเภทเนื้อหานั้นๆ

หากภาพมีแนวโน้มที่จะเป็นองค์ประกอบ Largest Contentful Paint การบีบอัดจะเป็นเพียงส่วนหนึ่งของการแก้ไข คำแนะนำ LCP ของ web.dev แนะนำให้จัดลำดับความสำคัญของภาพ LCP ที่น่าจะเกิดขึ้นโดยใช้ fetchpriority="high" และตรวจสอบการค้นพบทรัพยากรใน network waterfall ใน Optimize Largest Contentful Paint

ต้องเปรียบเทียบอัตราส่วนการบีบอัดข้ามรูปแบบอย่างไร?

ให้เปรียบเทียบรูปแบบที่คุณภาพที่มองเห็นได้เท่ากัน ไม่ใช่ตัวเลขจากแถบเลื่อน (slider) ที่ตรงกัน JPEG q82, WebP q78, และ AVIF q55 สามารถเป็นผลลัพธ์ที่สมเหตุสมผลจากแหล่งเดียวกัน ตัวเลขเหล่านี้คือการควบคุมของ encoder ไม่ใช่คะแนนคุณภาพสากล

นี่คือจุดที่ทีมงานมักอ่านอัตราส่วนผิด JPEG ที่ 5.7:1 อาจแย่กว่า WebP ที่ 8:1 หากทั้งคู่ดูเหมือนกันบนหน้าจอ WebP แบบ lossless ที่ 2:1 อาจดีกว่า WebP แบบ lossy ที่ 10:1 หากสินทรัพย์นั้นเป็นภาพหน้าจอของตารางราคา

สำหรับงานแบบกลุ่ม ให้สร้างผลลัพธ์หลายรายการจากต้นฉบับเดียวกันและเก็บการตัดสินใจนั้นไว้ในชื่อไฟล์หรือบันทึก build logs คู่มือ Batch Resize Guide ครอบคลุมขั้นตอนการปรับขนาดก่อน และ Complete Image Optimization Checklist ให้การตรวจสอบขั้นสุดท้ายก่อนเผยแพร่

เมื่อใดที่อัตราส่วนการบีบอัดสูงถือเป็นสัญญาณที่ไม่ดี?

อัตราส่วนสูงจะเป็นสัญญาณเตือนเมื่อรูปภาพมีรายละเอียดที่ผู้คนใช้ตรวจสอบ เจ้าของร้านค้าสังเกตพื้นผิวผลิตภัณฑ์ นักออกแบบสังเกตตัวอักษรที่ดูนุ่มลง ผู้ซื้อสังเกตขอบเครื่องประดับที่ไม่คมชัด ในกรณีเหล่านี้ "ไฟล์ขนาดเล็กที่สุด" อาจมีต้นทุนสูงกว่าที่ประหยัดได้

อัตราส่วนสูงควรได้รับการตรวจสอบเป็นพิเศษเมื่อรูปภาพมีองค์ประกอบดังนี้:

• ป้ายผลิตภัณฑ์, ข้อความบรรจุภัณฑ์, ส่วนผสม, หรือหมายเลขซีเรียล
• ภาพหน้าจอ UI, แดชบอร์ด, โค้ด, หรือตารางราคา
• ใบหน้า, พื้นผิวผิวหนัง, เส้นผม, เครื่องประดับ, ผ้า, หรืออาหาร
• การไล่ระดับสีที่เรียบเนียน, ท้องฟ้า, เงา, นีออน, หรือพื้นหลังมืด
• เส้นบางๆ, ไอคอน, ขอบโปร่งใส, หรือเครื่องหมายแบรนด์
• รูปภาพที่จะถูกซูม, ครอป, หรือนำไปใช้ใหม่ในโฆษณา

สำหรับอีคอมเมิร์ซ ควรใช้การตรวจสอบที่เข้มงวดกว่าที่คุณจะใช้กับรูปภาพบล็อกตกแต่ง ภาพขนาดย่อหมวดหมู่สามารถทนต่อการสูญเสียได้มากกว่ารูปภาพผลิตภัณฑ์หลัก หากแหล่งข้อมูลหลักเดียวกันป้อนให้ทั้งสองส่วน ให้สร้างไฟล์ส่งออกแยกกันแทนที่จะบังคับให้อัตราส่วนเดียวรองรับทุกช่อง

อะไรคือขั้นตอนการทำงานที่ให้ขนาดที่ดีที่สุดโดยไม่มีการสูญเสียคุณภาพที่มองเห็นได้?

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

ใช้ลำดับการเผยแพร่นี้:

1. เก็บไฟล์หลักที่ไม่ได้ถูกเข้ารหัสซ้ำๆ
2. ครอปสำหรับกรณีใช้งานสุดท้ายก่อนปรับขนาด
3. ปรับขนาดให้กว้างที่สุดเท่าที่จะเรนเดอร์ได้ พร้อมด้วยรูปแบบที่ตอบสนอง (responsive variants) หากจำเป็น
4. เลือกรูปแบบตามเนื้อหา: WebP หรือ AVIF สำหรับภาพถ่าย และแบบไม่สูญเสียข้อมูลสำหรับกราฟิกที่มีข้อความมาก
5. ส่งออกตัวเลือกคุณภาพสองถึงสามตัว
6. ลบ metadata ออกจากสำเนาสาธารณะ เว้นแต่จะจำเป็นตามกฎหมายหรือการแก้ไข
7. เปรียบเทียบตัวเลือกที่ขนาดเรนเดอร์บนเดสก์ท็อปและมือถือ
8. ตรวจสอบภาพ LCP ที่น่าจะเป็นแยกจากภาพส่วนล่าง (below-fold)
9. เผยแพร่ไปยัง URL ของ CDN ที่เสถียรและตรวจสอบ HTTP 200
10. บันทึกไบต์สุดท้าย อัตราส่วน และการตั้งค่า เพื่อให้ชุดข้อมูลถัดไปเร็วขึ้น

หากคุณต้องการกำหนดงบประมาณขนาดที่เข้มงวด ให้เริ่มต้นด้วยขั้นตอนการทำงานใน Compress Image to 100KB หรือ Compress Image to 200KB สำหรับหน้ามือถือ ให้จับคู่การตัดสินใจเรื่องอัตราส่วนกับ Mobile Image Optimization Guide

อัตราส่วนการบีบอัดและ SEO เข้ากันได้อย่างไร?

อัตราส่วนการบีบอัดช่วย SEO ทางอ้อม รูปภาพที่เล็กลงจะลดขนาดในการถ่ายโอน ซึ่งสามารถปรับปรุงประสิทธิภาพการโหลดได้ โดยเฉพาะอย่างยิ่งเมื่อรูปภาพที่ถูกบีบอัดมีขนาดที่เหมาะสมแล้ว แต่เครื่องมือค้นหาและผู้ใช้ยังคงต้องการรูปภาพที่มีประโยชน์ URL ที่เสถียร ข้อความรอบข้างที่อ่านง่าย และ alt text ที่ให้คำอธิบาย

อย่าเผยแพร่รูปภาพขนาดเล็กที่ดูเหมือนเสียในตัวอย่างการค้นหาหรือบัตรโซเชียล Google แนะนำอย่างชัดเจนให้เลือกรูปภาพที่เป็นตัวแทนสำหรับ metadata และหลีกเลี่ยงการใช้รูปภาพทั่วไปสำหรับ structured data หรือ og:image เมื่อมีรูปภาพที่เกี่ยวข้องกว่า รูปภาพควรจะรวดเร็วและชัดเจน

สำหรับบทความบล็อก นั่นมักหมายถึง:

• ใช้ภาพปก WebP ที่ไม่ซ้ำกันในส่วน frontmatter และข้อมูล Open Graph
• รักษาความสามารถในการอ่านของภาพปกที่ขนาด social-preview
• วางรูปภาพใกล้กับข้อความที่อธิบายประเด็นหลัก
• ใช้ alt text ที่ให้คำอธิบาย ไม่ใช่การยัดคีย์เวิร์ด
• ให้บริการสินทรัพย์สุดท้ายจาก URL ของ CDN ที่สามารถถูก Crawl ได้
• หลีกเลี่ยงการแทนที่ URL รูปภาพที่ถูก Index เว้นแต่ว่าสินทรัพย์นั้นผิดพลาด

อัตราส่วนนี้เป็นเพียงบรรทัดเดียวในบันทึกการเผยแพร่ มันควรอยู่ข้างๆ ความกว้างที่แสดงผล (rendered width), format, การตั้งค่าคุณภาพ (quality setting), byte size และหมายเหตุทางภาพ

รายการตรวจสอบอัตราส่วนการบีบอัด

ก่อนเผยแพร่ ให้ทำการตรวจสอบสั้นๆ นี้:

เป้าหมายที่มีประโยชน์ไม่ใช่แค่ "การบีบอัดสูงสุด" แต่มันคือการตั้งค่าที่ทำซ้ำได้ ซึ่งช่วยให้หน้าเว็บมีน้ำหนักเบาและภาพมีความน่าเชื่อถือ เมื่อไม่แน่ใจ ให้ใช้ไฟล์ขนาดเล็กก็ต่อเมื่อผ่านการตรวจสอบด้วยสายตาแล้วเท่านั้น