เราทุกคนเคยเห็นกันไปแล้ว คุณลืมลดขนาดรูปภาพก่อนที่จะเพิ่มรูปภาพ รูปภาพดูดี แต่ทำให้ผู้ใช้สิ้นเปลือง และหน้าเว็บที่ได้รับผลกระทบ ด้านประสิทธิภาพ
ระบุภาพที่มีขนาดไม่ถูกต้อง
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 พิกเซล สูง 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 อีกครั้งเพื่อยืนยันว่าคุณไม่ได้ ขาดอะไรไป