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

Katie Hempenius
Katie Hempenius

ข้อบกพร่องนี้เล็กพอที่จะตรวจสอบรูปภาพด้วยตนเองได้ อย่างไรก็ตาม สําหรับเว็บไซต์ส่วนใหญ่ การใช้เครื่องมืออย่าง Lighthouse เพื่อทำสิ่งต่างๆ นี้ให้ทำงานอัตโนมัติเป็นสิ่งจําเป็น

  1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ เต็มหน้าจอ
  2. กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
  3. คลิกแท็บ Lighthouse
  4. ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่แล้ว
  5. คลิกปุ่มสร้างรายงาน
  6. ดูผลลัพธ์ของการตรวจสอบรูปภาพที่มีขนาดเหมาะสม

การตรวจสอบรูปภาพที่มีการปรับขนาดอย่างเหมาะสมไม่ผ่านใน Lighthouse

การตรวจสอบ Lighthouse แสดงให้เห็นว่ารูปภาพทั้ง 2 รูปของหน้านี้ต้องปรับขนาด

แก้ไข flower_logo.png

เริ่มต้นที่ด้านบนของหน้าและแก้ไขรูปภาพโลโก้

  • ตรวจสอบ flower_logo.png ในแผงองค์ประกอบของ DevTools

แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บ

นี่คือ CSS ของ flower_logo.png:

.logo {
  width: 50px;
  height: 50px;
}

ความกว้าง CSS ของรูปภาพนี้คือ 50 พิกเซล คุณจึงควรปรับขนาด flower_logo.png ให้ตรงกัน คุณสามารถใช้ ImageMagick เพื่อปรับขนาดรูปภาพให้พอดี ImageMagick เป็นเครื่องมือ CLI สำหรับการแก้ไขรูปภาพที่ได้รับการติดตั้งล่วงหน้าในสภาพแวดล้อม Codelab

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
  2. คลิก Terminal (หมายเหตุ: หากปุ่ม Terminal ไม่แสดง คุณอาจต้องใช้ตัวเลือก "เต็มหน้าจอ")
  3. ในคอนโซล ให้พิมพ์ข้อมูลต่อไปนี้
convert flower_logo.png -resize 50x50 flower_logo.png

แก้ไข flower_photo.jpg

ต่อไปให้แก้ไขรูปภาพดอกไม้สีม่วง

  • ตรวจสอบ flower_photo.jpg ในแผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บ

แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บ

นี่คือ CSS ของ flower_photo.jpg:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw กำหนดความกว้าง CSS ของ flower_photo.jpg เป็น "ครึ่งความกว้างของเบราว์เซอร์" (1vw เท่ากับ 1% ของความกว้างของเบราว์เซอร์)

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

Google Analytics เกี่ยวกับความละเอียดของหน้าจอ

ข้อมูลนี้ระบุว่าผู้เข้าชมเว็บไซต์นี้มากกว่า 95% ใช้ความละเอียดหน้าจอกว้าง 1,920 พิกเซลหรือน้อยกว่า

เราสามารถใช้ข้อมูลนี้เพื่อคำนวณว่ารูปภาพควรมีความกว้างเท่าใด: (กว้าง 1920 พิกเซล) * (50% ของความกว้างเบราว์เซอร์) = 960 พิกเซล

สำหรับความละเอียดที่กว้างมากกว่า 1, 920 พิกเซล รูปภาพจะถูกยืดออกเพื่อให้ครอบคลุมพื้นที่ดังกล่าว รูปภาพที่ปรับขนาดยังคงมีขนาดใหญ่พอสมควร ผลที่ได้จึงไม่เห็นได้ชัดเจนมากนัก

  • ใช้ ImageMagick เพื่อปรับขนาดรูปภาพเป็นกว้าง 960 พิกเซล ในเทอร์มินัล ให้พิมพ์
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

เรียกใช้ Lighthouse อีกครั้ง

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

ตรวจสอบอิมเมจที่มีขนาดเหมาะสมของ Lighthouse

... แต่ล้มเหลว ทำไมจึงเป็นเช่นนั้น

Lighthouse ทำการทดสอบใน Nexus 5x Nexus 5x มีหน้าจอขนาด 1080 x 1920 สำหรับ Nexus 5x ขนาดที่เหมาะสมที่สุดของ flower_photo.jpg คือ 540 พิกเซลกว้าง (1080 พิกเซล * 5). ซึ่งเล็กกว่ารูปภาพที่ปรับขนาดแล้วของเรามาก

คุณควรปรับขนาดรูปภาพให้เล็กลงอีกไหม อาจจะ อย่างไรก็ตาม คำตอบของคำถามนี้อาจไม่ชัดเจนเสมอไป

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

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