الصور المتجاوبة

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

في هذه الوحدة، ستتعلم المنهجين. سنتناول أولاً srcset وsizes، وكيفية مساعدة المتصفّح في اتخاذ القرار الأنسب استنادًا إلى ما يعرفه عن المستخدم وجهازه ووضع التصفّح الخاص به. ستكتشف بعد ذلك عنصر <picture>، الذي يسمح بالتحكّم الصريح في اختيار المصدر استنادًا إلى عوامل مثل حجم إطار العرض ودعم المتصفح لتنسيقات الصور.

بناء الجملة الوصفي

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

للسماح للمتصفحات بإجراء هذه الاختيارات، تسمح لك علامة srcset بتزويد المتصفّح بقائمة بالمصادر المحتملة لتعبئة <img> واحدة، بينما يتيح لك الحقل sizes تزويد المتصفّح بمعلومات حول طريقة عرض <img>. ستتعرف على كيفية استخدام هذه في الوحدة التالية.

الصياغة الإرشادية

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

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

وفي هذه الحالات، تريد التحكم بشكل صريح في المصدر الذي يتم عرضه ووقت عرضه. هذه ضمانات بأنّه لا يمكن لـ srcset وsizes تقديمهما بسبب التصميم. للحصول على عنصر التحكّم هذا، سنحتاج إلى استخدام العنصر <picture>.