טיפים מובילים לשיפור ביצועי האתר

משתמשים ב-srcset כדי לבחור אוטומטית את הגודל הנכון של התמונה.

Sam Dutton

לפי HTTP Archive, המשקל של דף אינטרנט טיפוסי בנייד הוא יותר מ-2.6MB, ויותר משני שלישים מהמשקל הזה הם תמונות. זו הזדמנות מצוינת לאופטימיזציה!

סיכום

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

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

שמירת תמונות בגודל הנכון

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

אפשר לראות דוגמאות בתמונות שלמטה.

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

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

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

אבל… מה קורה אם גודל התצוגה משתנה?

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

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

…ומה לגבי מכשירים שצורכים הרבה פיקסלים, כמו מסכי Retina?

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

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

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

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

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

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

איך אפשר ליצור כמה גדלים של תמונות?

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

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

שילוב עיבוד תמונות בתהליך ה-build

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

שימוש בשירות תמונות

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

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

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

מה קורה אם התמונה לא נראית טוב בגדלים שונים?

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

מה לגבי צפיפות פיקסלים?

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

זה יכול להשפיע על הגודל שבו צריך לשמור את התמונות. לא נפרט כאן את כל הפרטים, אבל אפשר לקרוא עליהם ב-codelab Use density descriptors.

מה לגבי גודל התצוגה של התמונה?

אתם יכולים להשתמש ב-sizes כדי לשפר את הפעולה של srcset.

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

בדוגמה שלמטה, התג sizes="50vw" אומר לדפדפן שהתמונה תוצג ברוחב של 50% מאזור התצוגה.

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

אפשר לראות את זה בפעולה בכתובת simpl.info/sizes וב-codelab Specifying multiple slot widths.

מה לגבי תמיכה בדפדפנים?

srcset ו-sizes נתמכים על ידי יותר מ-90% מהדפדפנים בעולם.

אם דפדפן לא תומך ב-srcset או ב-sizes, הוא יחזור לשימוש רק במאפיין src.

כך srcset ו-sizes הופכים לשיפורים מתקדמים מצוינים!

מידע נוסף

בקטע "אופטימיזציה של תמונות" באתר web.dev אפשר לקרוא מידע נוסף על אופטימיזציה של תמונות. כדי לקבל חוויה מודרכת יותר, כדאי לנסות את הקורס החינמי "תמונות רספונסיביות" שמציעה Udacity.