แสดงรูปภาพตกแต่งที่เพิ่มประสิทธิภาพแล้ว

การแสดงรูปภาพตกแต่งที่เพิ่มประสิทธิภาพผ่าน CSS จะช่วยปรับปรุงประสิทธิภาพที่รับรู้ได้โดยไม่ลดคุณภาพของภาพ เมื่อใช้ฟังก์ชัน image-set() CSS คุณจะระบุตัวเลือกหลายรายการสําหรับพื้นหลังหรือรูปภาพมาสก์เดียวให้เบราว์เซอร์ได้ คุณสามารถระบุรูปแบบสมัยใหม่ (เช่น AVIF หรือ WebP) ควบคู่ไปกับความละเอียดต่างๆ (เช่น 1x และ 2x) เบราว์เซอร์จะเลือกรูปภาพที่เข้ากันได้ซึ่งมีขนาดเล็กที่สุดและมีความหนาแน่นพิกเซลที่เหมาะสมสำหรับอุปกรณ์ของผู้ใช้โดยอัตโนมัติ

ข้อควรระวัง: หากรูปภาพมีแนวโน้มที่จะเป็นองค์ประกอบ Largest Contentful Paint (LCP) (เช่น แบนเนอร์หลักขนาดใหญ่) โปรดทราบว่าเครื่องมือสแกนการโหลดล่วงหน้าของเบราว์เซอร์จะค้นพบรูปภาพที่อ้างอิงใน CSS ผ่าน image-set() ไม่ได้ ซึ่งอาจทำให้การโหลดรูปภาพล่าช้าอย่างมากและส่งผลเสียต่อ LCP สำหรับองค์ประกอบที่เป็นไปได้ว่าเป็น LCP ให้พิจารณาใช้แท็ก <img> หรือ <picture> ของ HTML มาตรฐานแทน หรือจะโหลดรูปภาพล่วงหน้าโดยใช้ตัวเลือก <link rel=preload> ที่มีแอตทริบิวต์ media ก็ได้

การใช้งาน

ฟังก์ชัน image-set() จะใช้ในทุกที่ที่ CSS คาดหวังค่า <image> ซึ่งโดยทั่วไปจะอยู่ใน background-image, content หรือ mask-image โปรดทราบว่าแม้การระบุทั้งรูปแบบรูปภาพผ่าน type() และความละเอียด (เช่น 1x หรือ 2x) จะให้ผลลัพธ์ที่ดีที่สุด แต่อาร์กิวเมนต์ทั้ง 2 รายการนี้เป็นแบบไม่บังคับ

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

กลยุทธ์สำรอง

สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับฟังก์ชัน image-set() คุณต้องระบุการประกาศรูปภาพมาตรฐานก่อนกฎ image-set() กลยุทธ์การเพิ่มประสิทธิภาพแบบต่อเนื่องนี้อาศัยลักษณะการเรียงซ้อนของ CSS โดยระบบจะไม่สนใจกฎที่ไม่รองรับ

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}