כולנו היינו שם: שכחתם להקטין תמונה לפני שהוספתם אותה לדף. התמונה נראית בסדר, אבל היא מבזבזת את הנתונים של המשתמשים ופוגעת בביצועים של הדף.
זיהוי תמונות בגודל שגוי
בעזרת Lighthouse קל לזהות תמונות בגודל שגוי. מריצים את הביקורת על הביצועים (Lighthouse > Options > Performance) ומחפשים את התוצאות של הביקורת Properly size images (התאמת הגודל של התמונות). בביקורת מפורטות כל התמונות שצריך לשנות את הגודל שלהן.
קביעת גודל התמונה הנכון
קביעת הגודל של התמונה יכולה להיות מסובכת יותר ממה שנדמה. לכן אנחנו מציעים שתי גישות: 'טובה' ו'טובה יותר'. שתי הגישות ישפרו את הביצועים, אבל יכול להיות שייקח קצת יותר זמן להבין וליישם את הגישה ה"טובה יותר". אבל היא גם תתגמל אתכם בשיפורים גדולים יותר בביצועים. הבחירה הכי טובה בשבילכם היא זו שאתם מרגישים בנוח ליישם.
הערה מהירה לגבי יחידות CSS
יש שני סוגים של יחידות CSS לציון הגודל של רכיבי HTML, כולל תמונות:
- יחידות מוחלטות: רכיבים שעוצבו באמצעות יחידות מוחלטות תמיד יוצגו באותו גודל, ללא קשר למכשיר. דוגמאות ליחידות CSS חוקיות ומוחלטות: px, cm, mm, in.
- יחידות יחסיות: רכיבים שעוצבו באמצעות יחידות יחסיות יוצגו בגדלים שונים, בהתאם לאורך היחסי שצוין. דוגמאות ליחידות CSS יחסיות ותקינות: %, vw (1vw = 1% מהרוחב של אזור התצוגה), em (1.5 em = 1.5 פעמים גודל הגופן).
הגישה ה'טובה'
לתמונות עם גודל שמבוסס על…
- יחידות יחסיות: שינוי הגודל של התמונה לגודל שיתאים לכל המכשירים.
כדאי לבדוק את נתוני הניתוח (למשל, Google Analytics) כדי לראות באילו גדלים של מסכים המשתמשים שלכם משתמשים בדרך כלל. אפשרות נוספת היא להיכנס לאתר screensiz.es ולקבל מידע על המסכים של מכשירים נפוצים רבים. – Absolute units (יחידות מוחלטות): שינוי הגודל של התמונה כך שיתאים לגודל שבו היא מוצגת.
אפשר להשתמש בחלונית Elements (רכיבים) בכלי הפיתוח כדי לקבוע באיזה גודל מוצגת תמונה.
הגישה 'הטובה יותר'
אם התמונות מוגדרות עם גודל מוחלט וגם עם גודל יחסי, צריך להשתמש במאפיינים 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
אם אתם מתכוונים לשנות את הגודל של הרבה תמונות, יכול להיות שיהיה לכם נוח יותר להשתמש בסקריפט או בשירות כדי להפוך את התהליך לאוטומטי. מידע נוסף זמין במדריך בנושא תמונות רספונסיביות.
איך נמנעים משינויים בפריסה באמצעות הגדרת מידות
במדריך הזה אנחנו מדברים על מידות של תמונות בהקשר של צמצום מספר הבייטים המיותרים שמוורדים, אבל חשוב לציין שהקצאת המקום הנכון לתמונות בפריסה היא עוד רכיב חשוב בצמצום מדד יציבות חזותית (CLS) של הדף. כשמציגים תמונות ב-HTML, חשוב להשתמש במאפיינים הנכונים של width ו-height כדי שהדפדפן יידע כמה מקום להקצות בפריסה לתמונה:
<img src="/articles/flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
בלי המאפיינים האלה, או בלי הגודל המקביל ב-CSS, הדפדפן לא יודע כמה מקום התמונה תתפוס עד שהיא תיטען. כתוצאה מכך יתרחשו שינויים בפריסה של המסמך, וזה עלול לתסכל את המשתמשים כשהתוכן משתנה אחרי שהם התחילו לצרוך אותו. כתוצאה מכך, המשתמשים עלולים לאבד את המקום שבו הם קראו, או לפספס את היעד שאליו הם התכוונו להגיע וללחוץ על משהו אחר שהם לא התכוונו אליו במהלך טעינת הדף.
אפשרות נוספת היא להשתמש במאפיין aspect-ratio של CSS בתמונה במקום לציין את הרוחב והגובה באופן מפורש. ההשפעה של המאפיין הזה על הגודל של רכיב דומה להשפעה של המאפיינים width ו-height, כי המאגר ישמור על יחס גובה-רוחב עקבי. עם זאת, ההבדל הוא שהשימוש בשיטה הזו עלול לגרום לשימוש ביחס גובה-רוחב שונה מזה שבו התמונה מסופקת, ולכן כדאי להשתמש בהגדרה object-fit כדי לוודא שהתמונה לא תעוות בתצוגה המפורשת הזו של 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
אימות
אחרי שמשנים את הגודל של כל התמונות, מריצים מחדש את Lighthouse כדי לוודא שלא פספסתם שום דבר.