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