عرض الصور بالأبعاد الصحيحة

Katie Hempenius
Katie Hempenius

هذا الخلل صغير بما يكفي لكي يتم فحص صوره يدويًا. مع ذلك، بالنسبة إلى معظم المواقع الإلكترونية، من الضروري استخدام أداة مثل Lighthouse لبرمجة ذلك.

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  3. انقر على علامة التبويب مصباح الهداية.
  4. تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
  5. انقر على الزر إنشاء تقرير.
  6. ابحث عن نتائج تدقيق حجم الصور المناسب.

تعذُّر إكمال عملية تدقيق الصور ذات الحجم المناسب في Lighthouse

يوضّح تدقيق 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.

  1. انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
  2. انقر على Terminal (ملاحظة: إذا لم يظهر زر Terminal، قد تحتاج إلى استخدام خيار "ملء الشاشة").
  3. في وحدة التحكّم، اكتب:
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 من عرض المتصفّح).

يعتمد الحجم المثالي لهذه الصورة على الجهاز الذي يتم عرضه عليه، لذلك عليك تغيير حجمها إلى حجم يناسب معظم المستخدمين. يمكنك الاطّلاع على بيانات الإحصاءات لمعرفة دقة الشاشة الشائعة بين المستخدمين:

إحصاءات Google لدرجات دقة الشاشة

تشير هذه البيانات إلى أنّ أكثر من%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 في حجم الصور بشكلٍ مناسب.

… وتظهر رسالة الخطأ التالية: ما السبب؟

تُجري أداة Lighthouse اختباراتها على هاتف Nexus 5X. يحتوي هاتف Nexus 5x على شاشة بدقة 1080 × 1920. بالنسبة إلى هاتف Nexus 5x، يكون الحجم الأمثل لصورة flower_photo.jpg هو 540 بكسل بالعرض (1080 بكسل * 5. هذا حجم أصغر بكثير من الصورة التي تم تغيير حجمها.

هل يجب تغيير حجم الصورة لتكون أصغر حجمًا؟ على الأرجح. ومع ذلك، فإنّ الإجابة عن هذا السؤال ليست واضحة دائمًا.

تتمثل المفاضلة هنا بين جودة الصورة على الأجهزة العالية الدقة و الأداء. من السهل المبالغة في تقدير مدى دقة فحص المستخدمين للصور، لذا من المحتمل أن تجعلها أصغر حجمًا، ولكن هناك حالات استخدام تُعدّ فيها جودة الصورة أكثر أهمية.

الخبر السار هو أنه يمكنك تجاوز هذه المفاضلة تمامًا باستخدام الصور سريعة الاستجابة لعرض أحجام صور متعددة. يمكنك الاطّلاع على مزيد من المعلومات حول ذلك في دليل الصور المتجاوبة مع مختلف الأجهزة.