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