טעינה מראש של תמונות רספונסיביות

Barry Pollard

Yoav Weiss

תאריך פרסום: 30 בספטמבר 2019, תאריך עדכון אחרון: 10 ביולי 2026

זהירות: חלק מההדגמות בדף הזה כבר לא פועלות, כי האירוח ב-Glitch הסתיים.

אפשר לטעון מראש תמונות רספונסיביות, וכך לאפשר לתמונות להיטען מהר יותר באופן משמעותי, כי הדפדפן יכול לזהות את התמונה הנכונה מתוך srcset לפני שהוא מעבד את התג img.

סקירה כללית של תמונות רספונסיביות

Browser Support

• 73
• 79
• 78
• 17.2

Source

נניח שאתם גולשים באינטרנט במסך ברוחב 300 פיקסלים, והדף מבקש תמונה ברוחב 1,500 פיקסלים. הדף הזה בזבז הרבה מחבילת הגלישה שלכם, כי המסך לא יכול לעשות שום דבר עם כל הרזולוציה הנוספת הזו. באופן אידיאלי, הדפדפן יאחזר גרסה של התמונה שהיא רק קצת רחבה יותר מגודל המסך, למשל 325 פיקסלים. כך אפשר להציג תמונה ברזולוציה גבוהה בלי לבזבז נתונים, והתמונה נטענת מהר יותר.

תמונות רספונסיביות מאפשרות לדפדפנים לאחזר משאבי תמונות שונים למכשירים שונים. אם אתם לא משתמשים ב-CDN לתמונות, שמרו כמה מידות לכל תמונה וציינו אותן במאפיין srcset. הערך w מציין לדפדפן את הרוחב של כל גרסה, כדי שהוא יוכל לבחור את הגרסה המתאימה לכל מכשיר:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

סקירה כללית על טעינה מראש

Browser Support

• 50
• 79
• 85
• 11.1

Source

טעינה מראש מאפשרת לכם להודיע לדפדפן על משאבים קריטיים שאתם רוצים לטעון בהקדם האפשרי, לפני שהם מתגלים ב-HTML. האפשרות הזו שימושית במיוחד למשאבים שלא קל לגלות, כמו גופנים שכלולים בגיליונות סגנונות, תמונות רקע או משאבים שנטענים מסקריפט.

<link rel="preload" as="image" href="important.png" fetchpriority="high">

חשוב: תמונות שנטענות מראש הן כנראה בעדיפות גבוהה, ולכן צריכות לכלול את המאפיין fetchpriority="high". אחרת, הטעינה מראש תקבל את העדיפות שמוגדרת כברירת מחדל למאפיין as. לתמונות, הערך הזה הוא low כברירת מחדל, כדי שהדפדפן יוכל לתת עדיפות לתוכן שחוסם רינדור על פני תמונות. פרטים נוספים זמינים במאמר אופטימיזציה של טעינת משאבים באמצעות Fetch Priority API.

imagesrcset וגם imagesizes

הרכיב <link> משתמש במאפיינים imagesrcset ו-imagesizes כדי לטעון מראש תמונות רספונסיביות. משתמשים בהם לצד <link rel="preload">, עם התחביר srcset ו-sizes שמשמש ברכיב <img>.

לדוגמה, אם רוצים לטעון מראש תמונה רספונסיבית שצוינה באמצעות:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

כדי לעשות את זה, צריך להוסיף את הקוד הבא ל-<head> של ה-HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

הפעולה הזו יוזמת בקשה באמצעות אותו היגיון לבחירת משאבים שבו משתמשים srcset ו-sizes.

אזהרה: יכול להיות שתמונות רספונסיביות לא יתמכו בטעינה מראש של כותרות HTTP, כי אזור התצוגה מוגדר רק כשהמסמך נוצר. זה גם אומר שאי אפשר להשתמש בהם לטעינה מראש מוקדמת ב-103 Early Hints.

דפדפנים מסוימים, כמו Chrome, מעבדים את הטעינות מראש עם המאפיינים האלה אחרי שהמסמך מוגדר ואחרי עיבוד החלק הראשון של ה-HTML. ההצעה הזו הוגשה לתקן HTML. עם זאת, עדיין יכול להיות סיכון אם אזור התצוגה יוגדר מחדש בהמשך המסמך (לדוגמה, רכיב <meta name="viewport"> מאוחר), כי יכול להיות שכבר התחילה הטעינה של התמונות הרספונסיביות הלא נכונות.

כדי למנוע בעיות, מומלץ להשתמש ברכיבי <link rel="preload" href="..."> לתמונות רספונסיביות במקום בכותרות תגובת HTTP מסוג Link: <...>; rel="preload".

תרחישים לדוגמה

הנה כמה תרחישים לדוגמה לטעינה מראש של תמונות רספונסיביות.

טעינה מראש של תמונות רספונסיביות שמוזרקות באופן דינמי

נניח שאתם טוענים באופן דינמי תמונות ראשיות כחלק ממצגת, ואתם יודעים איזו תמונה תוצג ראשונה. במקרה כזה, כנראה תרצו להציג את התמונה הזו כמה שיותר מהר, ולא לחכות שהסקריפט של המצגת יטען אותה.

אתם יכולים לבדוק את הבעיה הזו באתר עם גלריית תמונות שנטענת באופן דינמי:

1. פותחים את ההדגמה הזו של מצגת בכרטיסייה חדשה.
2. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח.
3. לוחצים על הכרטיסייה רשת.
4. בתפריט הנפתח ויסות נתונים (throttle), בוחרים באפשרות 3G מהיר.
5. מבטלים את הסימון בתיבה השבתת המטמון.
6. צריך לטעון מחדש את הדף.

בלי טעינה מראש, התמונות מתחילות להיטען אחרי שהדפדפן מסיים להריץ את הסקריפט. בתמונה הראשונה, העיכוב הזה מיותר.

שימוש ב-preload כאן מאפשר לתמונה להתחיל להיטען מראש, כך שהיא תהיה מוכנה להצגה כשהדפדפן יצטרך להציג אותה.

טעינה מראש של התמונה הראשונה מאפשרת לה להתחיל להיטען במקביל לסקריפט.

כדי לראות את ההבדל שנוצר בעקבות הטעינה מראש, בודקים את אותה גלריית תמונות שנטענת באופן דינמי אבל עם התמונה הראשונה שנטענה מראש, לפי השלבים מהדוגמה הראשונה.

הערה: דרך נוספת למנוע עיכובים בטעינת התמונות היא להשתמש בקרוסלה שמבוססת על תגי עיצוב, ולתת לטוען מראש של הדפדפן לאסוף את המשאבים הנדרשים. עם זאת, הגישה הזו לא תמיד מעשית, למשל אם אתם משתמשים שוב ברכיב קיים שלא מבוסס על תגי עיצוב.

טעינה מראש של תמונות רקע באמצעות image-set

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

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

הערה: התחביר הזה מתעלם מהצורך של התכונה הזו בקידומות של ספקים בדפדפנים שמבוססים על Chromium ו-WebKit. אם אתם מתכננים להשתמש בתכונה הזו, כדאי להשתמש ב-Autoprefixer (זמין ככלי אונליין) כדי לטפל בזה באופן אוטומטי.

הבעיה עם תמונות רקע ב-CSS היא שהדפדפן מגלה אותן רק אחרי שהוא מוריד ומעבד את כל ה-CSS ב-<head> של הדף.

אפשר לבדוק את הבעיה הזו באתר לדוגמה עם תמונת רקע רספונסיבית.

בדוגמה הזו, הורדת התמונה לא מתחילה עד שה-CSS יורד במלואו, מה שגורם לעיכוב מיותר בהצגת התמונה.

טעינה מראש של תמונות רספונסיביות מאפשרת לטעון את התמונות האלה מהר יותר.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

אם לא תכללו את המאפיין href, תוכלו לוודא שדפדפנים שלא תומכים ב-imagesrcset ברכיב <link>, אבל תומכים ב-image-set ב-CSS, יורידו את המקור הנכון. עם זאת, במקרה כזה הם לא ייהנו מהטעינה מראש.

אתם יכולים לבדוק איך הדוגמה הקודמת פועלת עם תמונת רקע רספונסיבית שנטענה מראש בהדגמה של טעינה מראש של רקע רספונסיבי.

כאן ההורדה של התמונה ושל ה-CSS מתחילה באותו זמן, וכך התמונה נטענת מהר יותר.

ההשפעות המעשיות של טעינה מראש של תמונות רספונסיביות

טעינה מראש של תמונות רספונסיביות יכולה להאיץ אותן בתיאוריה, אבל מה היא עושה בפועל?

כדי לענות על השאלה הזו, יצרתי שני עותקים של חנות PWA לדוגמה: אחד שלא טוען מראש תמונות, ואחד שטוען מראש חלק מהן. האתר טוען תמונות בטעינה מדורגת באמצעות JavaScript, ולכן כדאי לטעון מראש את התמונות שמופיעות באזור התצוגה הראשוני.

אלה התוצאות שהתקבלו בלי טעינה מראש ועם טעינה מראש של תמונות:

• המדד תחילת העיבוד לא השתנה.
• מדד המהירות השתפר מעט (273 אלפיות השנייה, כי התמונות מגיעות מהר יותר ולא תופסות חלק עצום מאזור הפיקסלים).
• המדד Last Painted Hero השתפר משמעותית, ב-1.2 שניות.

תמונות נטענות הרבה יותר מהר כשטוענים אותן מראש, וזה משפר מאוד את חוויית המשתמש.

טעינה מראש ו<picture>

קבוצת העבודה Web Performance Working Group דנה בהוספת מקבילה לטעינה מראש של srcset ו-sizes, אבל לא של הרכיב <picture>, שמטפל בתרחיש לדוגמה של "ניהול אומנותי".

עדיין יש כמה בעיות טכניות שצריך לפתור כדי לטעון מראש את <picture>, אבל בינתיים יש פתרונות עקיפים:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

הלוגיקה של בחירת מקור התמונה של הרכיב <picture> עוברת על המאפיינים media של הרכיבים <source> לפי הסדר, מוצאת את ההתאמה הראשונה ומשתמשת במשאב המצורף.

מכיוון שבטעינה מראש רספונסיבית אין מושג של "סדר" או "התאמה ראשונה", תצטרכו לתרגם את נקודות העצירה למשהו כמו:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

טעינה מראש וtype

הרכיב <picture> תומך גם בהתאמה ל-type הראשון, כדי לאפשר לכם לספק פורמטים שונים של תמונות, כך שהדפדפן יוכל לבחור את פורמט התמונה הראשון שהוא תומך בו.

תרחיש השימוש הזה נתמך רק באופן חלקי בטעינה מראש: דפדפנים צריכים להוריד רק טעינות מראש של סוגים נתמכים. כדי למנוע מדפדפנים לטעון מראש סוגי MIME שלא נתמכים, אפשר להוסיף את הקוד הבא לטעינה מראש:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

עם זאת, בניגוד ל-<picture>, הוא לא יעצור בסוג הנתמך הראשון. לכן, אם נכללות כמה טעינות מראש לכמה סוגים, כל התמונות ייטענו מראש:

מה לא לעשות – טעינה מראש של כמה סוגים:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

במקום זאת, כדאי לעשות את זה – לטעון מראש את הסוג המועדף ביותר:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

טעינה מראש של הפורמט החדש ביותר (AVIF במקרה הזה) פועלת כשיפור הדרגתי (progressive enhancement), שבו דפדפנים שתומכים בסוג הזה ייהנו מהטעינה מראש ודפדפנים אחרים לא ייהנו ממנה.

באתרים שבהם אפשר למצוא את התמונה במהירות ב-HTML, מומלץ להימנע מטעינה מראש, ובמקום זאת להגדיר שסורק הטעינה מראש יאסוף את התמונות מהרכיבים <picture> ו-<source>. בכל מקרה, זו שיטה מומלצת, במיוחד כשמשתמשים ב-Fetch Priority כדי לתעדף את התמונה המתאימה, כי היא מאפשרת לטעון מראש את התמונה המדויקת על סמך התמיכה בדפדפן. בנוסף, זה מונע מצב שבו הטעינה מראש לא תהיה עדכנית ביחס לתגי העיצוב הראשיים כשהתמונות או הדפים משתנים.

ההשפעה על המהירות שבה נטען רכיב התוכן הכי גדול (LCP)

תמונות יכולות להיות מועמדות ל-Largest Contentful Paint ‏(LCP), ולכן טעינה מראש שלהן יכולה לשפר את ה-LCP של האתר.

לא משנה אם התמונה שאתם טוענים מראש היא רספונסיבית, טעינה מראש פועלת הכי טוב כשמשאב התמונה לא ניתן לגילוי במטען הייעודי (payload) הראשוני של תגי העיצוב. בנוסף, השיפור ב-LCP יהיה משמעותי יותר באתרים שמעבדים את תגי העיצוב בצד הלקוח, בהשוואה לאתרים ששולחים תגי עיצוב מלאים מהשרת.