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

Katie Hempenius
Katie Hempenius

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

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  3. انقر على علامة التبويب Lighthouse.
  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 في لوحة عناصر DevTools.

لوحة عناصر "أدوات مطوّري البرامج"

في ما يلي رمز 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). هذا أصغر بكثير من الصورة التي تم تغيير حجمها.

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

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

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