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

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

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

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

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

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

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

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

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

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

คำแนะนำเฉพาะสแต็ก

Drupal

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

Joomla

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

Magento

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

WordPress

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

แหล่งข้อมูล