ส่วนโอกาสของรายงาน Lighthouse จะแสดงรูปภาพทั้งหมดในหน้าเว็บที่มีขนาดไม่เหมาะสมและประหยัดได้กิบิไบต์ (KiB) ปรับขนาดรูปภาพเหล่านี้เพื่อประหยัดอินเทอร์เน็ตและปรับปรุงเวลาในการโหลดหน้าเว็บ
วิธีที่ Lighthouse คำนวณรูปภาพที่ใหญ่เกินขนาด
สําหรับรูปภาพแต่ละรูปในหน้าเว็บ Lighthouse จะเปรียบเทียบขนาดของรูปภาพที่แสดงกับขนาดของรูปภาพจริง ขนาดที่แสดงผลรองรับอัตราส่วนพิกเซลของอุปกรณ์ด้วย หากขนาดที่แสดงผลเล็กกว่าขนาดจริงอย่างน้อย 4KiB รูปภาพจะไม่ผ่านการตรวจสอบ
กลยุทธ์สำหรับการปรับขนาดรูปภาพที่เหมาะสม
ตามหลักการแล้ว หน้าเว็บไม่ควรแสดงรูปภาพที่ขนาดใหญ่กว่าเวอร์ชันที่แสดงผลบนหน้าจอของผู้ใช้ อะไรก็ตามที่ใหญ่กว่านั้นจะก่อให้เกิดไบต์โดยเปล่าประโยชน์และทำให้เวลาในการโหลดหน้าเว็บช้าลง
กลยุทธ์หลักสำหรับการแสดงรูปภาพที่มีขนาดเหมาะสมเรียกว่า "รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์" สำหรับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ คุณจะสร้างรูปภาพแต่ละรูปขึ้นมาหลายเวอร์ชัน จากนั้นระบุเวอร์ชันที่จะใช้ใน HTML หรือ CSS โดยใช้คิวรี่สื่อ มิติข้อมูลวิวพอร์ต และอื่นๆ นอกจากนี้ RespImageLint เป็น bookmarklet ที่มีประโยชน์สำหรับการระบุค่า 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 8 ขึ้นไป) เมื่อแสดงผลช่องรูปภาพผ่านโหมดดู มุมมอง หรือรูปภาพที่อัปโหลดผ่านตัวแก้ไข WYSIWYG
แกตส์บี
ใช้ปลั๊กอิน gatsby-image เพื่อสร้างรูปภาพขนาดเล็กหลายๆ รูปสำหรับสมาร์ทโฟนและแท็บเล็ต นอกจากนี้ยังสร้างตัวยึดตำแหน่งรูปภาพ SVG เพื่อการโหลดแบบ Lazy Loading ได้อย่างมีประสิทธิภาพ
จูมลา
ลองใช้ปลั๊กอินรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
WordPress
อัปโหลดรูปภาพโดยตรงผ่านไลบรารีสื่อเพื่อให้แน่ใจว่ามีขนาดรูปภาพที่จำเป็นพร้อมใช้งาน จากนั้นแทรกรูปภาพจากไลบรารีสื่อหรือใช้วิดเจ็ตรูปภาพเพื่อให้มีการใช้ขนาดรูปภาพที่เหมาะสมที่สุด (รวมถึงขนาดสำหรับเบรกพอยท์ที่ปรับเปลี่ยนตามอุปกรณ์) หลีกเลี่ยงการใช้รูปภาพFull Size
เว้นแต่ขนาดจะเพียงพอต่อการใช้งาน ดูการแทรกรูปภาพในโพสต์และหน้าเว็บ