בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל התמונות בדף שהגודל שלהן לא מתאים, לצד החיסכון הפוטנציאלי ב-kibibytes (KiB). שנה את גודל התמונות כדי לחסוך בנתונים ולשפר את זמן הטעינה של הדף:
איך מערכת Lighthouse מחשבת תמונות גדולות מדי
לגבי כל תמונה בדף, Lighthouse משווה את גודל התמונה שעברה עיבוד לגודל התמונה בפועל. הגודל שעבר עיבוד מביא בחשבון גם את יחס הפיקסלים של המכשיר. אם הגודל לאחר עיבוד קטן ב-4KiB לפחות מהגודל בפועל, התמונה תיכשל בבדיקה.
אסטרטגיות להתאמת הגודל של התמונות
במצב אידיאלי, אסור להציג בדף תמונות שגדולות יותר מהגרסה שמוצגת במסך המשתמש. כל גודל כזה גורם לבזבוז בייטים ולהאטה של זמן הטעינה של הדף.
האסטרטגיה העיקרית להצגת תמונות בגודל מתאים נקראת 'תמונות רספונסיביות'. כשמשתמשים בתמונות רספונסיביות, אפשר ליצור כמה גרסאות של כל תמונה, ולציין באיזו גרסה להשתמש ב-HTML או ב-CSS באמצעות שאילתות מדיה, מידות של אזור התצוגה וכן הלאה. בנוסף, RespImageLint הוא סימניה שימושית שמאפשרת לזהות את ערכי srcset ו-sizes האופטימליים לתמונות. מידע נוסף על המאפיינים האלה זמין במאמר הצגת תמונות רספונסיביות.
רשתות CDN של תמונות הן אסטרטגיה עיקרית נוספת להצגת תמונות בגודל מתאים. אפשר לחשוב על CDN של תמונות כממשקי API של שירותי אינטרנט שנועדו לשנות תמונות.
אסטרטגיה נוספת היא שימוש בפורמטים של תמונות שמבוססים על וקטור, כמו SVG. עם כמות קוד סופית, ניתן להתאים תמונת SVG לכל גודל. מידע נוסף זמין במאמר החלפת סמלים מורכבים ב-SVG.
כלים כמו gulp-responsive או responsive-images-generator יכולים להפוך את תהליך ההמרה של תמונה לפורמטים מרובים באופן אוטומטי. יש גם CDN של תמונות שמאפשרים ליצור גרסאות מרובות, כשמעלים תמונה או כששולחים בקשה מהדף שלכם.
הנחיות ספציפיות למקבץ
AMP
אפשר להשתמש בתמיכה של הרכיב amp-img ב-srcset כדי לציין באילו נכסי תמונות להשתמש בהתאם לגודל המסך. ראו גם תמונות רספונסיביות עם srcset, גדלים וגבהים.
Angular
כדאי להשתמש בכלי העזר BreakpointObserver ב-Component DevKit (CDK) כדי לנהל נקודות עצירה של תמונות.
Drupal
התכונה המובנית של סגנונות התמונות הרספונסיביות (זמינה ב-Drupal בגרסה 8 ואילך) מאפשרת לעבד שדות תמונה באמצעות מצבי תצוגה, תצוגות או תמונות שהועלו דרך עורך WYSIWYG.
גטסבי
השתמשו בפלאגין gatsby-image כדי ליצור מספר תמונות קטנות יותר לסמארטפונים ולטאבלטים. אפשר גם ליצור placeholders של תמונות מסוג SVG לטעינה מדורגת יעילה.
ג'ומלה
כדאי להשתמש בפלאגין של תמונות רספונסיביות.
WordPress
אפשר להעלות תמונות ישירות דרך ספריית המדיה כדי לוודא שיש תמונות במידות הדרושות, ולהוסיף אותן מספריית המדיה או להשתמש בווידג'ט התמונות כדי לוודא שנעשה שימוש בגדלים האופטימליים של התמונות (כולל התמונות לנקודות העצירה הרספונסיביות). יש להימנע משימוש בתמונות מסוג Full Size, אלא אם המידות מתאימות לשימוש בהן. מידע נוסף זמין במאמר הוספת תמונות לפוסטים ולדפים.