ส่วนโอกาสในรายงาน Lighthouse จะแสดงรูปภาพทั้งหมดในหน้าเว็บ ที่มีขนาดไม่เหมาะสม พร้อมกับการประหยัดพื้นที่ที่อาจเกิดขึ้นในหน่วยกิบิไบต์ (KiB) ปรับขนาดรูปภาพเหล่านี้เพื่อประหยัดข้อมูลและปรับปรุงเวลาในการโหลดหน้าเว็บ
วิธีที่ Lighthouse คำนวณรูปภาพที่มีขนาดใหญ่เกินไป
สำหรับรูปภาพแต่ละรูปในหน้าเว็บ Lighthouse จะเปรียบเทียบขนาดของรูปภาพที่แสดงกับขนาดของรูปภาพจริง ขนาดที่แสดงผลยังคำนึงถึงอัตราส่วนพิกเซลของอุปกรณ์ด้วย หากขนาดที่แสดงผลเล็กกว่าขนาดจริงอย่างน้อย 4 KiB รูปภาพจะไม่ผ่านการตรวจสอบ
กลยุทธ์ในการปรับขนาดรูปภาพอย่างเหมาะสม
ในอุดมคติแล้ว หน้าเว็บไม่ควรแสดงรูปภาพที่ขนาดใหญ่กว่าเวอร์ชันที่แสดงผลในหน้าจอของผู้ใช้ หากมีขนาดใหญ่กว่านั้นจะทำให้เสียไบต์ไปโดยเปล่าประโยชน์และทำให้หน้าเว็บโหลดช้าลง
กลยุทธ์หลักในการแสดงรูปภาพที่มีขนาดเหมาะสมเรียกว่า "รูปภาพที่ปรับตามอุปกรณ์" รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ช่วยให้คุณสร้างรูปภาพแต่ละรูปได้หลายเวอร์ชัน
จากนั้นระบุเวอร์ชันที่จะใช้ใน HTML หรือ CSS โดยใช้คิวรี่สื่อ ขนาดวิวพอร์ต และอื่นๆ นอกจากนี้ RespImageLint ยังเป็นบุ๊กมาร์กเล็ตที่มีประโยชน์ในการระบุค่า srcset และ sizes ที่เหมาะสมที่สุดสำหรับรูปภาพ ดูข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์เหล่านี้ได้ที่แสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
CDN รูปภาพเป็นอีกกลยุทธ์หลักในการแสดงรูปภาพที่มีขนาดเหมาะสม คุณสามารถมองว่า CDN รูปภาพเป็นเหมือน API ของบริการเว็บสำหรับการเปลี่ยนรูปภาพ
อีกกลยุทธ์หนึ่งคือการใช้รูปแบบรูปภาพแบบเวกเตอร์ เช่น SVG รูปภาพ SVG สามารถปรับขนาดได้ทุกขนาดด้วยโค้ดจำนวนจำกัด ดูข้อมูลเพิ่มเติมได้ที่แทนที่ไอคอนที่ซับซ้อนด้วย SVG
เครื่องมืออย่าง gulp-responsive หรือ responsive-images-generator จะช่วยทำให้กระบวนการแปลงรูปภาพเป็นหลายรูปแบบโดยอัตโนมัติ นอกจากนี้ ยังมี CDN รูปภาพที่ให้คุณสร้างรูปภาพได้หลายเวอร์ชัน ไม่ว่าจะตอนอัปโหลดรูปภาพหรือขอจากหน้าเว็บ
คำแนะนำเฉพาะสำหรับกองซ้อน
AMP
ใช้การรองรับของคอมโพเนนต์
amp-img
สำหรับ
srcset
เพื่อระบุเนื้อหารูปภาพที่จะใช้ตามขนาดของหน้าจอ ดูรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ด้วย srcset, sizes และ heights ด้วย
Angular
ลองใช้ยูทิลิตี BreakpointObserver ใน Component Dev
Kit (CDK) เพื่อจัดการเบรกพอยท์ของภาพ
Drupal
ตรวจสอบว่าคุณกำลังใช้สไตล์รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์แบบเนทีฟจาก Drupal ใช้สไตล์รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์เมื่อแสดงผลช่องรูปภาพผ่านโหมดมุมมอง มุมมอง หรือรูปภาพที่อัปโหลดผ่านตัวแก้ไข WYSIWYG
Gatsby
ใช้ปลั๊กอิน gatsby-image เพื่อ สร้างรูปภาพขนาดเล็กหลายรูปสำหรับสมาร์ทโฟนและแท็บเล็ต นอกจากนี้ยังสร้าง ตัวยึดตำแหน่งรูปภาพ SVG เพื่อการโหลดแบบ Lazy Loading ที่มีประสิทธิภาพได้ด้วย
Joomla
ลองใช้ปลั๊กอินรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา
WordPress
อัปโหลดรูปภาพโดยตรงผ่านไลบรารีสื่อเพื่อให้แน่ใจว่ามีขนาดรูปภาพที่จำเป็นพร้อมใช้งาน จากนั้นแทรกรูปภาพจากไลบรารีสื่อหรือใช้วิดเจ็ตรูปภาพเพื่อให้มีการใช้ขนาดรูปภาพที่มีประสิทธิภาพสูงสุด (รวมถึงขนาดสำหรับเบรกพอยท์ที่ปรับเปลี่ยนตามอุปกรณ์) หลีกเลี่ยงการใช้รูปภาพFull Size
นอกเสียจากว่าขนาดจะเพียงพอต่อการใช้งาน ดูการแทรกรูปภาพลงในโพสต์และหน้าเว็บ