ส่วนโอกาสในรายงาน Lighthouse จะแสดงรูปภาพที่ยังไม่ได้เพิ่มประสิทธิภาพทั้งหมด พร้อมการประหยัดพื้นที่ที่อาจเกิดขึ้นในหน่วยกิบิไบต์ (KiB) เพิ่มประสิทธิภาพรูปภาพเหล่านี้เพื่อให้หน้าเว็บโหลดได้เร็วขึ้นและใช้อินเทอร์เน็ตน้อยลง
Lighthouse จะแจ้งว่ารูปภาพเพิ่มประสิทธิภาพได้เมื่อใด
Lighthouse จะรวบรวมรูปภาพ JPEG หรือ BMP ทั้งหมดในหน้าเว็บ ตั้งค่าระดับการบีบอัดของแต่ละรูปภาพเป็น 85 แล้วเปรียบเทียบเวอร์ชันต้นฉบับกับเวอร์ชันที่บีบอัด หากประหยัดพื้นที่ได้ 4 KiB ขึ้นไป Lighthouse จะแจ้งว่ารูปภาพนั้นเพิ่มประสิทธิภาพได้
วิธีเพิ่มประสิทธิภาพรูปภาพ
คุณสามารถเพิ่มประสิทธิภาพรูปภาพได้หลายขั้นตอน ดังนี้
- การใช้ CDN รูปภาพ
- การบีบอัดรูปภาพ
- การแทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ
- การโหลดรูปภาพแบบ Lazy Loading
- การแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
- แสดงรูปภาพที่มีขนาดถูกต้อง
- การใช้รูปภาพ WebP
เพิ่มประสิทธิภาพรูปภาพโดยใช้เครื่องมือ GUI
อีกวิธีหนึ่งคือการเรียกใช้รูปภาพผ่านเครื่องมือเพิ่มประสิทธิภาพ ที่คุณติดตั้งในคอมพิวเตอร์และเรียกใช้เป็น GUI เช่น เมื่อใช้ ImageOptim คุณจะลากและวางรูปภาพลงใน UI ของแอป จากนั้นแอปจะบีบอัดรูปภาพโดยอัตโนมัติโดยไม่ลดคุณภาพอย่างเห็นได้ชัด หากคุณดูแลเว็บไซต์ขนาดเล็กและสามารถเพิ่มประสิทธิภาพรูปภาพทั้งหมดด้วยตนเองได้ ตัวเลือกนี้อาจเพียงพอ
Squoosh เป็นอีกตัวเลือกหนึ่ง Squoosh ได้รับการดูแลโดยทีม Google Web DevRel
คำแนะนำเฉพาะสำหรับกองซ้อน
Drupal
ลองใช้โมดูลที่เพิ่มประสิทธิภาพและลดขนาดของรูปภาพที่อัปโหลดผ่านเว็บไซต์โดยอัตโนมัติขณะที่ยังคงรักษาคุณภาพไว้ และตรวจสอบว่าคุณกำลังใช้สไตล์รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์แบบเนทีฟจาก Drupal สำหรับรูปภาพทั้งหมดที่แสดงผลในเว็บไซต์
Joomla
ลองใช้ปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพ ที่บีบอัดรูปภาพแต่ยังคงคุณภาพไว้ได้
Magento
ลองใช้ส่วนขยาย Magento ของบุคคลที่สามที่เพิ่มประสิทธิภาพรูปภาพ
WordPress
ลองใช้ปลั๊กอิน WordPress การเพิ่มประสิทธิภาพรูปภาพที่บีบอัดรูปภาพแต่ยังคงคุณภาพไว้ได้