תמונות רספונסיביות

מעבדת הקוד הזו היא חלק מקורס ההדרכה של Progressive Web Apps, שפותח על ידי צוות ההדרכה של Google Developers. אם תשלימו את הקוד של השיעורים השונים ברצף, תוכלו להפיק את המקסימום מהקורס הזה.

לפרטים מלאים על הקורס, מומלץ לעיין בסקירה הכללית של Progressive Web Apps.

מבוא

בשיעור Lab זה תלמדו איך לשפר את מראה התמונות בדף האינטרנט בכל המכשירים.

מה תלמדו

  • איך לשנות את הגודל של התמונות כך שיתאימו לגדלים של גורמים שונים
  • איך להשתמש ב-srcset וב-sizes כדי להציג את התמונה הנכונה לרוחב הרוחב
  • איך להשתמש ב-picture וב-source בשילוב עם שאילתות מדיה כך שהתמונות בדף מגיבות באופן אוטומטי כשגודל החלון משתנה

מה חשוב לדעת

  • HTML בסיסי ו-CSS

מה צריך להכין

  • עורך הטקסטים
  • מחשב עם גישה למסוף/מעטפת

מורידים או משכפלים את מאגר pwa-training-labs מ-github ומתקינים את גרסת LTS של Node.js, אם צריך.

אם אין לך שרת פיתוח מקומי מועדף, עליך להתקין את החבילה של Node.js http-server:

npm install http-server -g

עוברים לספרייה responsive-images-lab/app/ ומפעילים את השרת:

cd responsive-images-lab/app
http-server -p 8080 -a localhost -c 0

אפשר לסיים את השרת בכל שלב עם Ctrl-c.

פותחים את הדפדפן ועוברים אל localhost:8080/.

הערה: יש לבטל את הרישום של כל מופעי השירות (service worker) ולנקות את כל המטמון של קובץ השירות (service worker) ב-localhost כדי שלא יפריעו למעבדה. כדי לעשות זאת בכלי הפיתוח של Chrome, לוחצים על ניקוי נתוני האתר בקטע ניקוי האחסון בכרטיסייה אפליקציה.

אם יש לך עורך טקסט שמאפשר לפתוח פרויקט, צריך לפתוח את התיקייה responsive-images-lab/app/. כך קל יותר לשמור על סדר. אחרת, פתח את התיקייה במערכת הקבצים של המחשב. התיקייה app/ היא המקום שבו תיצרו את שיעור ה-Lab.

התיקייה הזו מכילה:

  • התיקייה images מכילה תמונות לדוגמה, ולכל אחת מהן יש כמה גרסאות ברזולוציות שונות
  • index.html הוא דף ה-HTML הראשי של האתר/האפליקציה לדוגמה שלנו
  • styles/main.css הוא גיליון הסגנונות המדורג עבור האתר לדוגמה

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

מחליפים את משימה 2 באפליקציה styles/main.css בקוד הבא:

img {
  max-width: 100%;
}

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

הסבר

הערך ב-max-width מייצג אחוז מהרכיב המכיל, במקרה הזה, הרכיב article.

הערה: אפשר גם לציין את max-width במונחים של רוחב אזור תצוגה באמצעות vw יחידות (לדוגמה, 100vw). במקרה הזה אנחנו משתמשים בערך אחוז כדי שתמונות יהיו באותו רוחב כמו הטקסט.

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

הוספת srcset לתמונה

כדי להשלים את ההרשמה לתוכנית 3.1 ב-index.html, יש להוסיף את המאפיין srcset הבא לאלמנט img שמכיל את תמונת SFO:

srcset="images/sfo-1600_large.jpg, images/sfo-1000_large.jpg, images/sfo-800_medium.jpg, images/sfo-500_small.jpg"

שומרים את הקוד ומרעננים את הדף בדפדפן. פותחים את כלי הפיתוח של הדפדפן ובודקים את בקשות הרשת. אפשר לרענן את הדף בגדלים שונים של חלונות. הדפדפן אמור לאחזר את images/sfo-1600_large.jpg ללא קשר לגודל החלון.

הסבר

בתיקייה images/ יש כמה גרסאות של תמונת ה-SFO, כל אחת מהן ברזולוציות שונות. אנחנו מציינים זאת במאפיין srcset כדי לתת לדפדפן אפשרות לבחור באיזה קובץ להשתמש. עם זאת, לדפדפן אין דרך לקבוע את גודלי הקבצים לפני טעינתם, לכן הוא בוחר תמיד בתמונה הראשונה ברשימה.

הוספת מתארי רוחב ל- srcset

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

כדי להשלים את השלמת השלמה של 3.2 ב-index.html, יש להוסיף מתארים רוחב לרכיב ה-SFO img:

srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w"

שומרים את הקוד ומרעננים את הדף בדפדפן. מרעננים את הדף בגדלים שונים של חלונות ובודקים את בקשות הרשת כדי לראות איזו גרסה של התמונה מאוחזרת בכל גודל. במסך 1x, הדפדפן מאחזר את sfo-500_small.jpg כשהחלון קטן מ-500px, sfo-800_medium.jpg כאשר הוא מצומצם מ-800px וכן הלאה.

הערה: אם גרסה גדולה יותר של תמונה זמינה במטמון הדפדפן (HTTP), דפדפנים מסוימים עשויים לטעון את התמונה הזו גם אם היא אינה זו שצוינה ב-srcset (כי אם כבר יש בדפדפן תמונה ברזולוציה גבוהה יותר ששמורה באופן מקומי, למה לא להשתמש בה?). כדי להשבית את שיעור ה-Lab הזה, יש לוודא שמטמון ה-HTTP מושבת בכלים למפתחים.

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

chrome-dimensions.png

הסבר

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

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

הצגת תמונה בחצי מהרוחב של אזור התצוגה (50vw)

מחליפים את ENTER 4.1 ב-styles/main.css בקוד הבא:

img#sfo {
  transition: width 0.5s;
  max-width: 50vw;
}

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

הסבר

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

הוספת מאפיין המידה לתמונה

אנחנו יכולים לתת למאפיין img מאפיין sizes כדי לציין לדפדפן את גודל התצוגה של התמונה לפני האחזור.

כדי להשלים את הפעולה 4.2 ב-index.html, יש להוסיף את sizes="50vw" לרכיב img כך:

<img id="sfo" src="images/sfo-500_small.jpg" srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w" sizes="50vw" alt="View from aircraft window near San Francisco airport">

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

הסבר

הערך של sizes תואם לערך max-width של התמונה ב-CSS. לדפדפן יש עכשיו את כל מה שצריך כדי לבחור את גרסת התמונה הנכונה. הדפדפן מכיר את רוחב אזור התצוגה משלו ואת דחיסות הפיקסלים של המכשיר של המשתמש, לכן אנחנו מספקים להם את קובצי המקור (&399); (באמצעות מתאר הרוחב) ואת גודלי התמונה ביחס לאזור התצוגה (באמצעות המאפיין sizes).

למידע נוסף

הוספת שאילתת מדיה לשירות ה-CSS

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

מחליפים את :** 5.1 בstyles/main.css עם הקוד הבא:

@media screen and (max-width: 700px) {
  img#sfo {
    max-width: 90vw;
    width: 90vw;
  }
}

שומרים את הקוד ומרעננים את הדף בדפדפן. כיווץ החלון כך שיהיה קטן מ-700px (ב-Chrome, מאפיינים של אזור התצוגה מוצגים במסך אם כלי הפיתוח פתוחים). התמונה צריכה להשתנות כדי למלא 90% מרוחב החלון.

הסבר

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

למידע נוסף

יש להוסיף את שאילתת המדיה למאפיין הגדלים

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

כדי להשלים את השלמת הפעולה 5.2 ב-index.html, יש לעדכן את המאפיין sizes בתמונה של SFO:

sizes="(max-width: 700px) 90vw, 50vw"

שומרים את הקוד ומרעננים את הדף בדפדפן. יש לשנות את הגודל של חלון הדפדפן כך שיהיה ברוחב של 600 פיקסלים. בתצוגת 1x, הדפדפן צריך לאחזר את sfo-800_medium.jpg.

אנו יכולים להשתמש ברכיב picture וברכיב source, בשילוב עם שאילתות מדיה, כדי לשנות את מקור התמונה כאשר גודל החלון משתנה.

מחליפים את :** 6 באפליקציה index.html עם הקוד הבא:

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

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

הסבר

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

הוספנו כמה גרסאות של התמונה לדוגמה, כל אחת מהן ברזולוציות שונות, וחתוכה כדי שיהיה קל יותר לראות את התמונה. בקוד שלמעלה, גדול מ-750 פיקסלים, הדפדפן מאחזר את horses-1600_large_2x.jpg (אם המכשיר כולל מסך כפול) או horses-800_large_1x.jpg. אם הרוחב של החלון קטן מ-750 פיקסלים אבל גדול מ-500 פיקסלים, הדפדפן מאחזר את horses_medium.jpg. בגודל של פחות מ-500 פיקסלים, הדפדפן מאחזר את תמונת החלופה, horses_small.jpg.

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

למידע נוסף

למדת איך לגרום לתמונות בדף האינטרנט שלך להיראות טוב בכל המכשירים!

משאבים

מידע על אוטומציה של התהליך

מידע נוסף על srcset וגדלים

מידע נוסף על כיוון האומנות

כדי לראות את כל שיעורי ה-Lab בקורס ההכשרה ל-PWA, יש לעיין ב-Welcome Lab לקורס/