แสดงรูปภาพที่มีสัดส่วนภาพไม่ถูกต้อง

หากรูปภาพที่แสดงมีสัดส่วนภาพต่างออกไปอย่างมากกับสัดส่วนภาพในไฟล์ต้นฉบับ (สัดส่วนภาพธรรมชาติ) รูปภาพที่แสดงอาจดูบิดเบี้ยวและอาจทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่น่าพึงพอใจ

วิธีที่การตรวจสอบสัดส่วนภาพของ Lighthouse ไม่สำเร็จ

Lighthouse จะแสดงสถานะรูปภาพที่มีมิติข้อมูลที่แสดงผลแตกต่างจากขนาดที่คาดไว้มากกว่า 2-3 พิกเซลเมื่อแสดงในอัตราส่วนธรรมชาติ

การตรวจสอบ Lighthouse แสดงรูปภาพที่แสดงในอัตราส่วนไม่ถูกต้อง

สาเหตุที่พบบ่อย 2 ประการที่ทำให้สัดส่วนภาพไม่ถูกต้องมีดังนี้

  • รูปภาพได้รับการตั้งค่าด้วยค่าความกว้างและความสูงที่ชัดเจนซึ่งแตกต่างจากขนาดของรูปภาพต้นฉบับ
  • รูปภาพจะกําหนดความกว้างและความสูงเป็นเปอร์เซ็นต์ของคอนเทนเนอร์ที่มีขนาดแปรผัน

ตรวจสอบว่ารูปภาพแสดงในสัดส่วนภาพที่ถูกต้อง

ใช้ CDN ของรูปภาพ

CDN ของรูปภาพช่วยให้กระบวนการสร้างรูปภาพในเวอร์ชันขนาดต่างๆ เป็นแบบอัตโนมัติได้ง่ายขึ้น ดูใช้ CDN ของรูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพเพื่อดูภาพรวมและวิธีติดตั้ง CDN รูปภาพของ Thumbor สำหรับ Codelab แบบปฏิบัติจริง

ตรวจสอบ CSS ที่ส่งผลต่อสัดส่วนภาพ

หากคุณประสบปัญหาในการค้นหา CSS ที่ทําให้สัดส่วนภาพไม่ถูกต้อง Chrome DevTools สามารถแสดงการประกาศ CSS ที่ส่งผลต่อรูปภาพหนึ่งๆ ได้ ดูข้อมูลเพิ่มเติมได้ที่หน้าดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริงๆ ของ Google

ตรวจสอบแอตทริบิวต์ width และ height ของรูปภาพใน HTML

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

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

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

แหล่งข้อมูล