يسرد قسم "الفرص" في تقرير Lighthouse جميع الصور غير المحسَّنة، مع إمكانية توفير مبلغ كيبيبايت (KiB). يمكنك تحسين هذه الصور كي يتم تحميل الصفحة بشكل أسرع وتستهلك بيانات أقل:
الآلية المتّبَعة في أداة Lighthouse تشير إلى أنّ الصور يمكن تحسينها
تجمع أداة Lighthouse جميع الصور بتنسيق JPEG أو BMP على الصفحة، وتضبط مستوى الضغط لكل صورة على 85، ثم تقارن النسخة الأصلية بالنسخة المضغوطة. إذا كانت مقدار التوفير المُحتمَل 4 كيلوبايت أو أكثر، تضع أداة Lighthouse علامة على الصورة بأنّها قابلة للتحسين.
كيفية تحسين الصور
هناك العديد من الخطوات التي يمكنك اتخاذها لتحسين صورك، بما في ذلك:
- استخدام شبكات توصيل المحتوى (CDN) للصور
- ضغط الصور
- استبدال ملفات GIF المتحركة بالفيديو
- التحميل الكسول للصور
- عرض الصور المتجاوبة مع مختلف الأجهزة
- عرض الصور بالأبعاد الصحيحة
- استخدام صور WebP
تحسين الصور باستخدام أدوات واجهة المستخدم الرسومية
الطريقة الأخرى هي تشغيل صورك من خلال محسِّن تقوم بتثبيته على جهاز الكمبيوتر الخاص بك وتشغيلها كواجهة مستخدم تصويرية. على سبيل المثال، باستخدام ImageOptim، يمكنك سحب الصور وإفلاتها في واجهة المستخدم، ثم ضغط الصور تلقائيًا بدون التأثير سلبًا في الجودة بشكل ملحوظ. إذا كنت تدير موقعًا إلكترونيًا صغيرًا ويمكنك تحسين جميع الصور يدويًا، قد يكون هذا الخيار مناسبًا بدرجة كافية.
Squoosh هو خيار آخر. يتولى فريق Google Web DevRel إدارة Squoosh.
إرشادات خاصة بحِزم البيانات
Drupal
يمكنك استخدام وحدة تعمل تلقائيًا على تحسين وخفض حجم الصور التي يتم تحميلها من خلال الموقع الإلكتروني مع الحفاظ على الجودة. احرص أيضًا على استخدام أنماط الصور السريعة الاستجابة المدمجة في Drupal (المتوفّرة في Drupal 8 والإصدارات الأحدث) لجميع الصور المعروضة على الموقع الإلكتروني.
Joomla
يمكنك استخدام مكوِّن إضافي لتحسين الصور لضغط صورك مع الحفاظ على الجودة.
Magento
ننصحك باستخدام إضافة Magento تابعة لجهة خارجية تعمل على تحسين الصور.
WordPress
يمكنك استخدام مكون WordPress الإضافي لتحسين الصور الذي يضغط صورك مع الحفاظ على الجودة.