الخلاصة

  • نشر W3C في فبراير 2013 أول مسودة عامة لعنصر picture ومسودة لحالات استخدام الصور المتجاوبة، بالتعاون مع Responsive Images Community Group.
  • يتيح HTML الحالي اختيار ملفات مختلفة للحجم والكثافة عبر srcset وsizes، ويتيح تغيير التكوين المقصود عبر picture وsource media.

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

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

في 26 فبراير 2013 أعلن W3C مسودتين عامتين أوليين. تناولت الأولى عنصر picture، وجمعت الثانية استخدامات الصور المتجاوبة ومتطلباتها. طُورت الوثيقتان بالتعاون مع Responsive Images Community Group. كان ترتيب السؤالين مفيداً: ما المشكلة التي يراها القارئ في الصورة أولاً، ثم بأي لغة يمكن وصف الحل للمتصفح؟

وصفت المسودة الأولى لعنصر picture حاوية تحدد استعلامات الوسائط في CSS مصدر الصورة فيها. تظهر الخيارات وشروطها في HTML بحيث يراها المتصفح وهو يقرأ الصفحة. كانت تلك مسودة عمل قابلة لتغيير التفاصيل. أما الفكرة العملية فكانت واضحة: يجهز فريق النشر الصور الممكنة مسبقاً، ويختار المتصفح وفق البيئة التي أمامه.

توضح وثيقة حالات الاستخدام التي نشرها W3C في نوفمبر 2013 أن كلمة «متجاوبة» تخفي مهمتين مختلفتين. الأولى اختيار الدقة: المشهد نفسه بملفات تختلف في عدد البكسلات لتناسب كثافة العرض والمساحة المتاحة. الثانية هي الإخراج الفني للصورة: إذا صار الإطار ضيقاً، يحتاج الموضوع إلى قص أقرب. قد يحتاج وجه متحدث في صورة جماعية إلى مساحة أكبر، وقد تحتاج المنارة إلى بحر أقل حولها. نسخة أعلى دقة من المشهد الواسع تقدم نقطة حمراء حادة التفاصيل، وتتركها نقطة.

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

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

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

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

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