เรียกใช้ Lighthouse
ข้อบกพร่องนี้เล็กพอที่จะตรวจสอบรูปภาพด้วยตนเองได้ อย่างไรก็ตาม สําหรับเว็บไซต์ส่วนใหญ่ การใช้เครื่องมืออย่าง Lighthouse เพื่อทํางานนี้โดยอัตโนมัติเป็นสิ่งจําเป็น
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บ 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
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
- คลิก Terminal (หมายเหตุ: หากปุ่ม Terminal ไม่แสดง คุณอาจต้องใช้ตัวเลือก "เต็มหน้าจอ")
- ในคอนโซล ให้พิมพ์ข้อมูลต่อไปนี้
convert flower_logo.png -resize 50x50 flower_logo.png
แก้ไข flower_photo.jpg
ต่อไปให้แก้ไขรูปภาพดอกไม้สีม่วง
- ตรวจสอบ
flower_photo.jpg
ในแผงองค์ประกอบของ DevTools
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
เรียกใช้ Lighthouse อีกครั้ง
- เรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse อีกครั้งเพื่อยืนยันว่าคุณปรับขนาดรูปภาพเรียบร้อยแล้ว
… และดำเนินการไม่สำเร็จ ทำไมจึงเป็นเช่นนั้น
Lighthouse จะทำการทดสอบใน Nexus 5x Nexus 5x มีหน้าจอขนาด 1080 x 1920
สำหรับ Nexus 5x ขนาดที่เหมาะสมที่สุดของ flower_photo.jpg
คือ 540 พิกเซลกว้าง (1080 พิกเซล * 5). ซึ่งเล็กกว่ารูปภาพที่ปรับขนาดแล้วของเรามาก
คุณควรปรับขนาดรูปภาพให้เล็กลงอีกไหม อาจจะ อย่างไรก็ตาม คำตอบของคำถามนี้อาจไม่ชัดเจนเสมอไป
ตัวเลือกนี้เป็นการแลกเปลี่ยนระหว่างคุณภาพรูปภาพในอุปกรณ์ความละเอียดสูงกับประสิทธิภาพ คุณอาจประเมินความใกล้ชิดที่ผู้ใช้จะตรวจสอบรูปภาพสูงเกินไป จึงควรทำให้รูปภาพมีขนาดเล็กลง แต่ก็มีบางกรณีซึ่งคุณภาพรูปภาพสำคัญกว่า
ข่าวดีคือคุณสามารถหลีกเลี่ยงข้อเสียนี้ได้โดยการใช้รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์เพื่อแสดงรูปภาพหลายขนาด ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในคู่มือรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา