כולנו היינו שם: שכחתם להקטין את התמונה לפני שהוספתם אותה לדף. התמונה נראית טוב, אבל היא מבזבזת את נתוני המשתמשים ופוגעת בביצועי הדף.
זיהוי תמונות בגודל שגוי
בעזרת Lighthouse אפשר לזהות תמונות בגודל שגוי. מפעילים את בדיקת הביצועים (Lighthouse > אפשרויות > ביצועים) ומחפשים את התוצאות של הביקורת קביעת גודל תקין של תמונות. בביקורת מפורטים כל התמונות שצריך לשנות את הגודל שלהן.
קביעת גודל התמונה הנכון
שינוי הגודל של התמונה יכול להיות מורכב יחסית. לכן הוספנו שתי גישות: ה"טוב" ו"טוב יותר". שתיהן ישפרו את הביצועים, אבל יכול להיות שיידרש קצת יותר זמן להבין את הגישה "טובת יותר" ולהטמיע אותה. עם זאת, הם גם יספקו לכם שיפורים משמעותיים יותר בביצועים. האפשרות הטובה ביותר בשבילכם היא זו שאתם מרגישים בנוח ליישם.
הערה קצרה בנושא יחידות של שירות CSS
יש שני סוגים של יחידות CSS לציון הגודל של רכיבי HTML, כולל תמונות:
- יחידות מוחלטות: רכיבים שמעוצבים באמצעות יחידות מוחלטות תמיד יוצגו באותו גודל, ללא קשר למכשיר. דוגמאות ליחידות CSS מוחלטות תקינות: px, cm, mm, in.
- יחידות יחסיות: רכיבים שמעוצבים לפי יחידות יחסיות יוצגו בגדלים שונים, בהתאם לאורך היחסי שצוין. דוגמאות ליחידות CSS יחסיות ותקינות: %, vw (1vw = 1% מרוחב אזור התצוגה), em (1.5 em = גודל גופן גדול 1.5).
הגישה "הטובה"
עבור תמונות שהגודל שלהן מבוסס על...
- יחידות יחסיות: שנה את גודל התמונה לגודל שיפעל בכל המכשירים.
מומלץ לבדוק את נתוני הניתוח (לדוגמה, Google Analytics) כדי לראות אילו גדלים של מסכים נפוצים בשימוש. לחלופין, האתר screensiz.es מספק מידע על המסכים של מכשירים נפוצים רבים. - יחידות מוחלטות: משנים את גודל התמונה בהתאם לגודל שבו היא מוצגת.
אפשר להשתמש בחלונית הרכיבים של DevTools כדי לקבוע באיזה גודל תמונה תוצג.
הגישה "טובת יותר"
אם יש לכם תמונות גם בגודל מוחלט וגם בגודל יחסי, כדאי להשתמש במאפיינים srcset ו-sizes כדי להציג תמונות שונות בדחיסות תצוגה שונה.
קראו את המדריך לשימוש בתמונות רספונסיביות.
'צפיפות תצוגה' מתייחסת לעובדה שלתצוגות שונות יש דחיסות פיקסלים שונה. כשכל שאר התנאים זהים, מסך עם צפיפות פיקסלים גבוהה ייראה חד יותר מתצוגה עם צפיפות פיקסלים נמוכה.
לכן, יש צורך בכמה גרסאות של תמונה כדי לאפשר למשתמשים לחוות את התמונות החדות ביותר, ללא קשר לדחיסות הפיקסלים של המכשיר.
שיטות תמונה רספונסיביות מאפשרות זאת בכך שהן מאפשרות לציין כמה גרסאות של תמונה, והמערכת יכולה לבחור את התמונה שהכי מתאימה למכשיר.
תמונה שפועלת בכל המכשירים תהיה גדולה שלא לצורך במכשירים קטנים יותר. שיטות תמונה רספונסיביות, במיוחד srcset ו-sizes, מאפשרות לציין כמה גרסאות של התמונה ולאפשר למכשיר לבחור את הגודל המתאים ביותר לו.
שינוי גודל התמונות
לא משנה באיזו גישה תבחרו, שימוש ב-ImageMagick יכול לעזור לכם לשנות את הגודל של התמונות. ImageMagick הוא כלי שורת הפקודה הפופולרי ביותר ליצירה ולעריכה של תמונות. רוב האנשים יכולים לשנות את גודל התמונות מהר יותר כשמשתמשים ב-CLI, מאשר בעורך תמונות שמבוסס על GUI.
שינוי הגודל של התמונה ל-25% מגודל התמונה המקורית:
convert flower.jpg -resize 25% flower_small.jpg
שינוי גודל התמונה כך שהיא תתאים לרוחב של 200 פיקסלים על גובה של 100 פיקסלים:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
אם אתם רוצים לשנות את הגודל של הרבה תמונות, יכול להיות שיהיה לכם נוח יותר להשתמש בסקריפט או בשירות כדי להפוך את התהליך לאוטומטי. תוכל לקרוא מידע נוסף על כך במדריך תמונות רספונסיביות.
יש לציין מאפיינים כדי להימנע משינויים בפריסה
המדריך הזה עוסק במידות של תמונות בהקשר של צמצום כמות הבייטים הלא נחוצים שהורדו, אבל חשוב לציין ששמירת השטח הנכון לתמונות בפריסה היא רכיב חיוני נוסף למזעור הערך Cumulative Layout Shift של הדף. כשמציגים תמונות ב-HTML, יש להקפיד להשתמש במאפיינים width ו-height תקינים כדי שהדפדפן ידע כמה מקום להקצות לתמונה:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
ללא המאפיינים האלה, או מידות מקבילות ב-CSS, לדפדפן אין מושג כמה מקום יתפוס התמונה עד שהיא תיטען. הדבר יגרום לתנודות בפריסה של המסמך. שינויים כאלה יכולים לתסכל את המשתמשים כשהם זזים אחרי שהם מתחילים לצרוך אותו. כתוצאה מכך, המשתמשים עלולים לאבד את מקומם בעת הקריאה, או "לחמיץ" את יעד ההיט הרצוי, ובסופו של דבר ללחוץ על משהו אחר שלא התכוונו להגיע אליו במהלך טעינת הדף.
במקום לציין את הרוחב והגובה באופן מפורש, אפשר להשתמש במאפיין ה-CSS aspect-ratio על התמונה. יש לכך השפעה על גודל אלמנט דומה לזו של המאפיינים width ו-height, כי המאגר ישמור על יחס גובה-רוחב עקבי. עם זאת, ההבדל הוא שכתוצאה מכך השימוש ביחס גובה-רוחב שונה מזה שמוצג בתמונה, לכן סביר להניח שכדאי להשתמש בהגדרה object-fit כדי להבטיח שהתמונה לא תהיה מעוותת בתצוגת 16/9 המפורשת הזו:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
אימות
אחרי ששיניתם את הגודל של כל התמונות, הפעילו מחדש את Lighthouse כדי לוודא שלא פספסתם כלום.