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

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.

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

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