שימוש בתמונות שעברו אופטימיזציה לרזולוציה ברכיבי פסאודו של CSS (כמו ::before או ::after) מאפשר להוסיף סמלים דקורטיביים או גרפיקה מבנית בלי להעמיס על ה-HTML צומתי DOM נוספים. כשמשלבים רכיבי פסאודו עם הפונקציה image-set() ב-CSS, אפשר לספק לדפדפן כמה פורמטים (כמו AVIF או WebP) ורזולוציות (כמו 1x ו-2x). הדפדפן יבחר באופן אוטומטי את התמונה הכי אופטימלית ליכולות של המכשיר של המשתמש.
הטמעה
אפשר להשתמש בפונקציה image-set() ישירות בתוך המאפיין content של רכיב מדומה, או בתוך המאפיין background-image שלו (תוך הגדרת content: ""). שימו לב: כדי לקבל את התוצאות הטובות ביותר, צריך לציין גם את פורמט התמונה באמצעות type() וגם את הרזולוציה (כמו 1x או 2x), אבל שני הארגומנטים האלה הם אופציונליים.
.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
);
}