استخدام أدوات وصف الكثافة

Katie Hempenius

استكشاف هذا العرض التوضيحي

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

يمكنك استخدام محاكي الجهاز لإجراء ذلك. إذا كنت تبحث عن كثافة شاشة معيّنة، إليك بعض الأجهزة التي يمكنك تجربتها:

• يُرجى الاطّلاع على index.html للحصول على الرمز الذي يُتيح إجراء ذلك.

كيف تعمل هذه الميزة؟

قد لا يكون مفهوم أوصاف الكثافة مألوفًا لمعظم الأشخاص. لفهمها بشكلٍ أفضل، من المفيد معرفة بعض المعلومات الأساسية عن كيفية عمل المتصفّح مع البكسلات.

ما هي البكسلات؟

لنبدأ من البداية بتعريف معنى "البكسل". قد يبدو هذا التعريف بسيطًا، ولكن يمكن أن يكون لكلمة "البكسل" العديد من المعاني:

وحدة البكسل على الجهاز (المعروفة أيضًا باسم "وحدة البكسل الفعلية")

أصغر نقطة لون يمكن عرضها على جهاز.

البكسل المنطقي

معلومات تحدّد اللون في موقع معيّن على شبكة. لا يملك هذا النوع من الوحدات حجمًا فعليًا.

بكسل CSS

وتحدّد مواصفات CSS البكسل على أنّه وحدة قياس مادي. بكسل واحد = 1/96 من البوصة

كثافة البكسل

تقيس كثافة وحدات البكسل (المعروفة أيضًا باسم "كثافة الشاشة" أو "كثافة الشاشة") كثافة وحدات البكسل في الجهاز في مساحة فعلية معيّنة. ويتم قياسها عادةً باستخدام وحدات البكسل لكل بوصة (ppi).

على مدار سنوات عديدة، كانت كثافة 96 بكسل لكل بوصة هي الكثافة الشائعة جدًا للشاشة (من هنا تحدّد CSS بكسلًا على أنّه 1/96 من البوصة). وبدءًا من الثمانينيات، أصبح هذا هو الدقة التلقائية لنظام التشغيل Windows. بالإضافة إلى ذلك، كانت درجة الدقة لشاشات CRT.

بدأ هذا الوضع يتغيّر عندما أصبحت شاشات LED شائعة في 2000. على وجه التحديد، أثرت شركة Apple بشكل كبير في السوق في عام 2010 عندما طرحت شاشات Retina. كانت دقة هذه الشاشات 192 نقطة لكل بوصة على الأقل، أي ضعف دقة الشاشات "العادية" (192 نقطة لكل بوصة/96 نقطة لكل بوصة = 2).

window.devicePixelRatio

مع طرح تكنولوجيات جديدة للعرض، بدأت "وحدات بكسل الجهاز" تختلف في الحجم الفعلي والشكل وبالتالي لم تعُد بالحجم نفسه مثل "وحدات بكسل CSS". أدّت الحاجة إلى تحديد العلاقة بين حجم "بكسلات الجهاز" و "بكسلات CSS" إلى تقديم devicePixelRatio (المعروفة أحيانًا باسم "نسبة بكسل CSS").

devicePixelRatio تحدِّد العلاقة بين وحدات بكسل الجهاز ووحدات بكسل CSS لجهاز معيّن. يمتلك جهاز بكثافة 192 بكسل لكل بوصة قيمة devicePixelRatio تبلغ 2 (192 بكسل لكل بوصة/96 بكسل لكل بوصة = 2) لأنّ "بكسلَين من شاشة الجهاز يساويان بكسلًا واحدًا في CSS".

في الوقت الحالي، تتراوح نسبة وحدات البكسل على الجهاز بين 1.0 و4.0 في معظم الأجهزة.

• يمكنك تحديد كثافة وحدات البكسل لجهاز معيّن عن طريق كتابة window.devicePixelRatio في وحدة التحكّم.

• اطّلِع على هذا الجدول للاطّلاع على نسب وحدات البكسل في الأجهزة الشائعة. تتراوح معظمها بين 1.0 و4.0.

كيف يمكنك تطبيق هذه المعلومات؟

ضبط حجم الصور استنادًا إلى نسب وحدات البكسل على الجهاز

لكي تظهر الصور بأفضل شكل على الشاشات العالية الدقة، يجب تقديم نُسخ مختلفة من الصور لمختلف devicePixelRatios.

ملاحظات:

• إنّ أبعاد البكسل المدرَجة في برامج تعديل الصور وأدلة الملفات وغيرها من الأماكن هي قياس لوحدات البكسل المنطقية.
• بالنسبة إلى الشاشات ذات الدقة العالية والشاشات الأكبر حجمًا، ستحتاج إلى صور بقياسات أكبر. إنّ مجرد تكبير الصور الأصغر حجمًا يبطل الغرض من عرض نُسخ متعددة من الصور. كان المتصفّح سينفّذ ذلك على أي حال في حال عدم تقديم صورة عالية الدقة.

استخدام أوصاف الكثافة لعرض صور
متعددة

يمكن استخدام أوصاف الكثافة مع السمة "srcset " لعرض صور مختلفة لقيم devicePixelRatio المختلفة.

• اطّلِع على ملف index.html ولاحظ عنصر <img>.

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

يوضّح هذا المثال ما يلي:

• ‫1x و2x و3x هي جميعًا أوصاف كثافة تُعلم المتصفّح بكثافة البكسل المخصّصة للصورة. ويؤدي ذلك إلى عدم حاجة المتصفّح إلى تنزيل صورة لتحديد هذه المعلومات.
• يمكن للمتصفّح الاختيار من بين ثلاث صور: flower-1x.jpg (مخصّصة للمتصفّحات التي تبلغ كثافة وحدات البكسل فيها 1.0)، وflower-2x.jpg (مخصّصة للمتصفّحات التي تبلغ كثافة وحدات البكسل فيها 2.0)، وflower-3x.jpg (مخصّصة للمتصفّحات التي تبلغ كثافة وحدات البكسل فيها 3.0).
• flower.jpg هي الصورة الاحتياطية للمتصفّحات التي لا تتوافق مع srcset.

كيفية استخدام هذه الميزة:

• استخدِم devicePixelRatio ووحدة x لكتابة أوصاف الكثافة. على سبيل المثال، سيتم كتابة وصف الكثافة للعديد من شاشات Retina (window.devicePixelRatio = 2) على النحو التالي: 2x.
• إذا لم يتم تقديم وصف للكثافة، يتم افتراض أنّه 1x.
• إنّ تضمين أوصاف الكثافة في أسماء الملفات هو اصطلاح شائع (والذي سيساعدك في تتبُّع الملفات)، ولكنه ليس ضروريًا. يمكن أن يكون للصور أي اسمملف.
• ليس عليك تضمين سمة sizes. لا يتم استخدام السمة sizes إلا مع أوصاف العرض.