عرض الصور بتنسيقات حديثة

يسرد قسم "الفرص" في تقرير Lighthouse جميع الصور بتنسيقات الصور القديمة، ويعرض التوفيرات المحتملة التي تم تحقيقها من خلال عرض إصدارات AVIF من هذه الصور:

لقطة شاشة لتدقيق أداة Lighthouse الخاصة بعرض الصور بالتنسيقات الحديثة

ما أهمية عرض الصور بتنسيق AVIF أو WebP؟

AVIF وWebP هما تنسيقان للصور يتميزان بخصائص ضغط وجودة فائقة مقارنةً بصيغهما القديمة بتنسيق JPEG وPNG. إنّ ترميز الصور بهذه التنسيقات بدلاً من JPEG أو PNG يعني أنه سيتم تحميلها بشكل أسرع وتستهلك كمية أقل من بيانات شبكة الجوّال.

يتوفر AVIF في Chrome وFirefox وOpera، ويعرض أحجام ملفات أصغر مقارنةً بالتنسيقات الأخرى التي لها نفس إعدادات الجودة. يمكنك الاطّلاع على الدرس التطبيقي حول ترميز صور 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

ويمكنك استخدام plugin أو خدمة تتيح لك تحويل صورك المحمَّلة إلى أفضل التنسيقات تلقائيًا.

Magento

ننصحك بالبحث في سوق Magento عن مجموعة متنوعة من إضافات الجهات الخارجية للاستفادة من تنسيقات الصور الأحدث.

iPhone

تجدر الإشارة إلى أنّ فيديوهات Webp وصور avif وفيديوهات Webm لن تعمل على هواتف iPhone التي تعمل بالإصدارات الأقدم من نظام التشغيل iOS 16.

WordPress

يمكنك استخدام plugin أو خدمة تتيح لك تحويل صورك المحمَّلة إلى أفضل التنسيقات تلقائيًا.

المراجِع