يسرد قسم "الفرص" في تقرير Lighthouse جميع الصور في صفحتك التي لا تبلغ أحجامها بشكل مناسب، بالإضافة إلى المساحة التي يمكن توفيرها بالكيلوبايت (KiB). تغيير حجم هذه الصور لتوفير البيانات وتحسين وقت تحميل الصفحة:
كيفية احتساب Lighthouse للصور الكبيرة جدًا
لكل صورة على الصفحة، يقارن Lighthouse حجم الصورة المعروضة بحجم الصورة الفعلية. ويراعي الحجم المعروض أيضًا نسبة وحدات البكسل على الجهاز. إذا كان حجم الصورة المعروضة أصغر من حجمها الفعلي بمقدار 4 كيلوبايت على الأقل، تعني هذه الحالة أنّ الصورة لا تجتاز عملية التدقيق.
استراتيجيات لضبط حجم الصور بشكلٍ سليم
من الأفضل ألا تعرض صفحتك أبدًا صورًا أكبر من الحجم الذي يتم عرضه على شاشة المستخدم. وأي حجم أكبر من ذلك يؤدي إلى إهدار البايتات وتباطؤ وقت تحميل الصفحة.
تُعرف الاستراتيجية الرئيسية لعرض صور ذات حجم مناسب باسم "الصور المتجاوبة". باستخدام الصور المتجاوبة، يمكنك إنشاء نُسخ متعددة من كل صورة،
ثم تحديد النسخة التي تريد استخدامها في HTML أو CSS باستخدام طلبات البحث عن الوسائط، وقياسات مساحة العرض، وما إلى ذلك. بالإضافة إلى ذلك، RespImageLint هي إشارة مرجعية مفيدة لتحديد القيم المثلى للمعلَمتين srcset وsizes لصورك. اطّلِع على عرض صور متجاوبة لمعرفة مزيد من المعلومات عن هذه السمات.
شبكات توصيل المحتوى (CDN) للصور هي استراتيجية رئيسية أخرى لعرض الصور بالحجم المناسب. يمكنك اعتبار شبكات CDN للصور مثل واجهات برمجة تطبيقات خدمات الويب لتحويل الصور.
ويمكنك أيضًا استخدام تنسيقات الصور المستندة إلى المتجهات، مثل SVG. باستخدام عدد محدود من الرموز البرمجية، يمكن تغيير حجم صورة SVG إلى أي حجم. راجِع مقالة استبدال الرموز المركّبة بتنسيق SVG لمعرفة المزيد من المعلومات.
يمكن أن تساعد أدوات مثل gulp-responsive أو responsive-images-generator في أتمتة عملية تحويل صورة إلى تنسيقات متعددة. هناك أيضًا شبكات توصيل محتوى (CDN) للصور تتيح لك إنشاء نُسخ متعددة، سواء عند تحميل صورة أو طلبها من صفحتك.
إرشادات خاصة بالمجموعة
AMP
استخدِم ميزة المكوّن
amp-img
التي تتيح استخدام السمة
srcset
لتحديد مواد عرض الصور المطلوب استخدامها استنادًا إلى حجم الشاشة. يمكنك الاطّلاع أيضًا على الصور المتجاوبة باستخدام السمات srcset وsizes وheights.
Angular
ننصحك باستخدام الأداة BreakpointObserver في مجموعة تطوير المكوّنات (CDK) لإدارة النقاط الفاصلة للصور.
Drupal
يُرجى التأكّد من أنّك تستخدم أنماط الصور السريعة الاستجابة الأصلية والتي يوفّرها Drupal. استخدِم أنماط الصور السريعة الاستجابة عند عرض حقول الصور من خلال أوضاع العرض أو طرق العرض أو الصور التي يتم تحميلها من خلال محرِّر WYSIWYG.
Gatsby
استخدم المكوّن الإضافي gatsby-image لإنشاء صور متعددة أصغر حجمًا للهواتف الذكية والأجهزة اللوحية. ويمكنه أيضًا إنشاء عناصر نائبة لصور SVG لتحميل الصور ببطء وفعالية.
Joomla
يمكنك استخدام مكوّن إضافي للصور السريعة الاستجابة.
WordPress
يمكنك تحميل الصور مباشرةً من خلال مكتبة الوسائط للتأكّد
من توفّر أحجام الصور المطلوبة، ثم إدراجها من مكتبة الوسائط
أو استخدام أداة الصورة لضمان استخدام أفضل حجم للصورة
(بما في ذلك تلك الخاصة بنقاط الفواصل المتوافقة مع مختلف الأجهزة). يمكنك تجنُّب استخدام صور Full Size
إلا إذا كانت الأبعاد كافية لاستخدامها. اطّلِع على إدراج الصور في المشاركات والصفحات.