يسرد قسم "فرص التحسين" في تقرير Lighthouse جميع الصور بتنسيقات قديمة، ويعرض مقدار البيانات التي يمكن توفيرها من خلال عرض إصدارات AVIF من هذه الصور:
لماذا يجب عرض الصور بتنسيق AVIF أو WebP؟
تنسيقا AVIF وWebP هما تنسيقا صور يتميّزان بخصائص ضغط وجودة أفضل مقارنةً بتنسيقي JPEG وPNG الأقدم. إنّ ترميز صورك بهذه التنسيقات بدلاً من JPEG أو PNG يعني أنّه سيتم تحميلها بشكل أسرع واستهلاك كمية أقل من بيانات شبكة الجوّال.
يتوافق تنسيق AVIF مع Chrome وFirefox وOpera، ويوفر أحجام ملفات أصغر مقارنةً بالتنسيقات الأخرى التي تتضمّن إعدادات الجودة نفسها. يمكنك الاطّلاع على Codelab حول عرض صور بتنسيق AVIF للحصول على مزيد من المعلومات حول تنسيق 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 تلقائيًا من الصور التي تم تحميلها، وهذا لتحسين أوقات التحميل.
Joomla
يمكنك استخدام مكوّن إضافي أو خدمة تتيح لك تحويل صورك المحمَّلة إلى أفضل التنسيقات تلقائيًا.
Magento
عليك البحث عن سوق Magento للحصول على مجموعة متنوعة من إضافات الجهات الخارجية للاستفادة من تنسيقات الصور الأحدث.
iPhone
يُرجى العِلم أنّ صور webp وavif وفيديوهات webm لن تعمل على هواتف iPhone التي تعمل بإصدار أقدم من iOS 16.
WordPress
يمكنك استخدام مكوِّن إضافي أو خدمة تتيح لك تحويل صورك المحمَّلة إلى أفضل التنسيقات تلقائيًا.