การใช้รูปภาพที่เพิ่มประสิทธิภาพความละเอียดในองค์ประกอบเทียม CSS (เช่น ::before หรือ ::after) ช่วยให้คุณเพิ่มไอคอนตกแต่งหรือกราฟิกโครงสร้างได้โดยไม่ต้องทำให้ HTML รกด้วยโหนด DOM เพิ่มเติม การรวมองค์ประกอบจำลองเข้ากับฟังก์ชัน CSS image-set() ช่วยให้คุณระบุรูปแบบ (เช่น AVIF หรือ WebP) และความละเอียด (เช่น 1x และ 2x) หลายรายการให้เบราว์เซอร์ได้ เบราว์เซอร์จะเลือกรูปภาพที่เหมาะสมที่สุดสำหรับความสามารถของอุปกรณ์ของผู้ใช้โดยอัตโนมัติ
การใช้งาน
คุณสามารถใช้ฟังก์ชัน image-set() ได้โดยตรงภายในพร็อพเพอร์ตี้ content ขององค์ประกอบจำลอง หรือภายในพร็อพเพอร์ตี้ background-image (ขณะตั้งค่า content: "") โปรดทราบว่าแม้ว่าการระบุทั้งรูปแบบรูปภาพผ่าน type() และความละเอียด (เช่น 1x หรือ 2x) จะให้ผลลัพธ์ที่ดีที่สุด แต่อาร์กิวเมนต์ทั้ง 2 รายการนี้เป็นแบบไม่บังคับ
.icon-button::before {
/* Using image-set directly in the content property */
/* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG).
The browser will stop at the first supported format. */
content: image-set(
url("icon.avif") type("image/avif") 1x,
url("icon-2x.avif") type("image/avif") 2x,
url("icon.webp") type("image/webp") 1x,
url("icon-2x.webp") type("image/webp") 2x,
url("icon.png") type("image/png") 1x,
url("icon-2x.png") type("image/png") 2x
);
display: inline-block;
margin-right: 8px;
vertical-align: middle;
}
กลยุทธ์สำรอง
สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับฟังก์ชัน image-set() คุณต้องระบุการประกาศรูปภาพมาตรฐานก่อนกฎ image-set() กลยุทธ์การเพิ่มประสิทธิภาพแบบต่อเนื่องนี้อาศัยลักษณะการเรียงซ้อนของ CSS โดยระบบจะไม่สนใจกฎที่ไม่รองรับ
.icon-button::before {
/* MANDATORY: Fallback for browsers that do not support image-set() */
content: url("icon.png");
/* Modern browsers will apply this and override the fallback */
content: image-set(
url("icon.avif") type("image/avif") 1x,
url("icon-2x.avif") type("image/avif") 2x,
url("icon.png") type("image/png") 1x,
url("icon-2x.png") type("image/png") 2x
);
}