בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל התמונות שלא עברו אופטימיזציה, עם חיסכון פוטנציאלי ב-kibibyte (KiB). מומלץ לבצע אופטימיזציה של התמונות האלה כדי שהדף ייטען מהר יותר וצורך פחות נתונים:
איך מערכת Lighthouse מסמנת תמונות כניתנות לאופטימיזציה
מערכת Lighthouse אוספת את כל התמונות בפורמט JPEG או BMP שבדף, מגדירה את רמת הדחיסה של כל תמונה ל-85, ולאחר מכן משווה בין הגרסה המקורית לגרסה הדחוסה. אם החיסכון הפוטנציאלי הוא 4KiB או יותר, מערכת Lighthouse מסמנת את התמונה כניתנת לאופטימיזציה.
איך מבצעים אופטימיזציה של תמונות
יש הרבה פעולות שאפשר לבצע כדי לבצע אופטימיזציה של התמונות, ביניהן:
- שימוש ברשתות CDN של תמונות
- דחיסת תמונות
- החלפת קובצי GIF מונפשים בסרטונים
- טעינה מדורגת של תמונות
- הצגת תמונות רספונסיביות
- הצגת תמונות במידות הנכונות
- שימוש בתמונות WebP
אופטימיזציה של תמונות באמצעות כלים של ממשק GUI
גישה אחרת היא להריץ את התמונות באמצעות כלי אופטימיזציה שמתקינים במחשב ומריצים כממשק GUI. לדוגמה, באמצעות ImageOptim עליך לגרור תמונות ולשחרר אותן בממשק המשתמש, ולאחר מכן הן נדחסו באופן אוטומטי בלי לפגוע באיכות באופן משמעותי. אם יש לכם אתר קטן ויכול לבצע אופטימיזציה ידנית של כל התמונות, סביר להניח שהאפשרות הזו מספיק טובה.
סקווש היא אפשרות נוספת. Squoosh מתוחזק על ידי צוות Google Web DevRel.
הנחיות ספציפיות למקבץ
Drupal
כדאי להשתמש במודול שמבצע אופטימיזציה ומקטין אוטומטית את התמונות שמעלים לאתר, תוך שמירה על האיכות. כמו כן, צריך להקפיד להשתמש בסגנונות המובנים של התמונות הרספונסיביות ב-Drupal (שזמינים ב-Drupal בגרסה 8 ואילך).
ג'ומלה
כדאי להשתמש בפלאגין לאופטימיזציית תמונות שדוחס את התמונות בלי לפגוע באיכות שלהן.
Magento
כדאי להשתמש בתוסף של צד שלישי ל-Magento שמבצע אופטימיזציה של תמונות.
WordPress
כדאי להשתמש בפלאגין של WordPress לאופטימיזציית תמונות שדוחס את התמונות בלי לפגוע באיכות שלהן.