วิธีปรับแต่งรูปภาพสำหรับเว็บไซต์

ขั้นตอน

1. 1

   1. ให้บริการในขนาดที่ถูกต้อง

   วัดความกว้าง CSS ที่ใหญ่ที่สุดที่รูปภาพครอบครองและส่งออกที่ประมาณสองเท่าสำหรับจอแสดงผลที่มีความหนาแน่นสูง รูปภาพฮีโร่ขนาด 1200 พิกเซล CSS ต้องการแหล่งที่มา 2400px ไม่ใช่ต้นฉบับจากกล้อง 6000px ขั้นตอนนี้เพียงขั้นตอนเดียวมักจะดีกว่าทุกอย่างรวมกัน

2. 2

   2. ใช้ WebP และ AVIF หากทำได้

   WebP มีขนาดเล็กกว่า JPEG 25–35% ที่คุณภาพเท่ากันและรองรับทุกที่ AVIF ไปได้ไกลกว่านั้นอีกแต่เข้ารหัสช้ากว่า เก็บ JPEG สำรองไว้หากคุณต้องการรองรับไคลเอนต์ที่เก่ามาก

3. 3

   3. ตั้งค่าคุณภาพตามเนื้อหา ไม่ใช่ตามนิสัย

   75–85 สำหรับภาพถ่าย สูงกว่าสำหรับกราฟิกที่มีขอบคม ซึ่งสิ่งประดิษฐ์จากการบีบอัดจะมองเห็นได้ชัดเจนกว่า ตรวจสอบผลลัพธ์ที่ขนาดการแสดงผลจริง

4. 4

   4. ตั้งค่าความกว้างและความสูงเสมอ

   ขนาดที่ชัดเจนช่วยให้เบราว์เซอร์สำรองพื้นที่ก่อนที่รูปภาพจะโหลด ซึ่งช่วยป้องกันการเลื่อนของเลย์เอาต์ นี่คือการแก้ไข Cumulative Layout Shift ที่ไม่มีค่าใช้จ่าย

5. 5

   5. โหลดแบบ Lazy-load ใต้ส่วนที่มองเห็นได้เท่านั้น ห้ามโหลดเหนือส่วนที่มองเห็นได้

   เพิ่ม loading="lazy" ให้กับรูปภาพที่อยู่ด้านล่างของหน้า อย่าใช้ lazy-load กับรูปภาพ LCP ของคุณ เพราะจะทำให้สิ่งที่กำลังวัดผลล่าช้า