‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

Barry Pollard

Yoav Weiss

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

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

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

Browser Support

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

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".

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

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

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

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

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

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

חלונית 'רשת' בכלי הפיתוח ל-Chrome שמוצג בה תרשים מפל (Waterfall) עם משאב JPEG שמתחיל להוריד רק אחרי קוד JavaScript מסוים. — בלי טעינה מראש, התמונות מתחילות להיטען אחרי שהדפדפן מסיים להריץ את הסקריפט. בתמונה הראשונה, העיכוב הזה מיותר.

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

חלונית 'רשת' בכלי הפיתוח ל-Chrome שמוצג בה תרשים מפל (Waterfall) עם הורדה של משאב JPEG במקביל ל-JavaScript. — טעינה מראש של התמונה הראשונה מאפשרת להתחיל לטעון אותה במקביל לטעינת הסקריפט.

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

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

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

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

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

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

חלונית רשת בכלי הפיתוח ל-Chrome שמוצג בה תרשים מפל (Waterfall) עם משאב JPEG שמתחיל להוריד רק אחרי CSS מסוים. — בדוגמה הזו, הורדת התמונה לא מתחילה עד שה-CSS מוריד את כל הנתונים, מה שגורם להשהיה מיותרת בהצגת התמונה.

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

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

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

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

החלונית 'רשת' בכלי הפיתוח ל-Chrome שבה מוצג תרשים מפל עם הורדה של משאב JPEG במקביל לכמה קובצי CSS. — בדוגמה הזו, התמונה וה-CSS מתחילים להוריד בו-זמנית, וכך התמונה נטענת מהר יותר.

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

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

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

התוצאות שהתקבלו עבור no preload ועבור image preload:

‫Start Render לא השתנה.
מדד המהירות השתפר מעט (273 אלפיות השנייה, כי התמונות מגיעות מהר יותר ולא תופסות חלק גדול משטח הפיקסלים).
Last Painted Hero improved significantly, by 1.2 seconds.

השוואה של רצועת סרטונים ב-WebPageTest מראה שתמונות שנטענו מראש מוצגות מהר יותר בכ-1.5 שניות. — תמונות נטענות הרבה יותר מהר כשמבצעים טעינה מראש, וכך משפרים מאוד את חוויית המשתמש.

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

קבוצת העבודה בנושא ביצועי אתרים דנה בהוספת טעינה מראש שוות-ערך ל-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 במקרה הזה) פועלת כשיפור הדרגתי, שבו דפדפנים שתומכים בסוג הזה ייהנו מהטעינה מראש, ודפדפנים אחרים לא ייהנו ממנה.

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

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

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

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