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