כולנו כבר שם: שכחתם להקטין תמונה לפני שהוספתם אותה הדף הזה. התמונה נראית טוב, אבל היא מבזבזת את המשתמשים דף נתונים ופגיעה או של ביצועים.
זיהוי תמונות בגודל שגוי
בעזרת Lighthouse קל לזהות תמונות בגודל שגוי. להריץ את ביקורת ביצועים (Lighthouse > אפשרויות > ביצועים) ומחפשים תוצאות הבדיקה של גודל תקין של תמונות. הביקורת מפרטת כל תמונה .
בודקים את גודל התמונה הנכון
שינוי הגודל של התמונה יכול להיות מורכב באופן מטעה. לכן, העמדנו לרשותך גישות: "הטובות" ל"טוב יותר". שניהם ישפרו את הביצועים, אבל "טוב יותר" יכול להיות שייקח קצת יותר זמן להבין וליישם. אבל חשוב בנוסף, תקבלו הצעות לשיפורים משמעותיים יותר בביצועים. הבחירה הטובה ביותר היא זו שאתם מרגישים בנוח ליישם אותה.
הערה קצרה לגבי יחידות CSS
יש שני סוגים של יחידות CSS לציון הגודל של רכיבי HTML: כולל תמונות:
- יחידות מוחלטות: רכיבים שמעוצבים באמצעות יחידות מוחלטות תמיד יהיו יוצגו באותו גודל, בלי קשר למכשיר. דוגמאות לתוויות תקינות, יחידות CSS מוחלטות: px, cm, mm, in.
- יחידות יחסיות: רכיבים שמעוצבים באמצעות יחידות יחסיות יוצגו בגדלים שונים, בהתאם לאורך היחסי שצוין. דוגמאות של יחידות CSS יחסיות וחוקיות: %, vw (1vw = 1% מהרוחב של אזור התצוגה), em (1.5 em = פי 1.5 מגודל הגופן).
"הטוב" גישה
בתמונות שגודלן מבוסס על...
- יחידות יחסיות: שינוי הגודל של התמונה לגודל שיתאים לכל המכשירים.
מומלץ לבדוק את נתוני הניתוח (למשל, Analytics), כדי לראות אילו גדלים של תצוגה נמצאים בשימוש נפוץ בקרב המשתמשים. לחלופין, screensiz.es שמספק מידע על התצוגות של מכשירים נפוצים רבים. - יחידות מוחלטות: שינוי הגודל של התמונה כך שתתאים לגודל שבו היא מוצגת.
אפשר להשתמש בחלונית הרכיבים של כלי הפיתוח כדי לקבוע את גודל התמונה מוצגת ב.
"הטוב יותר" גישה
לתמונות עם גודל מוחלט וגם גודל יחסי, צריך להשתמש בפונקציה srcset
ו-sizes
כדי להציג תמונות שונות לדחיסות תצוגה שונה.
המדריך בנושא תמונות רספונסיביות.
'צפיפות תצוגה' מתייחסת לעובדה שלמסכים שונים יש צפיפות פיקסלים. כשכל שאר התנאים שווים, צפיפות פיקסלים גבוהה המסך ייראה חד יותר מאשר תצוגה עם צפיפות פיקסלים נמוכה.
לכן יש צורך בכמה גרסאות של תמונות אם רוצים שהמשתמשים לקבלת תמונות בהירות ככל האפשר, ללא קשר לדחיסות הפיקסלים במכשיר שלהם.
כדי לעשות זאת, הטכניקות של תמונות רספונסיביות מאפשרות לכם ליצור כמה גרסאות של תמונות, והמכשיר יוכל לבחור את התמונה שמתאימה הכי מתאים.
תמונה שפועלת בכל המכשירים תהיה גדולה שלא לצורך למכשירים קטנים יותר. שיטות של תמונות רספונסיביות, במיוחד srcset והגדלים, מאפשרים לציין כמה גרסאות של תמונה ולאפשר למכשיר לבחור בגודל שמתאים לו.
שינוי הגודל של תמונות
לא משנה באיזו גישה תבחרו, אולי כדאי להשתמש 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, לדפדפן אין מושג כמה מקום ייקח לתמונה עד שהיא תיטען. הדבר יגרום לתנודות בפריסה של המסמך, שיכולות לתסכל את המשתמשים כשהתוכן זז אחרי שהם מתחילים לצרוך אותו. כתוצאה מכך, המשתמשים עלולים לאבד את מקומם במהלך הקריאה או "לפספס". הם לוחצים על יעד ההיט שהם התכוונו להגיע אליו, ובסוף לוחצים על משהו אחר שהוא לא התכוון לעשות במהלך טעינת הדף.
במקום לספק רוחב וגובה באופן מפורש, אפשר להשתמש במאפיין aspect-ratio של CSS בתמונה. יש לכך השפעה דומה על גודל הרכיב, כמו שעושים המאפיינים width ו-height, בכך שהקונטיינר שומר על יחס גובה-רוחב עקבי. עם זאת, ההבדל הוא שכתוצאה מכך עלול להיות שימוש ביחס גובה-רוחב שונה מזה שסופק בתמונה, כך שכדאי להשתמש בהגדרה של object-fit כדי להבטיח שהתמונה לא תהיה מעוותת בתצוגה המפורשת הזו של 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
אימות
לאחר שינוי הגודל של כל התמונות, יש להריץ מחדש את Lighthouse כדי לוודא שלא עשית זאת מפספסים כלום.