เทคนิคการบีบอัด

ที่ Google เรามองหาวิธีที่จะทำให้หน้าเว็บโหลดเร็วขึ้นอยู่เสมอ วิธีหนึ่งที่ทำได้คือการทำให้รูปภาพในเว็บมีขนาดเล็กลง รูปภาพมีขนาดถึง 60%-65% ของไบต์บนหน้าเว็บส่วนใหญ่ และขนาดหน้าเว็บเป็นปัจจัยสำคัญต่อเวลาในการแสดงผลรวม ขนาดหน้าเว็บสำคัญอย่างยิ่งสำหรับอุปกรณ์เคลื่อนที่ เพราะรูปภาพที่เล็กลงช่วยประหยัดทั้งแบนด์วิดท์และอายุการใช้งานแบตเตอรี่

WebP คือรูปแบบรูปภาพใหม่ที่พัฒนาโดย Google และรองรับใน Chrome, Opera และ Android ซึ่งได้รับการเพิ่มประสิทธิภาพเพื่อให้รูปภาพบนเว็บมีขนาดเล็กลงและเร็วขึ้น รูปภาพ WebP มีขนาดประมาณเล็กกว่า 30% เมื่อเทียบกับรูปภาพ PNG และ JPEG ที่คุณภาพรูปภาพเทียบเท่า นอกจากนี้ รูปแบบรูปภาพ WebP ยังมีคุณลักษณะที่เทียบเท่ากับรูปแบบอื่นๆ อีกด้วย ส่วนขยายประเภทนี้รองรับรายการต่อไปนี้

• การบีบอัดแบบสูญเสีย: การบีบอัดแบบสูญเสียบางส่วนจะอิงตามการเข้ารหัสคีย์เฟรมของ VP8 VP8 เป็นรูปแบบการบีบอัดวิดีโอที่สร้างขึ้นโดย On2 Technologies ซึ่งเป็นรูปแบบที่รับช่วงต่อจากรูปแบบ VP6 และ VP7

• การบีบอัดที่ไม่สูญเสียข้อมูล: ทีม WebP พัฒนารูปแบบการบีบอัดที่ไม่สูญเสียข้อมูล

• ความโปร่งใส: เวอร์ชันอัลฟ่า 8 บิตมีประโยชน์สำหรับรูปภาพกราฟิก ช่องอัลฟ่าสามารถใช้คู่กับ RGB แบบสูญเสียบางส่วน ซึ่งเป็นคุณลักษณะที่ ยังไม่สามารถใช้กับรูปแบบอื่นๆ ได้ในปัจจุบัน

• ภาพเคลื่อนไหว: รองรับภาพเคลื่อนไหวแบบสีจริง

• ข้อมูลเมตา: อาจมีข้อมูลเมตา EXIF และ XMP (เช่น ใช้โดยกล้อง)

• โปรไฟล์สี: อาจมีโปรไฟล์ ICC ฝังอยู่

เนื่องจากการบีบอัดรูปภาพที่ดีขึ้นและการรองรับฟีเจอร์เหล่านี้ทั้งหมดดีขึ้น WebP จึงใช้แทนรูปแบบรูปภาพส่วนใหญ่อย่างเช่น PNG, JPEG หรือ GIF ได้เป็นอย่างดี ยิ่งไปกว่านั้น คุณทราบไหมว่า WebP ช่วยมอบโอกาสใหม่ๆ ในการเพิ่มประสิทธิภาพให้กับรูปภาพ เช่น การรองรับรูปภาพที่สูญเสียรายละเอียดและมีความโปร่งใส ใช่แล้ว WebP คือมีดของกองทัพสวิส ในรูปแบบรูปภาพ

แล้วคุณจะทำเวทมนตร์นี้ได้อย่างไร มาลองดูประสิทธิภาพและเบื้องหลังกัน

WebP แบบสูญเสียข้อมูล

การบีบอัดแบบสูญเสียบางส่วนของ WebP ใช้วิธีการเดียวกันกับ VP8 สำหรับการคาดการณ์เฟรม (วิดีโอ) VP8 อิงตามการคาดการณ์การบล็อกและเช่นเดียวกับตัวแปลงรหัสแบบบล็อกทั่วไป VP8 จะแบ่งเฟรมออกเป็นส่วนย่อยๆ ที่เรียกว่า Macroblocks

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

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

หลังจากเกิดการเปลี่ยนแปลงแบบผกผันทางคณิตศาสตร์ (DCT อันโด่งดัง ซึ่งหมายถึง Discrete Cosine Transform) แล้ว ส่วนที่เหลือมักจะมีค่าเป็น 0 จำนวนมาก ซึ่งจะบีบอัดได้อย่างมีประสิทธิภาพมากกว่า ผลที่ได้ก็จะเป็นเชิงปริมาณและเข้ารหัสเอนโทรปี ที่ตลกก็คือ ขั้นตอนเชิงปริมาณเป็นขั้นตอนเดียวที่ระบบจะทิ้งบิตแบบสูญเสียบางส่วน (ค้นหาการหารด้วย QPj ในแผนภาพด้านล่าง) ขั้นตอนอื่นๆ ทั้งหมดจะแบบกลับด้านและไม่สูญเสียข้อมูล

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

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

โหมดการคาดคะเนภายใน VP8

โหมดการคาดคะเนภายใน VP8 ใช้กับมาโครบล็อก 3 ประเภทดังนี้

• 4x4 Luma
• ลูมา 16x16
• สี 8x8

โหมดการคาดการณ์ภายในที่ใช้ร่วมกันมี 4 โหมด ดังนี้

• H_PRED (การคาดการณ์แนวนอน) เติมเต็มแต่ละคอลัมน์ของบล็อก ด้วยสำเนาของคอลัมน์ซ้าย L

• V_PRED (การคาดการณ์แนวตั้ง) ใส่สำเนาของแถว A แถวด้านบนในบล็อก

• DC_PRED (การคาดการณ์ DC) ใส่ค่าเดียวในบล็อกโดยใช้ค่าเฉลี่ยของพิกเซลในแถวด้านบน A และคอลัมน์ทางด้านซ้ายของ L

• TM_PRED (การคาดคะเน TrueMotion) โหมดที่ได้ชื่อมาจากเทคนิคการบีบอัดที่พัฒนาโดย On2 Technologies นอกเหนือจากแถว A และคอลัมน์ L แล้ว TM_PRED จะใช้พิกเซล P ด้านบนและทางด้านซ้ายของบล็อกด้วย ความแตกต่างในแนวนอนระหว่างพิกเซลใน A (เริ่มจาก P) กระจายออกโดยใช้พิกเซลจาก L เพื่อเริ่มแถวแต่ละแถว

แผนภาพด้านล่างแสดงโหมดการคาดการณ์ต่างๆ ที่ใช้ในการบีบอัดแบบ WebP แบบสูญเสียรายละเอียด

สำหรับบล็อก Luma ขนาด 4x4 จะมีโหมดภายในเพิ่มเติมอีก 6 โหมดที่คล้ายกับ V_PRED และ H_PRED แต่จะตรงกับการคาดคะเนพิกเซลในทิศทางที่แตกต่างกัน ดูรายละเอียดเพิ่มเติมเกี่ยวกับโหมดเหล่านี้ได้ในคู่มือ VP8 Bitstream

การกำหนดจำนวนบล็อกแบบปรับอัตโนมัติ

หากต้องการปรับปรุงคุณภาพของรูปภาพ ระบบจะแบ่งรูปภาพออกเป็นบริเวณที่แสดงให้เห็นฟีเจอร์ที่คล้ายกัน สำหรับแต่ละกลุ่มเหล่านี้ พารามิเตอร์การบีบอัด (ขั้นตอนการคำนวณปริมาณ ระดับการกรอง ฯลฯ) จะได้รับการปรับแต่งโดยอิสระ ซึ่งจะช่วยให้เกิดการบีบอัดที่มีประสิทธิภาพโดยจัดสรรบิตไปยังที่ที่เป็นประโยชน์มากที่สุดอีกครั้ง VP8 อนุญาตให้มีกลุ่มได้สูงสุด 4 กลุ่ม (การจำกัด VP8 บิตสตรีม)

เหตุใด WebP (แบบสูญเสีย) จึงดีกว่า JPEG

การเขียนโค้ดการคาดการณ์เป็นเหตุผลหลักที่ WebP ชนะ JPEG การบล็อกเชิงปริมาณแบบปรับเปลี่ยนได้ ก็สร้างความแตกต่างได้มากเช่นกัน การกรองช่วยได้ในอัตราบิตปานกลาง/ต่ำ การเข้ารหัสเลขคณิตบูลีนให้การบีบอัด 5-10% เมื่อเทียบกับการเข้ารหัส Huffman

WebP แบบไม่สูญเสียรายละเอียด

การเข้ารหัส WebP แบบไม่สูญเสียข้อมูลจะขึ้นอยู่กับการแปลงรูปภาพโดยใช้เทคนิคต่างๆ มากมาย จากนั้นจะมีการเขียนโค้ดเอนโทรปีกับพารามิเตอร์ Transform และข้อมูลที่เปลี่ยนรูปแบบภาพ การแปลงที่นำไปใช้กับรูปภาพ ได้แก่ การคาดการณ์เชิงพื้นที่ของพิกเซล การแปลงพื้นที่สี การใช้พาเล็ตที่ปรากฏภายในเครื่อง การบรรจุหลายพิกเซลลงในพิกเซลเดียว และการแทนที่อัลฟ่า สำหรับการเขียนโค้ดเอนโทรปี เราใช้การเข้ารหัสแบบ LZ77-Huffman รูปแบบหนึ่ง ซึ่งใช้การเข้ารหัสแบบ 2 มิติของค่าระยะทางและค่ากระจัดกระจายแบบกะทัดรัด

การแปลงตัวคาดการณ์ (เชิงพื้นที่)

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

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

การเปลี่ยนรูปแบบสี (ลบความสัมพันธ์)

เป้าหมายของการแปลงสีคือตกแต่งค่า R, G และ B ของแต่ละพิกเซล การเปลี่ยนสีจะคงค่าสีเขียว (G) ไว้ตามเดิม โดยเปลี่ยนสีแดง (R) ตามสีเขียว และเปลี่ยนเป็นสีน้ำเงิน (B) ตามสีเขียว จากนั้นจึงเปลี่ยนตามสีแดง

ในกรณีของการเปลี่ยนรูปแบบตัวคาดการณ์ อันดับแรก รูปภาพจะถูกแบ่งเป็นบล็อกต่างๆ และมีการใช้โหมดการแปลงเดียวกันสำหรับพิกเซลทั้งหมดในบล็อกหนึ่ง องค์ประกอบการเปลี่ยนรูปแบบสีสำหรับแต่ละบล็อกจะมี 3 ประเภท ได้แก่ green_to_red,green_to_blue และ red_to_blue

ลบการเปลี่ยนแปลงสีเขียว

"ลบการแปลงสีเขียว" จะลบค่าสีเขียวออกจากค่าสีแดงและน้ำเงินของแต่ละพิกเซล เมื่อมีการเปลี่ยนรูปแบบนี้ เครื่องมือถอดรหัสจะต้องเพิ่มค่าสีเขียวลงในทั้งสีแดงและสีน้ำเงิน นี่เป็นกรณีพิเศษของการเปลี่ยนรูปแบบสีปกติทั่วไปตามข้างต้น เกิดขึ้นบ่อยพอที่จะทำให้เกิดการคัตออฟ

การแปลงการจัดทำดัชนีสี (จานสี)

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

การเขียนโค้ดแคชสี

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

การอ้างอิงย้อนหลัง LZ77

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

การเข้ารหัสคำนำหน้า LZ77 จะแบ่งค่าจำนวนเต็มขนาดใหญ่ออกเป็น 2 ส่วน ได้แก่ รหัสนำหน้าและบิตที่เกินมา รหัสนำหน้าจะเก็บโดยใช้โค้ดเอนโทรปี ขณะที่บิตพิเศษจะเก็บไว้ตามที่เป็นอยู่ (โดยไม่มีรหัสเอนโทรปี)

แผนภาพด้านล่างแสดง LZ77 (ตัวแปร 2 มิติ) ที่มีการจับคู่คำ (แทนที่จะเป็นพิกเซล)

WebP แบบสูญเสียข้อมูลที่มีอัลฟ่า

นอกจาก WebP แบบสูญเสียรายละเอียด (สี RGB) และ WebP แบบไม่สูญเสียรายละเอียด (RGB แบบไม่สูญเสียรายละเอียดที่มีอัลฟ่า) ยังมีโหมด WebP อีกโหมดหนึ่งที่อนุญาตให้เข้ารหัสแบบสูญเสียบางส่วนสำหรับช่อง RGB และการเข้ารหัสแบบไม่สูญเสียรายละเอียดของช่องอัลฟ่า สำหรับรูปแบบรูปภาพอื่นๆ แล้ว มีความเป็นไปได้สูงว่า (RGB แบบสูญเสียรายละเอียดและอัลฟ่าแบบไม่สูญเสียรายละเอียด) ทุกวันนี้ ผู้ดูแลเว็บที่ต้องการความโปร่งใสจะต้องเข้ารหัสรูปภาพแบบไม่สูญเสียรายละเอียดเป็นไฟล์ PNG ทำให้ขนาดรูปภาพขยายใหญ่ขึ้นมาก อัลฟ่าของ WebP จะเข้ารหัสรูปภาพที่มีบิตต่อพิกเซลต่ำและเป็นวิธีที่มีประสิทธิภาพในการลดขนาดของรูปภาพดังกล่าว การบีบอัดแบบไม่สูญเสียสัญญาณของช่องอัลฟ่าจะเพิ่มเพียง 22% ไบต์ ผ่านการเข้ารหัส WebP แบบสูญเสียบางส่วน (คุณภาพ 90)

โดยรวมแล้ว การแทนที่ PNG แบบโปร่งใสด้วย WebP แบบ Lossy+alpha จะประหยัดขนาด 60-70% โดยเฉลี่ย ซึ่งได้รับการยืนยันแล้วว่าเป็นฟีเจอร์ที่น่าสนใจที่ยอดเยี่ยมสำหรับเว็บไซต์ในอุปกรณ์เคลื่อนที่ที่มีไอคอนจำนวนมาก (เช่น everything.me)