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