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

كاتي هيمبينيوس
"كاتي هيمبينيوس"
X

تشغيل Lighthouse

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

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
  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 هي أداة واجهة سطر الأوامر لتعديل الصور تكون مثبّتة مسبقًا في بيئة الدرس التطبيقي حول الترميز.

  1. انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
  2. انقر على المحطة الطرفية (ملاحظة: إذا لم يظهر زر المحطة الطرفية، فقد تحتاج إلى استخدام خيار ملء الشاشة).
  3. في وحدة التحكم، اكتب:
convert flower_logo.png -resize 50x50 flower_logo.png

إصلاح الصورة_الزهرة.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

... وقد يفشل! Why is that?‎

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

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

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

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