หากรูปภาพที่แสดงมีสัดส่วนภาพต่างออกไปอย่างมากกับสัดส่วนภาพในไฟล์ต้นฉบับ (สัดส่วนภาพธรรมชาติ) รูปภาพที่แสดงอาจดูบิดเบี้ยวและอาจทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่น่าพึงพอใจ
วิธีที่การตรวจสอบสัดส่วนภาพของ Lighthouse ไม่สำเร็จ
Lighthouse จะแสดงสถานะรูปภาพที่มีมิติข้อมูลที่แสดงผลแตกต่างจากขนาดที่คาดไว้มากกว่า 2-3 พิกเซลเมื่อแสดงในอัตราส่วนธรรมชาติ
สาเหตุที่พบบ่อย 2 ประการที่ทำให้สัดส่วนภาพไม่ถูกต้องมีดังนี้
- รูปภาพได้รับการตั้งค่าด้วยค่าความกว้างและความสูงที่ชัดเจนซึ่งแตกต่างจากขนาดของรูปภาพต้นฉบับ
- รูปภาพจะกําหนดความกว้างและความสูงเป็นเปอร์เซ็นต์ของคอนเทนเนอร์ที่มีขนาดแปรผัน
ตรวจสอบว่ารูปภาพแสดงในสัดส่วนภาพที่ถูกต้อง
ใช้ CDN ของรูปภาพ
CDN ของรูปภาพช่วยให้กระบวนการสร้างรูปภาพในเวอร์ชันขนาดต่างๆ เป็นแบบอัตโนมัติได้ง่ายขึ้น ดูใช้ CDN ของรูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพเพื่อดูภาพรวมและวิธีติดตั้ง CDN รูปภาพของ Thumbor สำหรับ Codelab แบบปฏิบัติจริง
ตรวจสอบ CSS ที่ส่งผลต่อสัดส่วนภาพ
หากคุณประสบ��ัญหาในการค้นหา CSS ที่��������ห้สัดส่วนภาพไม่ถูกต้อง Chrome DevTools สามารถแสดงการประกาศ CSS ที่ส่งผลต่อรูปภาพหนึ่งๆ ได้ ดูข้อมูลเพิ่มเติมได้ที่หน้าดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริงๆ ของ Google
ตรวจสอบแอตทริบิวต์ width และ height ของรูปภาพใน HTML
หากเป็นไปได้ คุณควรระบุแอตทริบิวต์ width และ height ของแต่ละรูปภาพใน HTML เพื่อให้เบราว์เซอร์จัดสรรพื้นที่ให้กับรูปภาพได้
วิธีนี้ช่วยให้มั่นใจได้ว่าเนื้อหาใต้รูปภาพจะไม่ขยับเมื่อโหลดรูปภาพแล้ว
อย่างไรก็ตาม การระบุขนาดของรูปภาพใน HTML อาจเป็นเรื่องยาก หากคุณใช้รูปภาพที่ตอบสนองตามอุปกรณ์ เนื่องจากไม่มีทางทราบความกว้างและความสูงจนกว่าคุณจะรู้ขนาดวิวพอร์ต ลองใช้ไลบรารีสัดส่วนภาพ CSS หรือกล่องสัดส่วนภาพเพื่อช่วยรักษาสัดส่วนภาพสำหรับรูปภาพที่ตอบสนองตามอุปกรณ์
สุดท้าย ลองดูโพสต์แสดงรูปภาพที่มีขนาดถูกต้อง เพื่อดูวิธีแสดงรูปภาพที่มีขนาดเหมาะสมสำหรับอุปกรณ์ของผู้ใช้แต่ละคน