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

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

إنّه سؤال كبير — وبالتأكيد أكثر مما نريد أخذه في الاعتبار عند ترميز صورة على الويب ويتطلّب إجراء ذلك بشكل جيد معلومات أكثر مما يمكننا الوصول إليه.

وصف الكثافة باستخدام "x"

ويشغل <img> ذو العرض الثابت المساحة نفسها من إطار العرض في أي سياق تصفّح، بغض النظر عن كثافة شاشة المستخدم، أي عدد وحدات البكسل الفعلية التي تحافظ على الشاشة. على سبيل المثال، تشغل الصورة التي لها عرض 400px كامل إطار عرض المتصفّح بالكامل تقريبًا على كلّ من هاتف Google Pixel الأصلي وهاتف Pixel 6 Pro الأحدث. يتضمّن كلا الجهازين إطار عرض عريض بحجم 412px بكسل منطقي.

يتميز هاتف Pixel 6 Pro بشاشة أكثر وضوحًا، على الرغم من ذلك، تكون دقة شاشة 6 Pro الفعلية 1440 × 3120 بكسل، بينما تبلغ دقة هواتف Pixel 1080 × 1920 بكسل، أي عدد وحدات البكسل في الجهاز التي تتألف منها الشاشة نفسها.

النسبة بين وحدات البكسل المنطقية للجهاز ووحدات البكسل الفعلية هي نسبة وحدات البكسل في الجهاز لهذه الشاشة (DPR). يتم حساب تنسيق DPR عن طريق قسمة درجة دقة الشاشة الفعلية للجهاز على بكسلات CSS لإطار العرض.

إذًا، سجّلت هاتف Pixel الأصلي 2.6 نقطة، في حين أنّ معدّل تحديث الشاشة في هاتف Pixel 6 Pro هو 3.5.

تبلغ درجة الدقة المادية للشاشة ضِعف درجة الدقة المنطقية، وهو هاتف iPhone 4، وهو أول جهاز مُزوَّد بتقنية DPR أكبر من 1. كان لدى أي جهاز سابق لـ iPhone 4 مُبرِغ ديناميكي بنسبة 1: بكسل منطقي واحد إلى بكسل فعلي واحد.

إذا شاهدت هذه الصورة بعرض 400px على جهاز عرض يحتوي على رقم نسخ مطابق بنسبة 2، فسيتم عرض كل بكسل منطقي على أربع وحدات بكسل فعلية للشاشة: اثنان أفقي واثنان عموديان. لا تستفيد الصورة من العرض العالي الكثافة، إذ إنّها ستبدو كما هي الحال على شاشة تتضمّن نسخة مضغوطة بتنسيق 1. من المؤكّد أنّ أي شيء "يرسمه" محرّك العرض في المتصفح، مثل النص أو أشكال CSS أو الرسومات الموجّهة التي يمكن تغيير حجمها (SVG)، سيتم رسمه بما يتوافق مع الشاشة ذات الكثافة العالية. ولكن كما تعلّمت من تنسيقات الصور وضغطها، تكون الصور النقطية شبكات ثابتة من وحدات البكسل. على الرغم من أنّ الصورة النقطية التي يتم تكبيرها لتلائم العرض العالي الكثافة ستبدو بدقة منخفضة مقارنةً بالصفحة المحيطة بها، قد لا تكون واضحة دائمًا.

لمنع زيادة حجم الصورة، يجب أن يكون عرض الصورة التي يتم عرضها أساسيًا لا يقل عن 800 بكسل. عند تصغيره ليناسب مساحة بعرض 400 بكسل منطقي، يكون مصدر الصورة البالغ 800 بكسل له ضعف كثافة وحدات البكسل - وسيبدو العرض جميلاً ودقيقًا على شاشة العرض 2

وبما أنّ الشاشة التي تحتوي على بطاقة دي بي سي (1) لا يمكنها الاستفادة من الكثافة المتزايدة للصورة، سيتم تصغيرها لتتوافق مع الشاشة، كما أنّ الصورة التي تم تصغيرها ستبدو على ما يرام. على الشاشة المنخفضة الكثافة، تبدو الصورة المناسبة للعرض العالي الكثافة مثل أي صورة أخرى منخفضة الكثافة.

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

قد تعتقد أنّ الأجهزة الجوّالة التي يكون معدل تكرارها 1 (DPR) نادرة جدًا، مع أنّها لا تزال شائعة في سياقات التصفّح "على أجهزة الكمبيوتر المكتبي". وفقًا للبيانات التي شاركها مات هوبز، إنّ 18% من جلسات التصفّح على GOV.UK من تشرين الثاني (نوفمبر) 2022 أبلغَت عن تسجيل DPR بنسبة 1. وعلى الرغم من أنّ الصور العالية الكثافة قد تبدو على النحو الذي قد يتوقّعه هؤلاء المستخدمون، ستكون بتكلفة معالجة ومعدّل نقل بيانات أعلى بكثير، وهي مصدر قلق خاص للمستخدمين على الأجهزة القديمة والأقل قوة التي لا يزال من المحتمل أن تتوفّر بها شاشات منخفضة الكثافة.

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

تحدد السمة srcset واحدًا أو أكثر من المرشحين المفصولين بفواصل لعرض صورة. ويتألّف كل عنصر من شيئين: عنوان URL كما تفعل في src، وبنية تصف مصدر الصورة هذا. يتم وصف كل عنصر مرشّح في srcset من خلال العرض المتأصل ("بنية w") أو الكثافة المقصودة (بنية "x").

بنية x هي اختصار لعبارة "هذا المصدر مناسب للعرض بهذه الكثافة"، ويكون عنصر مرشح متبوعًا بـ 2x مناسبًا للعرض الذي يحتوي على رقم نسخ طبق الأصل (DPR) 2.

<img src="low-density.jpg" srcset="double-density.jpg 2x" alt="...">

سيظهر على المتصفِّحات المتوافقة مع srcset اثنين من المرشّحين: double-density.jpg الذي يصفه 2x بأنّه مناسب للشاشات التي تتضمّن قيمة DPR بقيمة 2، وlow-density.jpg في السمة src. إذا لم يتم العثور على أي نتائج أكثر ملاءمة في srcset. بالنسبة إلى المتصفّحات التي لا تتوافق مع srcset، سيتم تجاهل السمة ومحتواها، وسيتم طلب محتوى src كالمعتاد.

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

الفرق بين بنية "هذا المصدر مناسب لشاشات 2x" وصيغة "استخدام هذا المصدر على شاشات 2x" بسيطة في الطباعة، لكنّ كثافة العرض ليست سوى عامل واحد من عدد كبير من العوامل المترابطة التي يستخدمها المتصفّح لتحديد المرشح لعرضه، والتي يمكنك معرفة بعضها فقط. على سبيل المثال: بشكل فردي، من الممكن أن تحدّد أنّ المستخدم قد فعّل الخيار المفضّل للمتصفّح الذي يوفّر معدل نقل بيانات من خلال الاستعلام عن الوسائط prefers-reduced-data، وأن تستخدم ذلك لتفعيل الصور المنخفضة الكثافة دائمًا للمستخدمين بغض النظر عن كثافة العرض، ولكن ما لم يتم تطبيق الإعدادات بشكل متّسق من قِبل كل مطوّر على كل موقع إلكتروني، فلن يستفيد المستخدم كثيرًا من هذه الميزة. فقد يتم احترام تفضيلهم على أحد المواقع، ويصادفون جدارًا من الصور يقلل من معدل نقل البيانات في الموقع التالي.

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

وصف قيم العرض باستخدام w

تقبل srcset نوعًا ثانيًا من الواصف لمرشحات مصدر الصور. إنها أقوى بكثير - وللأغراض لدينا، أسهل فهمها بكثير. بدلاً من وضع علامة على المرشح بأنّه يتضمن الأبعاد المناسبة لكثافة عرض معيّنة، تصف بنية w العرض الكامن في كل مصدر مرشح. ومرة أخرى، يتم حفظ كل مرشح مماثل لأبعاده - نفس المحتوى، ونفس الاقتصاص، ونفس نسبة العرض إلى الارتفاع. ولكن في هذه الحالة، يجب أن يختار متصفح المستخدم ما بين اثنين من العناصر المرشحة: small.jpg، ومصدر العرض المتأصل البالغ 600 بكسل، وlarge.jpg، وهو مصدر يبلغ عرضه 1200 بكسل.

srcset="small.jpg 600w, large.jpg 1200w"

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

وصف بيانات الاستخدام من خلال "sizes"

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

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

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

قد يبدو ذلك معقدًا بعض الشيء في المحتوى المطبوع، لكن من الأسهل بكثير فهمه من الناحية العملية:

<img
 sizes="80vw"
 srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
 src="fallback.jpg"
 alt="...">

تُعلم قيمة sizes هذه المتصفِّح بأنّ المساحة في التنسيق التي يشغلها img تتراوح بين 80vw و 80% من إطار العرض. ملاحظة: هذه ليست تعليمات، بل هي وصف لحجم الصورة في تنسيق الصفحة. ولا يشير هذا الشرط إلى "جعل هذه الصورة تشغل 80% من إطار العرض"، ولكن "سينتهي الأمر بأن تشغل هذه الصورة 80% من إطار العرض فور عرض الصفحة".

بصفتك مطورًا، تكون مهمتك قد اكتملت. لقد وصفت بدقة قائمة بالمصادر المرشحة في srcset وعرض صورتك في sizes. وكما هو الحال في بنية x في srcset، يعتمد باقي العناصر على المتصفّح.

ولكن من أجل الفهم الكامل لكيفية استخدام هذه المعلومات، لنلقِ نظرة على القرارات التي يتخذها متصفّح المستخدم عند مواجهة هذا الترميز:

لقد أبلغت المتصفّح بأنّ هذه الصورة ستشغل 80% من إطار العرض المتاح، لذا إذا عرضنا img على جهاز مزوّد بإطار عرض بعرض 1000 بكسل، ستشغل هذه الصورة 800 بكسل. سيأخذ المتصفّح هذه القيمة ويقسمها على عرض كل من مرشحي مصدر الصورة اللذين حددناهما في srcset. أصغر مصدر له حجم ملازم يبلغ 600 بكسل، وبذلك يكون: 600÷800=.75. يبلغ عرض صورتنا المتوسطة 1200 بكسل: 1200÷800=1.5. أكبر صورة لدينا هي 2000 بكسل عرضًا: 2000 ÷ 800=2.5.

وتكون نتائج هذه العمليات الحسابية (.75 و1.5 و2.5) عبارة عن خيارات DPR مصمّمة خصيصًا لحجم إطار عرض المستخدم. ونظرًا لأن المتصفح يحتوي أيضًا على معلومات حول كثافة عرض المستخدم، فإنه يتخذ سلسلة من القرارات:

عند استخدام حجم إطار العرض هذا، يتم تجاهل العنصر المرشح small.jpg بغض النظر عن كثافة عرض المستخدم، مع انخفاض قيمة DPR المحسوبة عن 1، ما يتطلّب من هذا المصدر زيادة الحجم لأي مستخدم، لذا فهو ليس مناسبًا. إذا كان الجهاز مزوّدًا بنسخة احتياطية من 1، يوفّر medium.jpg أقرب نتيجة مطابقة، حيث يكون هذا المصدر مناسبًا للعرض في سجل DPR بنسبة 1.5، لذا فهو أكبر بقليل من اللازم، ولكن تذكر أن تخفيض حجم المحتوى هو عملية سلسة بصريًا. على الجهاز الذي يحتوي على معدل تكرار ثابت تبلغ 2، يكون large.jpg هو أقرب تطابق، لذلك يتم اختياره.

إذا تم عرض الصورة نفسها على إطار عرض عريض بحجم 600 بكسل، فستكون نتيجة هذه العملية الحسابية مختلفة تمامًا: 80vw الآن أصبحت 480 بكسل. عندما نقسم عرض مصادرنا على ذلك، نحصل على 1.25 و2.5 و4.1666666667. في حجم إطار العرض هذا، سيتم اختيار small.jpg على الأجهزة 1x، وسيتم اختيار medium.jpg على الأجهزة 2x.

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

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

لحسن الحظ، يمكنك استخدام calc() هنا، لأنّ أي متصفّح متوافق مع الصور المتجاوبة مع مختلف الأجهزة سيتوافق أيضًا مع calc()، ما يتيح لنا مزج وحدات CSS ومطابقتها، على سبيل المثال، صورة تشغل العرض الكامل لإطار العرض الخاص بالمستخدم، باستثناء هامش 1em على كلا الجانبين:

<img
    sizes="calc(100vw-2em)"
    srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w, x-large.jpg 2400w"
    src="fallback.jpg"
    alt="...">

وصف نقاط التوقف

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

لنفترض أنّ لديك صورة تشغل% 80 من إطار العرض، مع طرح em من المساحة المتروكة على أي من الجانبين، في إطار عرض يزيد عن 1200 بكسل، وهي تشغل العرض الكامل لإطار العرض الأصغر حجمًا.

  <img
     sizes="(min-width: 1200px) calc(80vw - 2em), 100vw"
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     src="fallback.jpg"
     alt="...">

إذا كان إطار عرض المستخدم أكبر من 1200 بكسل، يصف calc(80vw - 2em) عرض الصورة في التنسيق. في حال عدم تطابق شرط (min-width: 1200px)، ينتقل المتصفّح إلى القيمة التالية. بسبب عدم وجود شرط وسائط محدد مرتبط بهذه القيمة، يتم استخدام 100vw كإعداد تلقائي. إذا أردت كتابة سمة sizes هذه باستخدام max-width استعلام عن الوسائط:

  <img
     sizes="(max-width: 1200px) 100vw, calc(80vw - 2em)"
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     src="fallback.jpg"
     alt="...">

باللغة العادية: "هل يتطابق (max-width: 1200px)؟ إذا لم يكن كذلك، فامضي قدمًا. القيمة التالية - calc(80vw - 2em) - ليس لها شرط مؤهِّل، لذلك هي القيمة التي تم اختيارها.

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

بنية الجملة "استخدام هذا المصدر على شاشة عالية الدقة" يمكن التنبؤ بها، ولكنها لن تعالج المشكلة الأساسية مع الصور في تنسيق سريع الاستجابة: وهي الحفاظ على معدل نقل بيانات المستخدم. ترتبط كثافة وحدات البكسل في الشاشة بشكل عرضي بسرعة اتصال الإنترنت، إن وجدت. إذا كنت تستخدم جهاز كمبيوتر محمولاً عالي الجودة، ولكنك تتصفح الويب عن طريق اتصال تفرض تكلفة استخدام أو الاتصال بهاتفك، أو تستخدم اتصال Wi-Fi متقطع بالطائرة، قد تحتاج إلى إيقاف مصادر الصور العالية الدقة، بغض النظر عن جودة شاشتك.

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

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

يتم استخدام sizes وsrcset.

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

يشكّل srcset مثالاً واضحًا على الأساليب المبرمَجة. من النادر أن تصنع نسخًا متعددة من صورك يدويًا لتلائم بيئة إنتاج، بدلاً من أتمتة العملية باستخدام برنامج تشغيل مهام مثل Gulp، أو أداة تجميع مثل Webpack، أو شبكة توصيل للمحتوى (CDN) تابعة لجهة خارجية مثل Cloudinary، أو وظيفة مدمَجة في نظام إدارة المحتوى (CMS) الذي تختاره. بالنظر إلى المعلومات الكافية لإنشاء مصادرنا في المقام الأول، سيحصل النظام على معلومات كافية لكتابتها في سمة srcset صالحة.

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