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

Katie Hempenius

หากต้องการติดตาม Codelab นี้ ให้เปิดกลิทช์นี้ในแท็บที่ 2

เรียกใช้ Lighthouse

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

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

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

แก้ไขflower_logo.png

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

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

นี่คือ CSS สำหรับ flower_logo.png:

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

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

1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
2. คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดงขึ้น คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
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% ของความกว้างของเบราว์เซอร์)

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

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

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

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

• ใช้ ImageMagick เพื่อปรับขนาดรูปภาพให้มีความกว้าง 960 พิกเซล ในประเภทเทอร์มินัล:

# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

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

หมายเหตุ: 960x ไม่ใช่การพิมพ์ผิด ระบุความกว้าง ไม่ใช่ความสูง ความสูงของรูปภาพจะปรับขนาดตามสัดส่วนของความกว้าง นี่เป็นเคล็ดลับที่มีประโยชน์เมื่อคุณสนใจเฉพาะขนาดของรูปภาพในทิศทางเดียว

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

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

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

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

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

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

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