אתרים רבים מבקשים משאבים כבדים, כמו תמונות, שאינם מותאמים למסכים מסוימים, ושולחים קובצי CSS גדולים שמכילים סגנונות שמכשירים מסוימים לעולם לא ישתמשו בהם. השימוש בשאילתות מדיה הוא שיטה פופולרית ליצירת גיליונות סגנונות ונכסים מותאמים אישית למסכים שונים, במטרה להפחית את כמות הנתונים שמועברת למשתמשים ולשפר את ביצועי טעינת הדפים. במדריך הזה מוסבר איך להשתמש בשאילתות מדיה כדי לשלוח תמונות בגודל הנדרש בלבד. שיטה זו נקראת בדרך כלל תמונות רספונסיביות.
דרישות מוקדמות
המדריך הזה מתבסס על ההנחה שאתם מכירים את כלי הפיתוח ל-Chrome. אם רוצים, אפשר להשתמש בכלי הפיתוח של דפדפן אחר במקום זאת. צריך רק למפות את צילומי המסך של כלי הפיתוח ל-Chrome שבמדריך הזה לתכונות הרלוונטיות בדפדפן לפי בחירתכם.
הסבר על תמונות רקע רספונסיביות
קודם כול, מנתחים את התנועה ברשת של ההדגמה שלא עברה אופטימיזציה:
- פותחים את ההדגמה שלא בוצעה אופטימיזציה בכרטיסייה חדשה ב-Chrome.
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
- לטעון מחדש את הדף.
תראה שהתמונה היחידה המבוקשת היא 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, שמאפשרים להגדיר קבוצה של נקודות עצירה (breakpoint) שבהן מוגדרים סגנונות ספציפיים.
כשהתנאים שהוגדרו בכלל @media מתקיימים (לדוגמה, רוחב מסך מסוים), המערכת תחיל את קבוצת הסגנונות שהוגדרה בתוך נקודת העצירה (breakpoint).
אפשר להשתמש בשלבים הבאים כדי להחיל שאילתות מדיה על האתר כדי להשתמש בתמונות שונות, בהתאם לרוחב המקסימלי של המכשיר שממנו נשלחה הדף.
- ב-
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);
}
- בשלב הבא יוצרים נקודת עצירה (breakpoint) לכל רוחב מסך, על סמך המאפיינים הנפוצים בפיקסלים שיש בדרך כלל במסכים של ניידים, טאבלטים ומחשבים:
בנייד:
@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 שעברה אופטימיזציה.
מדידה למכשירים שונים
בשלב הבא, דמיינו את האתר שנוצר במסכים בגדלים שונים ובהדמיה של מכשירים ניידים:
- פותחים את האתר שעבר אופטימיזציה בכרטיסייה חדשה ב-Chrome.
- אזור התצוגה צריך להיות צר (פחות מ-
480px). - לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
- לטעון מחדש את הדף.
שימו לב איך נשלחה בקשה לתמונה
background-mobile.jpg. - הרחב את אזור התצוגה. כשהוא רחב יותר מ-
480px, שימו לב לאופן שבו נשלחה הבקשה שלbackground-tablet.jpg. כשהוא רחב יותר מ-1025px, שימו לב לאופן שבו נשלחה הבקשה שלbackground-desktop.jpg.
כשרוחב מסך הדפדפן משתנה, נשלחות בקשות לתמונות חדשות.
באופן ספציפי, כשהרוחב נמוך מהערך שהוגדר בנקודת העצירה בנייד (480px), יוצג יומן הרשת הבא:
הגודל של הרקע החדש לנייד קטן ב-67% מהגודל של הרקע של המחשב.
ההשפעות על Largest Contentful Paint (LCP)
אלמנטים עם תמונות רקע של CSS נחשבים כמועמדים להצגת המהירות שבה נטען רכיב התוכן הכי גדול (LCP). עם זאת, תמונות הרקע של CSS לא ניתנות לגילוי על ידי סורק הטעינה מראש של הדפדפן, כך שאם לא תפעלו בזהירות, ייתכן שמצב ה-LCP של האתר יתעכב.
האפשרות הראשונה שכדאי לשקול היא אם התמונה המועמדת מסוג LCP תוכל לפעול באלמנט <img> עם מאפייני srcset ו-sizes לשיפור הרספונסיביות. סורק הטעינה מראש של הדפדפן יגלה רכיבי <img> וישלח בקשות עבורם בזמן שהמנתח חסום בעיבוד.
אם אתם לא יכולים (או שאתם לא רוצים) להימנע משימוש בתמונת רקע של CSS, האפשרות השנייה היא לטעון מראש תמונות רספונסיביות כדי לוודא שתטענו מראש את התמונה הנכונה בגודל המתאים לאזור התצוגה. מאפייני ה-<link> media, imagesrcset ו-imagesizes מרמזים לדפדפן שרמז נתון למשאב יחול רק בתנאים מסוימים של אזור התצוגה, וכך נמנעים מטעינות מראש מרובות שמבוזבזות כשרוצים לטעון רק משאב אחד שמתאים לאזור התצוגה הנוכחי.
סיכום
במדריך הזה למדתם להשתמש בשאילתות מדיה כדי לבקש תמונות רקע שמותאמות לגודלי מסך מסוימים, ולחסוך בייטים בגישה לאתר במכשירים קטנים יותר, כמו טלפונים ניידים.
השתמשת בכלל @media כדי להטמיע רקע רספונסיבי. השיטה הזו נתמכת באופן נרחב בכל הדפדפנים.
אפשר להשתמש בתכונת CSS חדשה: image-set() לאותה מטרה עם פחות שורות קוד. נכון לעכשיו, התכונה הזו לא נתמכת בכל הדפדפנים, אבל כדאי לשים לב להתפתחות האימוץ, כי היא עשויה לייצג חלופה מעניינת לשיטה הזו.