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

Demián Renzulli

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

דרישות מוקדמות

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

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

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

1. פותחים את הדמו ללא אופטימיזציה בכרטיסייה חדשה ב-Chrome.
2. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
3. לוחצים על הכרטיסייה רשתות.
4. טוענים מחדש את הדף.

אפשר לראות שהתמונה היחידה שמתבצעת עבורה בקשה היא background-desktop.jpg, בגודל 1,006KB:

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

הסגנונות ששולטים בתמונת הרקע מופיעים בקובץ style.css:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

זו המשמעות של כל אחד מהמאפיינים שבהם נעשה שימוש:

• background-position: center center: מרכזים את התמונה אנכית ואופקית.
• background-repeat: no-repeat: הצגת התמונה רק פעם אחת.
• background-attachment: fixed: כדאי להימנע מגלילה של תמונת הרקע.
• background-size: cover: שינוי הגודל של התמונה כך שתכלול את כל הקונטיינר.
• background-image: url(images/background-desktop.jpg): כתובת ה-URL של התמונה.

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

לשימוש בתמונת רקע אחת לכל גודלי המסך יש מגבלות מסוימות:

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

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

שימוש בשאילתות מדיה

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

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

• בקובץ style.css מסירים את השורה שמכילה את כתובת ה-URL של תמונת הרקע:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

• בשלב הבא, יוצרים נקודת עצירה לכל רוחב מסך, על סמך המימדים הנפוצים בפיסקלים של מסכים בניידים, בטאבלטים ובמחשבים:

בנייד:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

בטאבלטים:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

במחשבים:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

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

מדידה במכשירים שונים

בשלב הבא, תוכלו לראות את האתר שנוצר בגדלים שונים של מסכים ובמכשירים ניידים מדומים:

1. פותחים את האתר המותאם בכרטיסייה חדשה ב-Chrome.
2. להקטין את אזור התצוגה (פחות מ-480px).
3. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
4. לוחצים על הכרטיסייה רשתות.
5. טוענים מחדש את הדף. שימו לב לאופן שבו התמונה background-mobile.jpg נשלחה.
6. להרחיב את אזור התצוגה. אחרי שהתמונה תהיה רחבה יותר מ-480px, שימו לב לאופן שבו background-tablet.jpg מופיע בבקשה. אחרי שהתמונה תהיה רחבה יותר מ-1025px, שימו לב לאופן שבו background-desktop.jpg מופיע בבקשה.

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

במיוחד כשהרוחב נמוך מהערך שהוגדר בנקודת הצירוף לנייד (480px), יופיע ביומן הרשת הנתון הבא:

גודל הרקע החדש בנייד קטן ב-67% מזה במחשב.

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

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

האפשרות הראשונה שצריך לבדוק היא אם התמונה לבחירת LCP יכולה לפעול ברכיב <img> עם מאפייני srcset ו-sizes להתאמה לעומס. סורק ההטענה מראש של הדפדפן יזהה רכיבי <img> וישלח בקשות לגביהם בזמן שהמנתח חסום בגלל העיבוד.

אם אתם לא יכולים (או לא רוצים) להימנע משימוש בתמונה לרקע ב-CSS, האפשרות השנייה היא לטעון מראש תמונות רספונסיביות כדי לוודא שתמונה מתאימה תיטען מראש לגודל המסך הנכון. המאפיינים <link>, media, imagesrcset ו-imagesizes של הרכיבים מציינים לדפדפן שהצעה נתונה לגבי משאב רלוונטית רק בתנאים מסוימים של אזור התצוגה. כך אפשר למנוע מספר טעינות מראש מיותרות כשרוצים לטעון רק את המשאב שמתאים לאזור התצוגה הנוכחי.

סיכום

במדריך הזה למדתם להחיל שאילתות מדיה כדי לבקש תמונות רקע שמותאמות לגדלי מסך ספציפיים, וכדי לחסוך בייטים כשנכנסים לאתר במכשירים קטנים יותר, כמו טלפונים ניידים. השתמשתם בכלל @media כדי להטמיע רקע רספונסיבי. כל הדפדפנים תומכים בשיטה הזו. אפשר להשתמש בתכונה חדשה של CSS: image-set()‎, למטרה זהה עם פחות שורות קוד. נכון למועד כתיבת המאמר, התכונה הזו לא נתמכת בכל הדפדפנים, אבל כדאי לעקוב אחרי התפתחות השימוש בה, כי היא יכולה להיות אלטרנטיבה מעניינת לטכניקה הזו.