CSS image-set: התמונה האידיאלית עם fallback לפורמטים ישנים

הפונקציה 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 האחרון ברשימה.

שאלות נפוצות

שאלות נפוצות על image-set() ב-CSS:

סיכום

הפונקציה CSS image-set היא כלי חשוב בפיתוח אתרים מודרני. היא משפרת את ביצועי הטעינה, שומרת על תאימות בין דפדפנים, מתאימה את עצמה למסכי Retina ומפשטת משמעותית ניהול מספר פורמטים של תמונה במקביל.

בין אם אתם משתמשים ב־AVIF, ב־WebP או בפורמטים מסורתיים יותר, image-set מאפשרת לדפדפן לבחור אוטומטית את האפשרות המתאימה ביותר, וליצור חוויית גלישה מהירה, יציבה ואמינה.