יש לקודד תמונות ביעילות

בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל התמונות שלא בוצעה אופטימיזציה שלהן, עם החיסכון הפוטנציאלי בקילובייט (KiB). כדאי לבצע אופטימיזציה של התמונות האלה כדי שהדף יטענן מהר יותר וצורך פחות נתונים:

צילום מסך של הביקורת של Lighthouse בנושא קידוד תמונות ביעילות

איך Lighthouse מסמנים תמונות כתמונות שאפשר לבצע אופטימיזציה שלהן

Lighthouse אוסף את כל התמונות בפורמט JPEG או BMP בדף, מגדיר את רמת הדחיסה של כל תמונה ל-85 ואז משווה בין הגרסה המקורית לבין הגרסה הדחוסה. אם החיסכון הפוטנציאלי הוא 4KiB או יותר, Lighthouse מסמנים את התמונה כתמונה שאפשר לבצע בה אופטימיזציה.

איך מבצעים אופטימיזציה של תמונות

יש הרבה דרכים לבצע אופטימיזציה של התמונות, למשל:

אופטימיזציה של תמונות באמצעות כלים עם ממשק משתמש גרפי

גישה אחרת היא להריץ את התמונות דרך אופטימיזטור שמתקינים במחשב ומפעילים כממשק משתמש גרפי. לדוגמה, ב-ImageOptim אפשר לגרור ולשחרר תמונות בממשק המשתמש, והמערכת דוחסת אותן באופן אוטומטי בלי לפגוע באיכות באופן משמעותי. אם אתם מנהלים אתר קטן ואתם יכולים לבצע אופטימיזציה ידנית של כל התמונות, האפשרות הזו כנראה מספיקה.

אפשרות נוספת היא Squoosh. צוות Google Web DevRel אחראי לתחזוקת Squoosh.

הנחיות ספציפיות ל-stack

Drupal

כדאי לשקול שימוש במודול שמבצע אופטימיזציה ומצמצם את גודל התמונות שהעלית לאתר באופן אוטומטי, בלי לפגוע באיכות שלהן. כמו כן, חשוב לוודא שנעשה שימוש בסגנונות התמונות הרספונסיביות שסופקו על ידי Drupal לכל התמונות שמוצגות באתר.

Joomla

כדאי לשקול להשתמש בפלאגין לאופטימיזציית תמונות שדוחס את התמונות בלי לפגוע באיכות שלהן.

Magento

כדאי להשתמש בתוסף Magento של צד שלישי שמבצע אופטימיזציה של תמונות.

WordPress

כדאי לשקול להשתמש בפלאגין של WordPress לאופטימיזציית תמונות שדוחס את התמונות בלי לפגוע באיכות שלהן.

משאבים