รูปภาพมักเป็นการดาวน์โหลดของไบต์ส่วนใหญ่ในหน้าเว็บ และยังมักกินพื้นที่ในการมองเห็นปริมาณมากด้วย ดังนั้น การเพิ่มประสิทธิภาพรูปภาพมักจะช่วยประหยัดไบต์ได้อย่างมากและปรับปรุงประสิทธิภาพของเว็บไซต์ ยิ่งเบราว์เซอร์ต้องดาวน์โหลดน้อยเท่าใด ก็ยิ่งต้องแข่งขันกับแบนด์วิดท์ของลูกค้าน้อยลง และเบราว์เซอร์ก็จะดาวน์โหลดและแสดงเนื้อหาที่เป็นประโยชน์บนหน้าจอได้เร็วขึ้นเท่านั้น
การเพิ่มประสิทธิภาพรูปภาพเป็นทั้งศาสตร์และศิลป์ เพราะไม่มีคำตอบที่ตายตัวว่าวิธีบีบอัดรูปภาพที่ดีที่สุดคืออะไร และเป็นวิทยาศาสตร์เนื่องจากมีเทคนิคและอัลกอริทึมที่พัฒนาขึ้นมากมายซึ่งจะช่วยลดขนาดของรูปภาพได้อย่างมาก การค้นหาการตั้งค่ารูปภาพที่เหมาะสมที่สุดต้องอาศัยการวิเคราะห์มิติข้อมูลต่างๆ อย่างรอบคอบ ไม่ว่าจะเป็นความสามารถในการจัดรูปแบบ เนื้อหาของข้อมูลที่เข้ารหัส คุณภาพ ขนาดพิกเซล และอื่นๆ
การเพิ่มประสิทธิภาพภาพเวกเตอร์
เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ Scalable Vector Graphics (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" encrypted="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) Alpha (ความโปร่งใส)
เบราว์เซอร์จะจัดสรรค่า 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 กิโลไบต์ |
| 200 x 200 | 40,000 คน | 156 KB |
| 300 x 300 | 90,000 คน | 351 KB |
| 500 X 500 | 250,000 | 977 กิโลไบต์ |
| 800 X 800 | 640,000 ครั้ง | 2,500 KB |
39 KB สำหรับรูปภาพขนาด 100x100 พิกเซลอาจดูไม่ใช่เรื่องใหญ่ แต่ขนาดไฟล์จะพุ่งสูงขึ้นอย่างรวดเร็วสำหรับรูปภาพขนาดใหญ่ และทำให้เนื้อหารูปภาพดาวน์โหลดช้าและมีราคาแพง ที่ผ่านมาโพสต์นี้มุ่งเน้นเฉพาะรูปแบบรูปภาพที่ "ไม่บีบอัด" โชคดีที่เราสามารถลดขนาดไฟล์ภาพได้มากมาย
กลยุทธ์ง่ายๆ อย่างหนึ่งคือ ลด "ความลึกของบิต" ของรูปภาพจาก 8 บิตต่อช่องให้เป็นชุดสีที่เล็กลง โดย 8 บิตต่อช่องทำให้เรามีค่า 256 รายการต่อช่อง และรวมสีรวม 16,777,216 (256 ^ 3) แล้วถ้าคุณลดจานสีเหลือ 256 สีล่ะ จากนั้นคุณจะต้องใช้พื้นที่รวมเพียง 8 บิตสำหรับแชแนล RGB และประหยัด 2 ไบต์ต่อพิกเซลได้ทันที ซึ่งเป็นการประหยัดการบีบอัด 50% เมื่อเทียบกับรูปแบบเดิม 4 ไบต์ต่อพิกเซล
ฉากที่ซับซ้อนซึ่งมีการเปลี่ยนสีแบบค่อยเป็นค่อยไป (เช่น การไล่ระดับสีหรือท้องฟ้า) ต้องใช้ชุดสีขนาดใหญ่เพื่อหลีกเลี่ยงการปรากฏที่ต่างจากภาพ เช่น ท้องฟ้าแบบพิกเซลในเนื้อหา 5 บิต ในทางกลับกัน หากรูปภาพใช้เพียงไม่กี่สี ก็แสดงว่าชุดสีขนาดใหญ่กลายเป็นการสิ้นเปลืองเศษเล็กๆ ที่มีค่า!
จากนั้น เมื่อเพิ่มประสิทธิภาพข้อมูลที่จัดเก็บในแต่ละพิกเซลแล้ว คุณอาจได้ข้อมูลที่ชัดเจนมากขึ้นและสามารถดูได้ที่พิกเซลใกล้เคียงด้วย เช่น รูปภาพจำนวนมาก โดยเฉพาะรูปภาพมีพิกเซลใกล้เคียงจำนวนมากที่มีสีคล้ายกัน เช่น ท้องฟ้า พื้นผิวซ้ำๆ เป็นต้น การใช้ข้อมูลนี้เป็นประโยชน์กับคุณ คอมเพรสเซอร์จะสามารถใช้การเข้ารหัสแบบเดลต้า ซึ่งแทนการจัดเก็บค่าแต่ละค่าสำหรับแต่ละพิกเซล คุณจะจัดเก็บความแตกต่างระหว่างพิกเซลใกล้เคียงได้ หากพิกเซลที่อยู่ติดกันเท่ากัน เดลต้าจะเป็น "ศูนย์" และคุณเพียงต้องจัดเก็บเพียงบิตเดียวเท่านั้น แล้วทำไมต้องหยุดแค่นั้นล่ะ...
ตามนุษย์มีระดับความไวต่อสีต่างๆ ต่างกัน: คุณสามารถเพิ่มประสิทธิภาพการเข้ารหัสสีเพื่อแก้ไขปัญหานี้โดยลดหรือเพิ่มพาเล็ตสำหรับสีเหล่านั้น พิกเซล "ใกล้เคียง" จะสร้างตารางกริด 2 มิติ ซึ่งหมายความว่าแต่ละพิกเซลจะมีเพื่อนบ้านหลายตัว คุณสามารถใช้ข้อเท็จจริงนี้ในการปรับปรุงการเข้ารหัสแบบเดลต้า แทนที่จะดูเฉพาะเพื่อนบ้านที่อยู่ใกล้ๆ ของแต่ละพิกเซล คุณสามารถดูบล็อกพิกเซลใกล้เคียงที่ใหญ่ขึ้นและเข้ารหัสบล็อกต่างๆ ด้วยการตั้งค่าที่แตกต่างกันได้
อย่างที่คุณทราบ การเพิ่มประสิทธิภาพรูปภาพมีความซับซ้อนอย่างรวดเร็ว (หรือสนุก ขึ้นอยู่กับมุมมองของคุณ) และเป็นการวิจัยเชิงวิชาการและเชิงพาณิชย์ที่มีบทบาทจริง รูปภาพมีการใช้เนื้อที่มากและมีประโยชน์มากมายในการพัฒนาเทคนิคการบีบอัดรูปภาพให้ดีขึ้น หากต้องการทราบข้อมูลเพิ่มเติม โปรดไปที่หน้า Wikipedia หรือไปที่สมุดปกขาวเกี่ยวกับเทคนิคการบีบอัด WebP เพื่อดูตัวอย่างแบบลงมือปฏิบัติ
ขอย้ำอีกครั้งว่าทั้งหมดนี้ดี แต่ก็เป็นเชิงวิชาการด้วย จะช่วยคุณเพิ่มประสิทธิภาพรูปภาพบนเว็บไซต์ได้อย่างไร สิ่งสำคัญก็คือคุณต้องเข้าใจลักษณะของปัญหา: พิกเซล RGBA, ความลึกของบิต และเทคนิคการเพิ่มประสิทธิภาพต่างๆ แนวคิดเหล่านี้สำคัญต่อการทำความเข้าใจและคำนึงถึงก่อนที่จะเข้าสู่การสนทนาเกี่ยวกับรูปภาพแรสเตอร์รูปแบบต่างๆ
การบีบอัดรูปภาพแบบไม่สูญเสียรายละเอียดและสูญเสียข้อมูล
สำหรับข้อมูลบางประเภท เช่น ซอร์สโค้ดสำหรับหน้าเว็บหรือไฟล์ปฏิบัติการ คอมเพรสเซอร์ต้องไม่เปลี่ยนแปลงหรือสูญเสียข้อมูลดั้งเดิมใดๆ เช่น ข้อมูลบางส่วนที่หายไปหรือไม่ถูกต้อง อาจทำให้ความหมายของเนื้อหาของไฟล์เปลี่ยนแปลงไปโดยสิ้นเชิง หรือที่แย่กว่านั้นคือ ทำให้ข้อมูลเสียหายโดยสิ้นเชิง สำหรับข้อมูลประเภทอื่นๆ เช่น รูปภาพ เสียง และวิดีโอ การแสดงรูปแบบ "โดยประมาณ" ของข้อมูลต้นฉบับอาจเหมาะสมที่สุด
อันที่จริง เนื่องจากการทำงานของดวงตาเรา ดังนั้น ไปป์ไลน์การเพิ่มประสิทธิภาพรูปภาพโดยทั่วไปประกอบด้วย 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 จะมีขนาดเล็กกว่ารูปแบบรูปภาพที่เก่ากว่ามาก
- เลือกรูปแบบรูปภาพแรสเตอร์ที่ดีที่สุด: ระบุข้อกำหนดด้านฟังก์ชันการทำงานและเลือกรูปแบบที่เหมาะกับเนื้อหาแต่ละรายการ
- ทดลองใช้การตั้งค่าคุณภาพที่เหมาะสมกับรูปแบบแรสเตอร์: อย่ากลัวที่จะลดการตั้งค่า "คุณภาพ" เพราะมักได้ผลดีและช่วยลดไบต์ได้อย่างมาก
- นำข้อมูลเมตาที่ไม่จำเป็นของรูปภาพออก: รูปภาพแรสเตอร์จำนวนมากมีข้อมูลเมตาที่ไม่จำเป็นเกี่ยวกับรูปภาพ เช่น ข้อมูลภูมิศาสตร์ ข้อมูลกล้อง และอื่นๆ ใช้เครื่องมือที่เหมาะสมเพื่อนำข้อมูลเหล่านี้ออก
- แสดงรูปภาพที่ปรับขนาดแล้ว: ปรับขนาดรูปภาพ และตรวจสอบให้ขนาดที่ "แสดง" ใกล้เคียงกับขนาด "ธรรมชาติ" มากที่สุด โปรดให้ความใส่ใจเป็นพิเศษกับรูปภาพขนาดใหญ่ เนื่องจากรูปภาพเหล่านี้มีค่าใช้จ่ายสูงที่สุดเมื่อมีการปรับขนาด
- ตั้งค่าให้เป็นอัตโนมัติ: ลงทุนซื้อเครื่องมือและโครงสร้างพื้นฐานแบบอัตโนมัติที่จะเพิ่มประสิทธิภาพเนื้อหารูปภาพทั้งหมดเสมอ