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

لا يعرض العنصر <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> استنادًا إلى مسافة يشغلها عنصر <picture> <img> بدلاً من تحديد حجم إطار العرض.

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

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