ส่งรูปภาพที่เหมาะสมให้กับหน้าจอที่เหมาะสมด้วย srcset และ sizes, สงวน picture ไว้สำหรับการกำกับศิลป์ และเชี่ยวชาญการโหลดแบบขี้เกียจ
เปิดบทเรียนนี้ใน Kodokonรูปภาพมักคิดเป็นครึ่งหนึ่งของน้ำหนักหน้าเว็บ: มันเป็นคานงัดด้านประสิทธิภาพอันดับแรกของคุณ กลไกหลักคือ srcset พร้อมตัวบอกขนาด w ซึ่งประกาศความกว้างจริงของไฟล์ที่มีอยู่ จับคู่กับ sizes ซึ่งประกาศความกว้างการแสดงผลที่ตั้งใจไว้ จุดสำคัญ: เบราว์เซอร์เลือกรูปภาพผ่านpreload scanner ก่อนที่มันจะคำนวณเลย์เอาต์ CSS ด้วยซ้ำ หากไม่มี sizes มันจะสันนิษฐานว่าเป็น 100vw และมักดาวน์โหลดมากเกินความจำเป็น การเลือกสุดท้ายยังคำนึงถึงความหนาแน่นของหน้าจอด้วย: หน้าจอ 2x บนพื้นที่ 400 px จะดึงไฟล์ขนาดราว 800 px
<img src="harbor-800.jpg"
srcset="harbor-400.jpg 400w,
harbor-800.jpg 800w,
harbor-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Old harbor at sunset"
width="800" height="533">ด้วย srcset/sizes เบราว์เซอร์ยังคงเป็นผู้ควบคุม: มันอาจส่งตัวเลือกที่เบากว่าตามความหนาแน่นหรือการตั้งค่าประหยัดข้อมูล ส่วน <picture> พลิกตรรกะ: คุณเป็นผู้กำหนดแหล่งที่มาผ่าน <source media> หรือ <source type> สงวนมันไว้สองกรณี: การกำกับศิลป์ (ครอปต่างกันบนมือถือ ไม่ใช่แค่ขนาด) และการเจรจารูปแบบ (AVIF หรือ WebP พร้อมทางสำรองเป็น JPEG) สำหรับการปรับขนาดง่าย ๆ picture เป็นความซับซ้อนที่ไม่จำเป็น
<picture>
<source media="(max-width: 600px)"
srcset="hero-square.jpg">
<source type="image/avif"
srcset="hero-wide.avif">
<img src="hero-wide.jpg" alt="Museum facade"
width="1200" height="600">
</picture>สำหรับทุกอย่างที่เหลือบนหน้า loading="lazy" จะเลื่อนการดาวน์โหลดออกไปจนกว่ารูปภาพจะเข้าใกล้ viewport แบบเนทีฟและไม่ต้องใช้ JavaScript จับคู่มันกับ decoding="async" เพื่อให้การถอดรหัสไม่บล็อกการเรนเดอร์ และเหนือสิ่งอื่นใดกับ width และ height: เบราว์เซอร์คำนวณอัตราส่วนภาพและจองพื้นที่ไว้ ซึ่งกำจัดการเลื่อนเลย์เอาต์ (CLS) สำหรับรูปภาพวิกฤต ให้ทำตรงข้ามกับ lazy: fetchpriority="high"
<img src="gallery-01.jpg"
alt="Exhibition hall"
loading="lazy" decoding="async"
width="800" height="600">