כולנו היינו שם: שכחנו לשנות את הגודל של תמונה לפני שהוספנו אותה לדף. התמונה נראית בסדר, אבל היא מבזבזת את נתוני המשתמשים ומפחיתה את ביצועי הדף.
זיהוי תמונות בגודל שגוי
בעזרת Lighthouse קל לזהות תמונות בגודל שגוי. מפעילים את בדיקת הביצועים (Lighthouse > אפשרויות > ביצועים) ומחפשים את התוצאות של הבדיקה גודל תקין של תמונות. בבדיקה מפורטות כל התמונות שצריך לשנות את הגודל שלהן.
איך קובעים את גודל התמונה הנכון
גודל התמונה יכול להיות מורכב באופן מטעה. לכן סיפקנו שתי גישות: 'טובה' ו'טובה יותר'. שתי הגישות ישפרו את הביצועים, אבל יכול להיות שייקח קצת יותר זמן להבין ולהטמיע את הגישה 'הטובה יותר'. עם זאת, הפעולה הזו גם תזכה אתכם בשיפור גדול יותר בביצועים. האפשרות הטובה ביותר היא זו שאתם מרגישים בנוח להטמיע.
הערה מהירה על יחידות CSS
יש שני סוגים של יחידות CSS לציון הגודל של רכיבי HTML, כולל תמונות:
- יחידות מוחלטות: רכיבים שתבחרו להם עיצוב באמצעות יחידות מוחלטות יוצגו תמיד באותו גודל, ללא קשר למכשיר. דוגמאות ליחידות CSS חוקיות ומוחלטות: px, cm, mm, in.
- יחידות יחסיות: אלמנטים שמעוצבים לפי יחידות יחסיות יוצגו בגדלים שונים, בהתאם לאורך היחסי שצוין. דוגמאות ליחידות CSS יחסיות וחוקיות: %, vw (1vw = 1% מהרוחב של אזור התצוגה), em (1.5 em = פי 1.5 מגודל הגופן).
הגישה 'טובה'
בתמונות שהגודל שלהן מבוסס על…
- יחידות יחסיות: שינוי גודל התמונה לגודל שיתאים לכל המכשירים.
מומלץ לבדוק את נתוני ניתוח הנתונים (למשל, Google Analytics) כדי לראות אילו גדלי מסך נפוצים בקרב המשתמשים שלכם. לחלופין, באתר screensiz.es תוכלו למצוא מידע על המסכים של מכשירים נפוצים רבים. - יחידות מוחלטות: שינוי גודל התמונה כך שתתאים לגודל שבו היא מוצגת.
אפשר להשתמש בחלונית הרכיבים של כלי הפיתוח כדי לקבוע את הגודל של התמונה שתוצג.
הגישה 'טוב יותר'
בתמונות עם גודל מוחלט ויחסי, משתמשים במאפיינים srcset
ו-sizes
כדי להציג תמונות שונות בצפיפות תצוגה שונה.
המדריך בנושא תמונות רספונסיביות
'צפיפות המסך' מתייחסת לעובדה שלמסכים שונים יש צפיפות פיקסלים שונה. כשכל שאר התנאים זהים, מסך שצפיפות הפיקסלים בו גבוהה ייראה חד יותר מאשר תצוגה עם צפיפות פיקסלים נמוכה.
לכן, אם אתם רוצים שהמשתמשים יוכלו ליהנות מתמונות הכי חדות שאפשר, ללא קשר לצפיפות הפיקסלים במכשיר שלהם, עליכם ליצור כמה גרסאות של התמונות.
טכניקות של תמונות רספונסיביות מאפשרות לכם להציג כמה גרסאות של תמונות, והמכשיר יבחר את התמונה שמתאימה לו בצורה הטובה ביותר.
תמונה שתעבוד בכל המכשירים תהיה גדולה מדי למכשירים קטנים יותר. שיטות של תמונות רספונסיביות, במיוחד srcset ו-sizes, מאפשרות לציין כמה גרסאות של תמונה, והמכשיר יבחר את הגודל שמתאים לו ביותר.
שינוי הגודל של תמונות
לא משנה באיזו גישה תבחרו, כדאי להשתמש ב-ImageMagick כדי לשנות את הגודל של התמונות. ImageMagick הוא הכלי הפופולרי ביותר בשורת הפקודה ליצירה ולעריכה של תמונות. רוב האנשים יכולים לשנות את גודל התמונות הרבה יותר מהר כשהם משתמשים ב-CLI מאשר בעורך תמונות שמבוסס על GUI.
שינוי גודל התמונה ל-25% מהגודל המקורי:
convert flower.jpg -resize 25% flower_small.jpg
שינוי גודל התמונה כך שתתאים ל'רוחב 200px על גובה 100px':
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
אם אתם צריכים לשנות את הגודל של הרבה תמונות, ייתכן שיהיה לכם נוח יותר להשתמש בסקריפט או בשירות כדי להפוך את התהליך לאוטומטי. אפשר לקרוא מידע נוסף על כך במדריך בנושא תמונות רספונסיביות.
הימנעות משינויים בפריסה על ידי ציון המימדים
במדריך הזה מדברים על מידות התמונות בהקשר של צמצום כמות הבייטים שהמערכת מורידת שלא נחוצים, אבל חשוב לציין ששימור המרחב הנכון לתמונות בפריסת הדף הוא רכיב קריטי נוסף לצמצום המדד הזזת פריסה מצטברת של הדף. כשמציגים תמונות ב-HTML, חשוב להשתמש במאפיינים המתאימים width ו-height כדי שהדפדפן ידע כמה מקום להקצות בפריסה לתמונה:
<img src="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 כדי לוודא שלא שכחתם שום דבר.