เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ

ส่วนโอกาสของรายงาน Lighthouse จะแสดงรูปภาพที่ไม่ได้เพิ่มประสิทธิภาพทั้งหมด ซึ่งอาจประหยัดได้ กิบิไบต์ (KiB) เพิ่มประสิทธิภาพของรูปภาพเหล่านี้เพื่อให้หน้าเว็บโหลดเร็วขึ้นและใช้อินเทอร์เน็ตน้อยลง:

ภาพหน้าจอของการตรวจสอบรูปภาพที่เข้ารหัสรูปภาพ Lighthouse อย่างมีประสิทธิภาพ

วิธีที่ Lighthouse แจ้งว่ารูปภาพไม่เหมาะสม

Lighthouse จะรวบรวมรูปภาพ JPEG หรือ BMP ทั้งหมดในหน้า ตั้งค่าระดับการบีบอัดของแต่ละรูปภาพเป็น 85 แล้วเปรียบเทียบเวอร์ชันต้นฉบับกับเวอร์ชันที่บีบอัด หากค่าใช้จ่ายที่ประหยัดได้คือ 4KiB ขึ้นไป Lighthouse จะแจ้งว่ารูปภาพดังกล่าวเหมาะสมที่สุด

วิธีเพิ่มประสิทธิภาพรูปภาพ

คุณทําได้หลายขั้นตอนเพื่อเพิ่มประสิทธิภาพรูปภาพ ดังนี้

เพิ่มประสิทธิภาพรูปภาพโดยใช้เครื่องมือ GUI

อีกวิธีหนึ่งคือการเรียกใช้รูปภาพผ่านเครื่องมือเพิ่มประสิทธิภาพ ที่คุณติดตั้งในคอมพิวเตอร์และใช้งานเป็น GUI ตัวอย่างเช่น ด้วย ImageOptim ที่คุณลากและวางรูปภาพลงใน UI จากนั้นจึงบีบอัดรูปภาพโดยอัตโนมัติโดยไม่ลดคุณภาพลงอย่างเห็นได้ชัด หากคุณใช้เว็บไซต์ขนาดเล็กและจัดการการเพิ่มประสิทธิภาพรูปภาพทั้งหมดได้ด้วยตนเอง ตัวเลือกนี้น่าจะดีพอแล้ว

Squoosh เป็นอีกตัวเลือกหนึ่ง Squoosh ดูแลโดยทีม Google Web DevRel

คำแนะนำเฉพาะกลุ่ม

Drupal

ลองใช้โมดูลที่เพิ่มประสิทธิภาพและลดขนาดของรูปภาพที่อัปโหลดผ่านเว็บไซต์โดยอัตโนมัติขณะที่ยังคงรักษาคุณภาพไว้ นอกจากนี้ ให้ตรวจสอบว่าคุณใช้สไตล์รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ในตัวของ Drupal (พร้อมใช้งานใน Drupal 8 ขึ้นไป) สำหรับรูปภาพทั้งหมดที่แสดงในเว็บไซต์

จูมลา

ลองใช้ปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพที่บีบอัดรูปภาพแต่ยังคงคุณภาพไว้ได้

Magento

ลองใช้ส่วนขยาย Magento ของบุคคลที่สามที่ช่วยเพิ่มประสิทธิภาพรูปภาพ

WordPress

ลองใช้ปลั๊กอิน WordPress การเพิ่มประสิทธิภาพรูปภาพที่บีบอัดรูปภาพแต่ยังคงคุณภาพไว้ได้

แหล่งข้อมูล