เลือกระดับการบีบอัดที่เหมาะสม

Ilya Grigorik
Jeremy Wagner

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

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

การเพิ่มประสิทธิภาพรูปภาพเวกเตอร์

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

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

ตัวอย่างด้านบนแสดงผลรูปวงกลมแบบง่ายด้านล่างที่มีเส้นขอบสีดําและพื้นหลังสีแดง และส่งออกจาก Adobe Illustrator

<?xml version="1.0" encoding="utf-8"?>

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

ตัวอย่างเช่น SVGO ลดขนาดไฟล์ SVG ด้านบนที่ Illustrator สร้างขึ้นได้ 58% จาก 470 เป็น 199 ไบต์

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>

เนื่องจาก SVG เป็นรูปแบบที่อิงตาม XML คุณจึงใช้การบีบอัด GZIP เพื่อลดขนาดการโอนได้ โปรดตรวจสอบว่าเซิร์ฟเวอร์ได้รับการกําหนดค่าให้บีบอัดชิ้นงาน SVG

รูปภาพแรสเตอร์เป็นเพียงตารางกริด 2 มิติของ "พิกเซล" แต่ละพิกเซล เช่น รูปภาพขนาด 100x100 พิกเซลคือลําดับของพิกเซล 10,000 รายการ พิกเซลแต่ละพิกเซลจะจัดเก็บค่า "RGBA" ดังนี้ (R) ช่องสีแดง (G) ช่องสีเขียว (B) ช่องสีน้ำเงิน และ (A) ช่องอัลฟ่า (ความโปร่งใส)

เบราว์เซอร์จะจัดสรรค่า (เฉดสี) 256 ค่าสำหรับแต่ละช่อง ซึ่งเท่ากับ 8 บิตต่อช่อง (2 ^ 8 = 256) และ 4 ไบต์ต่อพิกเซล (4 ช่อง x 8 บิต = 32 บิต = 4 ไบต์) ดังนั้น หากเราทราบขนาดของตารางกริด ก็จะคำนวณขนาดไฟล์ได้โดยง่าย ดังนี้

  • รูปภาพขนาด 100x100 พิกเซลประกอบด้วย 10,000 พิกเซล
  • 10,000 พิกเซล x 4 ไบต์ = 40,000 ไบต์
  • 40,000 ไบต์ / 1024 = 39 KB
ขนาด พิกเซล ขนาดไฟล์
ขนาด 100 X 100 10,000 39 KB
200 x 200 40,000 156 KB
300 x 300 90,000 คน 351 KB
500 x 500 250,000 977 KB
800 x 800 640,000 2500 KB

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

กลยุทธ์ง่ายๆ อย่างหนึ่งคือการลด "จำนวนบิต" ของรูปภาพจาก 8 บิตต่อช่องเป็นจานสีที่เล็กลง โดย 8 บิตต่อช่องจะให้ค่า 256 ค่าต่อช่องและสีทั้งหมด 16,777,216 (256 ^ 3) สี จะเกิดอะไรขึ้นหากคุณลดจำนวนสีในชุดเป็น 256 สี คุณจึงต้องใช้บิตทั้งหมดเพียง 8 บิตสำหรับช่อง RGB และประหยัดพื้นที่ได้ 2 ไบต์ต่อพิกเซลทันที ซึ่งเท่ากับประหยัดการบีบอัดได้ 50% เมื่อเทียบกับรูปแบบเดิมที่ 4 ไบต์ต่อพิกเซล

อาร์ติแฟกต์การบีบอัด
จากซ้ายไปขวา (PNG): 32 บิต (16 ล้านสี), 7 บิต (128 สี), 5 บิต (32 สี)

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

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

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

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

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

การบีบอัดรูปภาพแบบไม่สูญเสียข้อมูลเทียบกับการบีบอัดรูปภาพแบบสูญเสียบางส่วน

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

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

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

ขั้นตอนแรกเป็นขั้นตอนที่ไม่บังคับ และอัลกอริทึมที่แน่นอนจะขึ้นอยู่กับรูปแบบรูปภาพนั้นๆ แต่สิ่งสำคัญคือต้องเข้าใจว่ารูปภาพทุกรูปสามารถผ่านขั้นตอนการบีบอัดแบบสูญเสียข้อมูลเพื่อลดขนาดได้ อันที่จริงแล้ว ความแตกต่างระหว่างรูปแบบรูปภาพต่างๆ เช่น GIF, PNG, JPEG และอื่นๆ อยู่ที่การรวมอัลกอริทึมเฉพาะที่ใช้ (หรือละเว้น) เมื่อใช้ขั้นตอนแบบสูญเสียคุณภาพและแบบไม่สูญเสียคุณภาพ

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

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

ผลของการบีบอัดรูปภาพต่อ Core Web Vitals

เนื่องจากรูปภาพมักเป็นปัจจัยที่ทำให้เกิด Largest Contentful Paint การลดระยะเวลาในการโหลดทรัพยากรของรูปภาพจึงส่งผลให้ LCP ดีขึ้นทั้งในห้องทดลองและการใช้งานจริง

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

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

เช็กลิสต์การเพิ่มประสิทธิภาพรูปภาพ

เคล็ดลับและเทคนิคที่ควรคำนึงถึงขณะเพิ่มประสิทธิภาพรูปภาพ

  • ใช้รูปแบบเวกเตอร์: รูปภาพเวกเตอร์ไม่ขึ้นอยู่กับความละเอียดและขนาด ซึ่งเหมาะอย่างยิ่งกับโลกที่มีอุปกรณ์หลายประเภทและความละเอียดสูง
  • ย่อและบีบอัดเนื้อหา SVG: มาร์กอัป XML ที่แอปพลิเคชันวาดภาพส่วนใหญ่สร้างขึ้นมักมีข้อมูลเมตาที่ไม่จำเป็นซึ่งนำออกได้ โปรดตรวจสอบว่าเซิร์ฟเวอร์ของคุณกำหนดค่าให้ใช้การบีบอัด GZIP สำหรับเนื้อหา SVG
  • ใช้ WebP หรือ AVIF แทนรูปแบบแรสเตอร์แบบเก่า: โดยทั่วไปรูปภาพ WebP และ AVIF จะมีขนาดเล็กกว่ารูปภาพรูปแบบเก่ามาก
  • เลือกรูปแบบรูปภาพแรสเตอร์ที่ดีที่สุด: ระบุข้อกำหนดด้านฟังก์ชันการทำงานและเลือกรูปแบบที่เหมาะกับเนื้อหาแต่ละรายการ
  • ทดสอบการตั้งค่าคุณภาพที่เหมาะสมที่สุดสำหรับรูปแบบแรสเตอร์: อย่ากลัวที่จะลดการตั้งค่า "คุณภาพ" เพราะผลลัพธ์มักจะดีมากและประหยัดไบต์ได้อย่างมาก
  • นำข้อมูลเมตาที่ไม่จำเป็นของรูปภาพออก: รูปภาพแรสเตอร์จำนวนมากมีข้อมูลเมตาที่ไม่จำเป็นเกี่ยวกับเนื้อหา เช่น ข้อมูลภูมิศาสตร์ ข้อมูลกล้อง และอื่นๆ ใช้เครื่องมือที่เหมาะสมเพื่อลบข้อมูลนี้
  • แสดงรูปภาพที่ปรับขนาดแล้ว: ปรับขนาดรูปภาพและตรวจสอบว่าขนาด "การแสดงผล" ใกล้เคียงกับขนาด "ปกติ" ของรูปภาพมากที่สุด โปรดตรวจสอบรูปภาพขนาดใหญ่เป็นพิเศษ เนื่องจากรูปภาพเหล่านี้มีขนาดใหญ่ที่สุดเมื่อปรับขนาด
  • ตั้งค่าให้เป็นอัตโนมัติ: ลงทุนซื้อเครื่องมือและโครงสร้างพื้นฐานแบบอัตโนมัติที่จะเพิ่มประสิทธิภาพเนื้อหารูปภาพทั้งหมดเสมอ