הצגת תמונות דקורטיביות שעברו אופטימיזציה

הצגת תמונות דקורטיביות שעברו אופטימיזציה באמצעות CSS משפרת את הביצועים הנתפסים בלי לפגוע באיכות החזותית. באמצעות הפונקציה image-set() ב-CSS, אתם יכולים לספק לדפדפן כמה אפשרויות לתמונת רקע או לתמונת מסכה אחת. אתם יכולים לציין פורמטים מודרניים (כמו AVIF או WebP) לצד רזולוציות שונות (כמו 1x ו-2x). הדפדפן יבחר באופן דינמי את התמונה התואמת הקטנה ביותר שמספקת את צפיפות הפיקסלים המתאימה למכשיר של המשתמש.

זהירות: אם סביר להניח שהתמונה היא רכיב ה-LCP (למשל, באנר ראשי גדול), חשוב לזכור שסורק הטעינה מראש של הדפדפן לא יכול לגלות תמונות שמופנות ב-CSS דרך image-set()‎. זה עלול לעכב באופן משמעותי את טעינת התמונות ולפגוע ב-LCP. במקום זאת, כדאי להשתמש בתג HTML רגיל מסוג <img> או <picture>, או לחלופין, לטעון מראש את התמונה באמצעות האפשרות <link rel=preload> עם המאפיין media.

הטמעה

הפונקציה image-set() משמשת בכל מקום שבו CSS מצפה לערך <image>, בדרך כלל ב-background-image, ב-content או ב-mask-image. שימו לב: כדי לקבל את התוצאות הכי טובות, מומלץ לציין גם את פורמט התמונה באמצעות type() וגם את הרזולוציה (למשל 1x או 2x), אבל שני הארגומנטים האלה הם אופציונליים.

.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
  );
}