เราทุกคนเคยเจอเหตุการณ์ที่ลืมลดขนาดรูปภาพก่อนเพิ่มลงในหน้าเว็บ รูปภาพอาจดูดี แต่กำลังสิ้นเปลืองข้อมูลของผู้ใช้และส่งผลเสียต่อประสิทธิภาพของหน้าเว็บ
ระบุรูปภาพที่มีขนาดไม่ถูกต้อง
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 ที่เทียบเท่า เบราว์เซอร์จะไม่ทราบว่ารูปภาพจะใช้พื้นที่เท่าใดจนกว่าจะโหลดเสร็จ ซึ่งจะทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ในเอกสาร ซึ่งอาจทำให้ผู้ใช้ไม่พอใจเมื่อเนื้อหาย้ายไปหลังจากที่ผู้ใช้เริ่มดูเนื้อหาแล้ว เหตุการณ์นี้อาจทำให้ผู้ใช้ลืมตำแหน่งที่อ่านอยู่ หรือ "พลาด" เป้าหมายที่ต้องการคลิกและลงเอยด้วยการคลิกสิ่งอื่นที่ไม่ต้องการระหว่างการโหลดหน้าเว็บ
อีกทางเลือกหนึ่งนอกเหนือจากการระบุความกว้างและความสูงอย่างชัดเจนคือการใช้พร็อพเพอร์ตี้ CSS aspect-ratio property กับรูปภาพ ซึ่งมีผลคล้ายกับขนาดขององค์ประกอบที่แอตทริบิวต์ width และ height มีในแง่ที่ว่าคอนเทนเนอร์จะรักษาสัดส่วนภาพที่สอดคล้องกัน อย่างไรก็ตาม ความแตกต่างคือวิธีนี้อาจส่งผลให้มีการใช้สัดส่วนภาพที่แตกต่างจากสัดส่วนภาพที่รูปภาพมี ดังนั้นคุณจึงน่าจะใช้การตั้งค่า object-fit เพื่อให้รูปภาพไม่บิดเบี้ยวในมุมมอง 16/9 ที่ชัดเจนนี้
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
ยืนยัน
เมื่อปรับขนาดรูปภาพทั้งหมดแล้ว ให้เรียกใช้ Lighthouse อีกครั้งเพื่อยืนยันว่าคุณไม่ได้พลาดสิ่งใดไป