รูปภาพมักทำให้เกิดการดาวน์โหลดข้อมูลมากที่สุดบนหน้าเว็บและมักจะกินพื้นที่ในการมองเห็นปริมาณมาก ดังนั้น การเพิ่มประสิทธิภาพรูปภาพมักจะช่วยลดไบต์ได้อย่างมากและปรับปรุงประสิทธิภาพเว็บไซต์ กล่าวคือยิ่งเบราว์เซอร์ต้องดาวน์โหลดน้อยลง แบนด์วิดท์ของไคลเอ็นต์ก็จะยิ่งลดน้อยลง และเบราว์เซอร์ก็จะดาวน์โหลดและแสดงเนื้อหาที่เป็นประโยชน์บนหน้าจอได้เร็วขึ้น
การเพิ่มประสิทธิภาพรูปภาพเป็นทั้งศิลปะและวิทยาศาสตร์ เพราะเป็นศิลปะเพราะไม่มีคำตอบตายตัวว่าวิธีบีบอัดรูปภาพที่ดีที่สุดคืออะไร และเป็นวิทยาศาสตร์เนื่องจากมีเทคนิคและอัลกอริทึมที่พัฒนาอย่างดีหลายอย่างและสามารถลดขนาดรูปภาพลงได้อย่างมาก การค้นหาการตั้งค่ารูปภาพที่เหมาะสมต้องมีการวิเคราะห์มิติข้อมูลอย่างละเอียด เช่น ความสามารถในการจัดรูปแบบ เนื้อหาของข้อมูลที่เข้ารหัส คุณภาพ ขนาดพิกเซล และอื่นๆ
การเพิ่มประสิทธิภาพภาพเวกเตอร์
เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ Scalable Vector Graphics (SVG) ซึ่งเป็นรูปแบบภาพแบบ XML สำหรับกราฟิกสองมิติ คุณสามารถฝังมาร์กอัป 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) ช่องสีอัลฟ่า (ความโปร่งใส)
ภายในเบราว์เซอร์จะจัดสรรค่า 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 กิโลไบต์ |
| 300 x 300 | 90,000 คน | 351 กิโลไบต์ |
| 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 จะมีขนาดเล็กกว่ารูปแบบรูปภาพเก่ามาก
- เลือกรูปแบบรูปภาพแรสเตอร์ที่ดีที่สุด: ระบุข้อกำหนดด้านฟังก์ชันและเลือกรูปแบบที่เหมาะกับเนื้อหาแต่ละรายการ
- ทดลองใช้การตั้งค่าคุณภาพที่เหมาะสมกับรูปแบบแรสเตอร์: อย่ากลัวที่จะลดการตั้งค่า "คุณภาพ" เพราะมักได้ผลดีและช่วยลดไบต์ได้อย่างมาก
- นำข้อมูลเมตาที่ไม่จำเป็นของรูปภาพออก: รูปภาพแรสเตอร์จำนวนมากมีข้อมูลเมตาที่ไม่จำเป็นเกี่ยวกับเนื้อหา เช่น ข้อมูลภูมิศาสตร์ ข้อมูลกล้อง และอื่นๆ ใช้เครื่องมือที่เหมาะสมเพื่อนำข้อมูลนี้ออก
- แสดงรูปภาพที่มีการปรับขนาด: ปรับขนาดรูปภาพ และตรวจสอบว่าขนาดที่ "แสดง" ใกล้เคียงกับขนาด "ธรรมชาติ" มากที่สุด ใส่ใจเป็นพิเศษกับรูปภาพขนาดใหญ่ เพราะรูปภาพเหล่านี้มีค่าใช้จ่ายสูงที่สุดเมื่อปรับขนาด
- ตั้งค่าให้เป็นอัตโนมัติ: ลงทุนซื้อเครื่องมือและโครงสร้างพื้นฐานแบบอัตโนมัติที่จะเพิ่มประสิทธิภาพชิ้นงานรูปภาพทั้งหมดเสมอ