تشغيل Lighthouse
هذا الخلل صغير بما يكفي لكي يتم فحص صوره يدويًا. مع ذلك، بالنسبة إلى معظم المواقع الإلكترونية، من الضروري استخدام أداة مثل Lighthouse لبرمجة ذلك.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة .
- اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب مصباح الهداية.
- تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
- انقر على الزر إنشاء تقرير.
- ابحث عن نتائج تدقيق حجم الصور المناسب.
يوضّح تدقيق Lighthouse أنّه يجب تغيير حجم صورتَي هذه الصفحة.
حلّ المشكلة flower_logo.png
ابدأ من أعلى الصفحة وأصلِح صورة الشعار.
- فحص
flower_logo.png
في لوحة "العناصر" في أدوات مطوّري البرامج
في ما يلي رمز CSS الخاص بـ flower_logo.png
:
.logo {
width: 50px;
height: 50px;
}
يبلغ عرض CSS لهذه الصورة 50 بكسل، لذا يجب تغيير حجم flower_logo.png
ليطابق ذلك. يمكنك استخدام ImageMagick لتغيير حجم
الصورة لتلائم المساحة. ImageMagick هي أداة سطر أوامر لتعديل الصور تأتي pre-installed (مثبَّتة مسبقًا) في بيئة codelab.
- انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
- انقر على Terminal (ملاحظة: إذا لم يظهر زر Terminal، قد تحتاج إلى استخدام خيار "ملء الشاشة").
- في وحدة التحكّم، اكتب:
convert flower_logo.png -resize 50x50 flower_logo.png
Fix flower_photo.jpg
بعد ذلك، عليك إصلاح صورة الزهور البنفسجية.
- افحص
flower_photo.jpg
في لوحة عناصر "أدوات مطوري البرامج".
في ما يلي رمز CSS الخاص بـ flower_photo.jpg
:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
تضبط 50vw
عرض CSS لـ flower_photo.jpg
على "نصف عرض المتصفّح".
(1vw
يساوي %1 من عرض المتصفّح).
يعتمد الحجم المثالي لهذه الصورة على الجهاز الذي يتم عرضه عليه، لذلك عليك تغيير حجمها إلى حجم يناسب معظم المستخدمين. يمكنك الاطّلاع على بيانات الإحصاءات لمعرفة دقة الشاشة الشائعة بين المستخدمين:
تشير هذه البيانات إلى أنّ أكثر من%95 من زوّار هذا الموقع الإلكتروني يستخدمون دقة الشاشة التي تبلغ 1920 بكسل عرضًا أو أقل.
باستخدام هذه المعلومات، يمكننا احتساب عرض الصورة المطلوب: (1920 بكسل بالعرض) * (50% من عرض المتصفّح) = 960 بكسل
في درجات الدقة التي تزيد عن 1920 بكسل، سيتم تمديد الصورة لتغطي المنطقة. لا تزال الصورة التي تم تغيير حجمها كبيرة إلى حد ما، لذا يجب ألا تكون تأثيرات ذلك ملحوظة للغاية.
- استخدِم ImageMagick لتغيير حجم الصورة إلى 960 بكسل عرضًا. في نوع المحطة الطرفية:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
إعادة تشغيل Lighthouse
- أعِد إجراء عملية تدقيق الأداء في Lighthouse للتأكّد من أنّك غيّرت حجم الصور بنجاح.
… وتظهر رسالة الخطأ التالية: ما السبب؟
تُجري أداة Lighthouse اختباراتها على هاتف Nexus 5X. يحتوي هاتف Nexus 5x على شاشة بدقة 1080 × 1920.
بالنسبة إلى هاتف Nexus 5x، يكون الحجم الأمثل لصورة flower_photo.jpg
هو 540 بكسل
بالعرض (1080 بكسل * 5. هذا حجم أصغر بكثير من الصورة التي تم تغيير حجمها.
هل يجب تغيير حجم الصورة لتكون أصغر حجمًا؟ على الأرجح. ومع ذلك، فإنّ الإجابة عن هذا السؤال ليست واضحة دائمًا.
تتمثل المفاضلة هنا بين جودة الصورة على الأجهزة العالية الدقة و الأداء. من السهل المبالغة في تقدير مدى دقة فحص المستخدمين للصور، لذا من المحتمل أن تجعلها أصغر حجمًا، ولكن هناك حالات استخدام تُعدّ فيها جودة الصورة أكثر أهمية.
الخبر السار هو أنه يمكنك تجاوز هذه المفاضلة تمامًا باستخدام الصور سريعة الاستجابة لعرض أحجام صور متعددة. يمكنك الاطّلاع على مزيد من المعلومات حول ذلك في دليل الصور المتجاوبة مع مختلف الأجهزة.