เราทุกคนเคยประสบปัญหาเดียวกันนี้ นั่นคือคุณลืมลดขนาดรูปภาพก่อนที่จะเพิ่มลงในหน้าเว็บ รูปภาพดูดี แต่ทำให้ผู้ใช้เสียอินเทอร์เน็ตและส่งผลเสียต่อประสิทธิภาพของหน้าเว็บ
ระบุรูปภาพที่มีขนาดไม่ถูกต้อง
Lighthouse ช่วยให้ระบุรูปภาพที่มีขนาดไม่ถูกต้องได้ง่าย เรียกใช้การตรวจสอบประสิทธิภาพ (Lighthouse > ตัวเลือก > ประสิทธิภาพ) และดูผลลัพธ์ของการตรวจสอบปรับขนาดรูปภาพอย่างเหมาะสม การตรวจสอบจะแสดงรูปภาพที่ต้องปรับขนาด
กำหนดขนาดรูปภาพที่ถูกต้อง
การปรับขนาดรูปภาพอาจมีความซับซ้อนอย่างไม่น่าเชื่อ ด้วยเหตุนี้ เราจึงมี 2 แนวทางให้เลือก ได้แก่ "ดี" และ "ดีกว่า" ทั้ง 2 วิธีจะช่วยปรับปรุงประสิทธิภาพ แต่แนวทาง "ที่ดีกว่า" อาจใช้เวลาทำความเข้าใจและนำไปใช้นานกว่าเล็กน้อย แต่ก็จะให้ผลตอบแทนเป็นการปรับปรุงประสิทธิภาพที่มากขึ้นด้วย ตัวเลือกที่ดีที่สุดสำหรับคุณคือตัวเลือกที่คุณรู้สึกว่านำไปใช้ได้สะดวก
หมายเหตุสั้นๆ เกี่ยวกับหน่วย CSS
หน่วย CSS สำหรับระบุขนาดขององค์ประกอบ HTML รวมถึงรูปภาพมี 2 ประเภท ได้แก่
- หน่วยสัมบูรณ์: องค์ประกอบที่จัดรูปแบบโดยใช้หน่วยสัมบูรณ์จะแสดงในขนาดเดียวกันเสมอ ไม่ว่าจะใช้อุปกรณ์ใดก็ตาม ตัวอย่างหน่วย CSS แบบสัมบูรณ์ที่ถูกต้อง ได้แก่ px, cm, mm, in
- หน่วยสัมพัทธ์: องค์ประกอบที่จัดรูปแบบโดยใช้หน่วยสัมพัทธ์จะแสดงในขนาดที่แตกต่างกัน โดยขึ้นอยู่กับความยาวสัมพัทธ์ที่ระบุ ตัวอย่างหน่วย CSS สัมพัทธ์ที่ถูกต้อง ได้แก่ %, vw (1vw = 1% ของความกว้างของวิวพอร์ต), em (1.5 em = 1.5 เท่าของขนาดแบบอักษร)
แนวทาง "ดี"
สำหรับรูปภาพที่มีการปรับขนาดตาม…
- หน่วยสัมพัทธ์: ปรับขนาดรูปภาพให้เป็นขนาดที่ใช้ได้ในอุปกรณ์ทั้งหมด
คุณอาจพบว่าการตรวจสอบข้อมูลวิเคราะห์ (เช่น Google Analytics) เพื่อดูขนาดการแสดงผลที่ผู้ใช้ใช้กันโดยทั่วไปนั้นมีประโยชน์ หรือจะดูข้อมูลเกี่ยวกับจอแสดงผลของอุปกรณ์ที่ใช้กันทั่วไปหลายรุ่นได้ที่ screensiz.es - หน่วยสัมบูรณ์: ปรับขนาดรูปภาพให้ตรงกับขนาดที่แสดง
คุณสามารถใช้แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บเพื่อระบุขนาดของรูปภาพที่แสดงได้
แนวทาง "ที่ดีกว่า"
สำหรับรูปภาพที่มีทั้งการปรับขนาดแบบสัมบูรณ์และแบบสัมพัทธ์ ให้ใช้แอตทริบิวต์ srcset และ sizes เพื่อแสดงรูปภาพที่แตกต่างกันสำหรับความหนาแน่นของการแสดงผลที่แตกต่างกัน
อ่านคู่มือเกี่ยวกับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
"ความหนาแน่นของจอแสดงผล" หมายถึงความจริงที่ว่าจอแสดงผลที่แตกต่างกันมีความหนาแน่นของพิกเซลที่แตกต่างกัน เมื่อปัจจัยอื่นๆ เท่ากันหมด จอแสดงผลที่มีความหนาแน่นของพิกเซลสูงจะดูคมชัดกว่าจอแสดงผลที่มีความหนาแน่นของพิกเซลต่ำ
ด้วยเหตุนี้ คุณจึงต้องมีรูปภาพหลายเวอร์ชันหากต้องการให้ผู้ใช้เห็นรูปภาพที่คมชัดที่สุด ไม่ว่าอุปกรณ์ของผู้ใช้จะมีความหนาแน่นของพิกเซลเท่าใดก็ตาม
เทคนิคการใช้รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ช่วยให้คุณแสดงรูปภาพได้หลายเวอร์ชัน และให้อุปกรณ์เลือกรูปภาพที่เหมาะกับอุปกรณ์มากที่สุด
รูปภาพที่ใช้ได้กับอุปกรณ์ทุกประเภทจะมีขนาดใหญ่เกินความจำเป็นสำหรับอุปกรณ์ขนาดเล็ก เทคนิคการปรับเปลี่ยนรูปภาพตามอุปกรณ์ โดยเฉพาะ srcset และ sizes ช่วยให้คุณระบุรูปภาพได้หลายเวอร์ชันและให้อุปกรณ์เลือกขนาดที่เหมาะสมที่สุดได้
ปรับขนาดรูปภาพ
ไม่ว่าจะเลือกใช้วิธีใด คุณอาจพบว่าการใช้ ImageMagick เพื่อปรับขนาดรูปภาพนั้นมีประโยชน์ ImageMagick เป็นเครื่องมือบรรทัดคำสั่งที่ได้รับความนิยมมากที่สุดสำหรับการสร้างและแก้ไขรูปภาพ คนส่วนใหญ่สามารถปรับขนาดรูปภาพได้เร็วขึ้นมากเมื่อใช้ CLI แทนโปรแกรมแก้ไขรูปภาพที่ใช้ GUI
ปรับขนาดรูปภาพเป็น 25% ของขนาดต้นฉบับ:
convert flower.jpg -resize 25% flower_small.jpg
ปรับขนาดรูปภาพให้พอดีกับ "กว้าง 200 พิกเซล สูง 100 พิกเซล":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
หากคุณจะปรับขนาดรูปภาพจำนวนมาก คุณอาจพบว่าการใช้สคริปต์หรือบริการเพื่อทำให้กระบวนการเป็นแบบอัตโนมัติจะสะดวกกว่า ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในคู่มือรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
หลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์โดยการระบุมิติข้อมูล
แม้ว่าคู่มือนี้จะกล่าวถึงขนาดรูปภาพในบริบทของการลดจำนวนไบต์ที่ไม่จำเป็นที่ดาวน์โหลด แต่สิ่งสำคัญที่ควรทราบคือการสำรองพื้นที่ที่ถูกต้องสำหรับรูปภาพในเลย์เอาต์เป็นอีกองค์ประกอบสำคัญในการลดเมตริก Cumulative Layout Shift ของหน้าเว็บ เมื่อแสดงรูปภาพใน HTML อย่าลืมใช้แอตทริบิวต์ width และ height ที่เหมาะสมเพื่อให้เบราว์เซอร์ทราบว่าควรจัดสรรพื้นที่ในเลย์เอาต์สำหรับรูปภาพเท่าใด
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
หากไม่มีแอตทริบิวต์เหล่านี้หรือการปรับขนาด CSS ที่เทียบเท่า เบราว์เซอร์จะไม่ทราบว่ารูปภาพจะใช้พื้นที่เท่าใดจนกว่าจะโหลดเสร็จ ซึ่งจะทำให้เลย์เอาต์ในเอกสารเปลี่ยนไป ซึ่งอาจสร้างความรำคาญให้แก่ผู้ใช้เมื่อเนื้อหาเคลื่อนที่หลังจากที่เริ่มอ่านแล้ว ซึ่งอาจส่งผลให้ผู้ใช้สูญเสียตำแหน่งที่กำลังอ่านอยู่ หรือ "พลาด" เป้าหมายการแตะที่ต้องการ และไปคลิกสิ่งอื่นที่ไม่ได้ตั้งใจในระหว่างการโหลดหน้าเว็บ
อีกวิธีหนึ่งในการระบุความกว้างและความสูงอย่างชัดเจนคือการใช้พร็อพเพอร์ตี้ aspect-ratio ของ CSS ในรูปภาพ ซึ่งส่งผลต่อขนาดขององค์ประกอบในลักษณะเดียวกับแอตทริบิวต์ width และ height ในแง่ที่ว่าคอนเทนเนอร์จะรักษาสัดส่วนภาพให้สอดคล้องกัน อย่างไรก็ตาม ความแตกต่างคือการดำเนินการนี้อาจส่งผลให้มีการใช้สัดส่วนภาพที่แตกต่างจากรูปภาพที่ระบุไว้ ดังนั้นคุณจึงควรใช้การตั้งค่า object-fit เพื่อให้แน่ใจว่ารูปภาพจะไม่บิดเบี้ยวในมุมมอง 16/9 ที่ชัดเจนนี้
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
ยืนยัน
เมื่อปรับขนาดรูปภาพทั้งหมดแล้ว ให้เรียกใช้ Lighthouse อีกครั้งเพื่อยืนยันว่าคุณไม่ได้พลาดอะไรไป