בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל התמונות בפורמטים ישנים יותר של תמונות, ואפשר לראות מהן החיסכון הפוטנציאלי כתוצאה מהצגת גרסאות AVIF של התמונות האלה:
למה כדאי להציג תמונות בפורמט AVIF או WebP?
AVIF ו-WebP הם פורמטים של תמונות בעלי מאפייני דחיסה ואיכות טובים יותר בהשוואה לפורמטים ישנים יותר של JPEG ו-PNG. אם מקודדים את התמונות בפורמטים האלה במקום בפורמט JPEG או PNG, הן ייטענו מהר יותר ויצרוך פחות נתונים סלולריים.
פורמט AVIF נתמך ב-Chrome, Firefox ו-Opera, ומציע קבצים קטנים יותר בהשוואה לפורמטים אחרים עם אותן הגדרות איכות. מידע נוסף על AVIF זמין במאמר הצגת Codelab של תמונות AVIF.
WebP נתמך בגרסאות האחרונות של Chrome, Firefox, Safari, Edge ו-Opera ומספק דחיסת נתונים טובה יותר מסוג 'הפסד' ו'ללא אובדן נתונים' לתמונות באינטרנט. למידע נוסף על WebP, ראו פורמט חדש של תמונות לאינטרנט.
איך מערכת Lighthouse מחשבת חיסכון פוטנציאלי
מערכת Lighthouse אוספת כל תמונה מסוג BMP, JPEG ו-PNG בדף, ממירה כל תמונה ל-WebP, ומפיקה הערכה של גודל קובץ ה-AVIF, ומדווחת על החיסכון הפוטנציאלי על סמך נתוני ההמרות.
תאימות דפדפן
WebP נתמך בגרסאות האחרונות של Chrome, Firefox, Safari, Edge ו-Opera, ואילו התמיכה ב-AVIF מוגבלת יותר. יהיה עליך להציג תמונה חלופית מסוג PNG או JPEG לתמיכה בדפדפן ישן. במאמר איך מזהים תמיכה בדפדפן ל-WebP? תוכלו למצוא סקירה כללית של שיטות הגיבוי והרשימה שבהמשך כדי לתמוך בפורמטים של תמונות בדפדפן.
כדי לראות את התמיכה הנוכחית בדפדפן עבור כל פורמט מודרני, עיין בערכים הבאים:
הנחיות ספציפיות למקבץ
AMP
כדאי להציג את כל רכיבי amp-img בפורמטים של WebP ולציין חלופה מתאימה לדפדפנים אחרים.
Drupal
כדאי לשקול להתקין ולהגדיר מודול כדי להשתמש בפורמטים של תמונות WebP באתר. המודולים האלה יוצרים באופן אוטומטי גרסת WebP של התמונות שהעליתם, כדי לבצע אופטימיזציה של זמני הטעינה.
ג'ומלה
כדאי לשקול להשתמש בplugin או בשירות שימירו אוטומטית את התמונות שהועלו לפורמט האופטימלי.
Magento
ב-Magento Marketplace אפשר למצוא מגוון תוספים של צד שלישי כדי להשתמש בפורמטים חדשים של תמונות.
iPhone
חשוב לזכור ש-webp, תמונות avif וסרטוני webm לא יפעלו במכשירי iPhone שקודמים ל-iOS 16.
WordPress
כדאי להשתמש בplugin או בשירות שימירו אוטומטית את התמונות שהועלו לפורמט האופטימלי.