הפונקציה image-set ב CSS מאפשרת להגדיר מספר גרסאות של אותה תמונה כך שהדפדפן יוכל לבחור את הגרסה האופטימלית ביותר באופן אוטומטי, כך שניתן יהיה לקבל ביצועים טובים יותר כמו גם לשמור על תאימות למכשירים ישנים.
כשמדובר על פיתוח אתרים השימוש ב image-set הוא אחד הדרכים הטובות ביותר להגיש פורמטים מתקדמים כמו AVIF ו־WebP עם מנגנון fallback שאפשר לסמוך עליו.
מהי התכונה image-set ומדוע היא חשובה
הפונקציה image-set() עובדת בצורה דומה ל־srcset ב־HTML. אתם מגדירים מספר מקורות לתמונה, והדפדפן בוחר את ההתאמה הטובה ביותר לפי תמיכה בפורמט, צפיפות פיקסלים במכשיר ושיקולי ביצועים.
תכונה זו שימושית במיוחד כשעובדים עם פורמט תמונות מודרני כזה או אחר.
AVIF ו־WebP מאפשרים קבצים קטנים משמעותית בהשוואה ל־JPG או PNG, אבל לא כל הדפדפנים תומכים בהם. הפונקציה image-set מטפלת בזה בצורה אלגנטית, ללא צורך ב־JavaScript או בזיהוי ברמת user-agent.
האפשרות לטעון פורמט תמונה מודרני הוא אידיאלי לשיפור ה Core Web Vitals, במיוחד עבור תמונות רקע (background-image) בהן אין תמיכה ב־srcset.
שימוש בסיסי ב image-set
המימוש הפשוט ביותר מספק את אותה תמונה במספר פורמטים. הדפדפן בוחר את הפורמט הראשון בו הוא תומך:
background-image: image-set(
url("../img/hero.avif") type("image/avif"),
url("../img/hero.webp") type("image/webp"),
url("../img/hero.jpg") type("image/jpeg")
);באופן זה אתם מבטיחים שהפורמט AVIF יהיה בשימוש כשהוא נתמך, WebP ישמש כשאין תמיכה ב־AVIF, ו־JPEG ישמש כעתודה (fallback) בטוחה לכל הדפדפנים.
שימוש ב־image-set למסכי Retina ולמסכים בצפיפות גבוהה
ניתן להגדיר גם גרסאות באיכויות שונות באמצעות התחביר 1x, 2x או 3x. באופן זה ניתן לקבוע כי מסכים ברזולוציה גבוהה יקבלו תמונה חדה יותר, בלי לגרום או בעצם להכריח את כל המשתמשים להוריד תמונות רטינה הכבדים יותר מפאת הרזולוציה.
background-image: image-set(
url("../img/banner@1x.webp") type("image/webp") 1x,
url("../img/banner@2x.webp") type("image/webp") 2x
);שימוש בקוד זה יגרום לדפדפן לבחור אוטומטית את הגרסה המתאימה בהתאם לצפיפות הפיקסלים של המכשיר.
מתי כדאי להשתמש ב־image-set?
הפונקציה image-set חזקה במיוחד בתרחישים שונים שמשפיעים על תאימות, ביצועים ועיצוב רספונסיבי.
1. כשצריך fallback לפורמטים שונים
זהו תרחיש השימוש הנפוץ ביותר. ברוב המקרים תרצו להגיש AVIF או WebP כשאפשר, אבל עדיין לתמוך בדפדפנים כמו Safari ותיק או דפדפנים סלולריים ישנים.
שימוש ב־image-set מבטיח שהעיצוב שלכם לא יישבר רק בגלל שהדפדפן לא יודע להציג פורמט תמונה מודרני.
background-image: image-set(
url("../img/card.avif") type("image/avif"),
url("../img/card.webp") type("image/webp"),
url("../img/card.png") type("image/png")
);2. כשצריך איכות גבוהה יותר במסכי Retina
במכשירים ברזולוציה גבוהה, תמונת רקע קטנה מדי תיראה מטושטשת. עם כמה ערכי צפיפות (1x, 2x, 3x), image-set מגישה תמונות חדות רק כשאלו נחוצות, בלי להעמיס על כל המשתמשים.
3. כשמשתמשים ב background-image ב CSS במקום בתגית IMG
המאפיין srcset ב־HTML לא עוזר כאשר התמונה היא דקורטיבית בלבד ומוגדרת דרך CSS. לכן image-set קריטית במיוחד עבור:
- Hero Sections עם תמונות רקע ב־CSS
- מפרידי סקשנים (section dividers)
- רקעי כרטיסים (card backgrounds)
- סליידרים המשתמשים בתמונות באמצעות CSS
4. כשמטרתכם היא ציון מהירות דף טוב יותר
פורמטים מודרניים כמו AVIF מקטינים משמעותית את גודל הקובץ, דבר המוביל ל LCP טוב יותר, צריכת רוחב פס נמוכה יותר וזמן רינדור מהיר יותר בעיני המשתמש. שימוש ב־image-set מאפשר להגיש את המשאב הנכון, בלי לוגיקה נוספת בצד השרת או בצד הלקוח.
דוגמה מעשית: Hero Background עם תמיכה מלאה ב־fallback
בדוגמה הזו משתמשים ב־AVIF, ב־WebP וב־JPG כ־fallback, יחד עם גרסאות שונות לרזולוציות שונות.
.hero {
background-image: image-set(
url("../img/hero-large.avif") type("image/avif") 2x,
url("../img/hero-large.webp") type("image/webp") 2x,
url("../img/hero.avif") type("image/avif") 1x,
url("../img/hero.webp") type("image/webp") 1x,
url("../img/hero.jpg") type("image/jpeg")
);
background-size: cover;
background-position: center;
}כך אתם מקבלים שילוב מקסימלי של תאימות וביצועים בכל גדלי המסך.
תמיכת דפדפנים
הפונקציה image-set() נתמכת בכל הדפדפנים המובילים.
דפדפנים ישנים יותר פשוט יתעלמו מהתחביר של image-set וישתמשו בפורמט ה־fallback האחרון ברשימה.
סיכום
הפונקציה CSS image-set היא כלי חשוב בפיתוח אתרים מודרני. היא משפרת את ביצועי הטעינה, שומרת על תאימות בין דפדפנים, מתאימה את עצמה למסכי Retina ומפשטת משמעותית ניהול מספר פורמטים של תמונה במקביל.
בין אם אתם משתמשים ב־AVIF, ב־WebP או בפורמטים מסורתיים יותר, image-set מאפשרת לדפדפן לבחור אוטומטית את האפשרות המתאימה ביותר, וליצור חוויית גלישה מהירה, יציבה ואמינה.
