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

השתמשו ב-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 פיקסלים, כך הגיוני להשתמש בתמונה שנשמרה באותו אופן גודל.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כך אנחנו משפרים את srcset ואת sizes בהדרגה!

מידע נוסף

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