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

والعنصر <picture> لا يعرض أي عنصر من تلقاء نفسه، ولكنّه يعمل كمحرّك قرار لعنصر <img> داخلي ويخبره بما يجب عرضه. يتّبع <picture> سبقًا تم ضبطه من قبل العنصرَين <audio> و<video>: عنصر تضمين يحتوي على عناصر <source> فردية.

<picture>
   <source …>
   <source …>
    <img …>
</picture …>

توفّر لك علامة <img> الداخلية أيضًا نمطًا احتياطيًا موثوقًا به للمتصفّحات القديمة ولا تتوافق مع الصور المتجاوبة مع مختلف الأجهزة: سيتم تجاهل العنصر <picture> من خلال متصفّح المستخدم. ويتم بعد ذلك أيضًا تجاهل عناصر <source> لأنّ المتصفّح لن يتعرّف عليها على الإطلاق أو لن يقدّم سياقًا مفيدًا لها بدون العنصر الرئيسي <video> أو <audio>. سيتعرّف أي متصفّح على عنصر <img> الداخلي، وسيتم عرض المصدر المحدّد في src كما هو متوقع.

صور "موجّهة للفنون" مع <picture>

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

ولكن عند تصغيرها ليناسب إطارات عرض صغيرة، فقد تفقد التركيز المركزي للصورة:

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

ويمكن إجراء هذا النوع من "الاقتصاص" من خلال CSS، إلا أنه قد يترك المستخدم يطلب جميع البيانات التي تشكل تلك الصورة، على الرغم من أنه قد لا ينتهي بمشاهدته أبدًا.

يحتوي كل عنصر source على سمات تحدّد شروط اختيار source: media التي تقبل الاستعلام عن الوسائط، وtype التي تقبل نوع وسائط (كان يُعرف سابقًا باسم "نوع MIME"). تم اختيار أول <source> في الترتيب المصدر لمطابقة سياق التصفُّح الحالي للمستخدم، وسيتم استخدام محتوى السمة srcset في source لتحديد المرشحين المناسبين لذلك السياق. في هذا المثال، سيتم اختيار أول source ذي السمة media التي تتطابق مع حجم إطار العرض الخاص بالمستخدم:

<picture>
  <source media="(min-width: 1200px)" srcset="wide-crop.jpg">
  <img src="close-crop.jpg" alt="…">
</picture>

يجب دائمًا تحديد آخر عنصر من img بالترتيب الداخلي، وإذا لم يتطابق أي من عناصر source مع معايير media أو type، سيتم استخدام الصورة كمصدر "تلقائي". إذا كنت تستخدم min-width استعلام عن الوسائط، عليك الحصول على أكبر المصادر أولاً، كما هو موضح في الرمز السابق. عند استخدام طلبات البحث عن الوسائط max-width، يجب وضع أصغر مصدر أولاً.

<picture>
   <source media="(max-width: 400px)" srcset="mid-bp.jpg">
   <source media="(max-width: 800px)" srcset="high-bp.jpg">
   <img src="highest-bp.jpg" alt="…">
</picture>

عند اختيار مصدر استنادًا إلى المعايير التي حدّدتها، يتم تمرير السمة srcset في source إلى <img> كما لو كان محدّدًا في <img> نفسها، ما يعني أنّه يمكنك استخدام sizes لتحسين مصادر الصور الموجّهة للأعمال أيضًا.

<picture>
   <source media="(min-width: 800px)" srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w">
   <source srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w">
   <img src="fallback.jpg" alt="…" sizes="calc(100vw - 2em)">
</picture>

وبالطبع، تظهر مشكلة في الأداء بسبب صورة بنسب يمكن أن تختلف حسب العنصر <source> المحدّد: تتوافق السمة <img> مع سمة width وheight واحدة فقط، ولكن في حال عدم تضمين هاتين السمتَين يمكن أن يؤدي ذلك إلى ترك انطباع سيئ لدى المستخدم بشكل ملحوظ. ولتفسير ذلك، فإنّ إضافة حديثة نسبيًا إلى مواصفات HTML تتيح استخدام سمتَي height وwidth على عناصر <source>، إلا أنّ هذه إضافة حديثة نسبيًا ولكنها مقبولة جيدًا. تعمل هذه الميزات على تقليل متغيّرات التصميم كما هي الحال في <img>، مع حجز المساحة المناسبة في التنسيق لأي عنصر <source> يتم اختياره.

<picture>
   <source
      media="(min-width: 800px)"
      srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w"
      width="1600"
      height="800">
   <img src="fallback.jpg"
      srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w"
      sizes="calc(100vw - 2em)"
      width="1200"
      height="750"
      alt="…">
</picture>

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

<picture>
   <source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg">
   <img srcset="hero-light.jpg">
</picture>

السمة type

تسمح لك السمة type باستخدام محرك اتخاذ القرار أحادي الطلب للعنصر <picture> لعرض تنسيقات الصور فقط على المتصفّحات المتوافقة معها.

كما تعلّمت في تنسيقات الصور وضغطها، لن يتم التعرّف على الترميز الذي لا يمكن للمتصفح تحليله كبيانات صور.

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

   <img src="image.webp"
    data-fallback="image.jpg"
    onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
    alt="...">

باستخدام هذا النمط، سيستمر إرسال طلب إلى image.webp في كل متصفّح، ما يعني أنّه سيتم إهدار عملية النقل في المتصفّحات بدون التوافق مع WebP. إذا تعذّر على المتصفِّحات بعد ذلك تحليل ترميز WebP، ستطرح حدث onerror وستستبدل قيمة data-fallback إلى src. لقد كان حلاً مهدرًا، ولكن مرة أخرى، كانت الأساليب مثل هذا الخيار الوحيد المتاح في الواجهة الأمامية. تذكر أن المتصفح يبدأ في إرسال طلبات للصور قبل أن تتوفر فرصة تشغيل أي نص برمجي مخصص - أو حتى تحليله - لذا لا يمكننا منع هذه العملية.

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

في السمة type، عليك إدخال نوع الوسائط (المعروف سابقًا باسم نوع MIME) لمصدر الصورة المحدّد في السمة srcset لكل <source>. يوفّر ذلك للمتصفح جميع المعلومات التي يحتاج إليها ليحدد فورًا ما إذا كان يمكن فك ترميز الصورة المقترَحة من خلال source بدون تقديم أي طلبات خارجية. وفي حال عدم التعرّف على نوع الوسائط، يتم تجاهل <source> وجميع ترشيحاته وينتقل المتصفّح إلى العمل.

<picture>
 <source type="image/webp" srcset="pic.webp">
 <img src="pic.jpg" alt="...">
</picture>

سيتعرّف هنا أي متصفّح يتيح ترميز WebP على نوع الوسائط image/webp المحدّد في السمة type للعنصر <source>، ويختار العنصر <source>، وبما أنّنا وفّرنا عنصرًا واحدًا فقط في الترميز srcset، يوجّه العنصر <img> الداخلي إلى طلب pic.webp ونقله وعرضه. أي متصفّح لا يتوافق مع WebP سيتجاهل source، وفي حال عدم توفّر أيّ تعليمات بالعكس، سيعرض <img> محتوى src على النحو المعتاد منذ 1992. ولست بحاجة بالطبع إلى تحديد عنصر <source> ثانٍ باستخدام type="image/jpeg" هنا، ويمكنك بالطبع إتاحة استخدام ملفات JPEG بشكل عام.

وبغض النظر عن سياق تصفُّح المستخدم، يتم تحقيق كل ذلك من خلال نقل ملفات واحد، وبدون إهدار معدل نقل بيانات على مصادر الصور التي لا يمكن عرضها. وهذا أمر إيجابي أيضًا: حيث ستكون تنسيقات الملفات الأحدث والأكثر فعاليةً مزوّدة بأنواع وسائط خاصة بها، وسنتمكّن من الاستفادة منها بفضل ميزة picture بدون استخدام JavaScript أو تبعيات من جهة الخادم وبجميع سرعة <img>.

مستقبل الصور المتجاوبة مع مختلف الأجهزة

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

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

ومع ذلك، بما أنّ هذه الميزات قد تم توفيرها في النظام الأساسي للويب، تم تقديم طريقة أصلية لتأجيل طلبات الصور. لا يتم طلب عناصر <img> التي تتضمّن السمة loading="lazy" إلا بعد معرفة تنسيق الصفحة، وذلك من أجل تأجيل طلبات الصور خارج إطار العرض الأولي للمستخدم حتى وقت لاحق من عملية عرض الصفحة، ما قد يؤدي إلى تجنُّب الطلبات غير الضرورية. وبما أنّ المتصفّح يفهم تنسيق الصفحة تمامًا وقت تقديم هذه الطلبات، تم اقتراح السمة sizes="auto" كإضافة إلى مواصفات HTML لتجنّب الأعمال الروتينية لسمات sizes المكتوبة يدويًا في هذه الحالات.

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

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

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

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