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

השתמש ב-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 יותר מהשני.

&#39;פסח&#39; הקטנה: שני חתלתולים בני עשרה שבועות.
רוחב שמור 1000 פיקסלים, גודל קובץ 184 KB
&#39;פסח&#39; הקטנה: שני חתלתולים בני עשרה שבועות.
רוחב שמור 300 פיקסלים, גודל קובץ 16KB

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

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

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

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

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

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

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

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

Lias and Little Puss: שני חתלתולים אפורים בני 10 שבועות

איך יוצרים תמונות בגדלים שונים?

צריך להכין כמה גדלים זמינים לכל תמונה שבה רוצים להשתמש ב-srcset.

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

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

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

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

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

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

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

כלי הפיתוח ל-Chrome שבו מוצגת כותרת של סוג תוכן WebP לקובץ שמוצג על ידי Cloudinary

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

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

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

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

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

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

בעזרת 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 "ציון רוחבי משבצות מרובים".

מה לגבי תמיכה בדפדפן?

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

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

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

מידע נוסף

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