แสดงรูปภาพที่มีสัดส่วนภาพไม่ถูกต้อง
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
หากรูปภาพที่แสดงมีสัดส่วนภาพต่างออกไปอย่างมากกับสัดส่วนภาพในไฟล์ต้นฉบับ (สัดส่วนภาพธรรมชาติ) รูปภาพที่แสดงอาจดูบิดเบี้ยวและอาจทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่น่าพึงพอใจ
วิธีที่การตรวจสอบสัดส่วนภาพของ 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 หรือกล่องสัดส่วนภาพเพื่อช่วยรักษาสัดส่วนภาพสำหรับรูปภาพที่ตอบสนองตามอุปกรณ์
สุดท้าย ลองดูโพสต์แสดงรูปภาพที่มีขนาดถูกต้อง
เพื่อดูวิธีแสดงรูปภาพที่มีขนาดเหมาะสมสำหรับอุปกรณ์ของผู้ใช้แต่ละคน
แหล่งข้อมูล
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2019-05-02 UTC
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"ไม่มีข้อมูลที่ฉันต้องการ"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"ล้าสมัย"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ปัญหาเกี่ยวกับการแปล"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"อื่นๆ"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"เข้าใจง่าย"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"แก้ปัญหาของฉันได้"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"อื่นๆ"
}]
{"lastModified": "\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2019-05-02 UTC"}
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2019-05-02 UTC"],[],[]]