اختر النمط الصحيح
التحويل بالقرار (Resolution switching) يحافظ على التركيب ذاته ويعرض عدة عرضيات للملف. إنه النمط المعتاد لصور المنتجات، صور المقالات، والبطاقات. استخدم مُوصِفات العرض مثل 480w أو 1200w عندما يتغير العرض المرسوم مع التخطيط. الرقم هو عرض الملف الحقيقي بالبكسل، ليس هدف هاتف أو أمر CSS.
التحويل بالكثافة (Density switching) يخدم فتحة CSS ثابتة بعدد أكبر من بكسلات المصدر لشاشات كثافة أعلى. مُوصِفاته تكون 1x أو 1.5x أو 2x، ويناسب شعارًا أو أيقونة ثابتة، مثلًا بعرض 160 بكسل CSS. لا تخلط مُوصِفات العرض وموصِفات الكثافة في srcset واحد.
استخدم مُوصِفات w مع sizes عندما يكبر المكوّن أو يصغر.
استخدم مُوصِفات x بدون sizes فقط عندما يكون الحجم المرسوم في CSS ثابتًا.
فهم كيف يوجّه sizes الاختيار
مع مُوصِفات العرض، يقيم المتصفح sizes قبل تنزيل الصورة. كل إدخال يقترن بشرط وسائط اختياري وطول. أول شرط يطابق يزود بحجم المصدر؛ الطول النهائي غير المشروط هو الاحتياط. sizes هو توجيه للاختيار، وليس قاعدة CSS.
يقارن المتصفح ذلك الحجم المصدر بعروض المرشحين ليحسب الكثافة الفعالة، ثم قد يأخذ في الاعتبار كثافة العرض، والتكبير، وظروف الشبكة. لا يلزم المتصفح أن يختار اسم ملف قريب رياضيًا؛ وفّر مرشحين صادقين وتقدير فتحة معقول؛ يبقى اختيار المتصفح قرار وكيل المستخدم.
يفوز أول شرط وسائط يطابق، لذا اكتب القائمة بالترتيب الذي يجعل أول تطابق صحيحًا.
وصف بطاقة مكتبية بعرض ثلث الصفحة على أنها بعرض النافذة المرئية (100vw) قد يستدعي مرشحًا كبيرًا بلا داع.
استخرج المرشحين من التخطيط الفعلي
أحصِ المكوّنات، لا الصفحات. بطل، صورة تحريرية، معرض منتجات، صورة مصغرة للبحث، وشعار التذييل غالبًا ما تملك عروض فتحة مختلفة. لكل منها، سجّل العرض الضيق والأكبر المرسوم، نسبة الارتفاع إلى العرض، سلوك القص، وما إذا كانت تظهر في الشاشة الأولى.
ولِّد عروضًا حول نطاق الفتحة المعنوي للمكوّن، مع خيار أكبر عندما يبرر التفصيل عرض عالي الكثافة. الملفات المتماثلة تقريبًا تضيف تعقيدًا للبناء والتخزين المؤقت؛ ملف صغير جدًا وملف ضخم جدًا يفرضان تسوية. اختبر عناوين URL المُنشَأة بدلًا من افتراض أن تحويلات الصور تعمل.
احتفظ بنُسخة src احتياطية صالحة وقيم width و height تطابق النسبة المسلمة. هي تحجز المساحة لكنها لا تمنع CSS المستجيب من تغيير الأبعاد النهائية.
ينبغي أن يكون المرشح المعلن عنه كـ 800w فعليًا عرضه 800 بكسل.
حافظ على خطة الفتحة والمرشحين بجانب تغييرات القالب والتصميم.
استخدم picture للتوجيه الفني (art direction)
التوجيه الفني يغيّر التكوين، لا مجرد حجم الملف. قد تحتاج صورة بانورامية واسعة إلى قص رأسي أضيق على شاشة ضيقة حتى يبقى موضوعها مرئيًا. عنصر picture يمكنه تقديم خيارات مصدر خاصة بكل شرط وسائط، يليه img كاحتياط. ينظر المتصفح إلى وسائط كل source، والنوع (type)، ومعلومات srcset؛ يحمل img النص البديل والأبعاد وسلوك fallback.
حضّر كل قص بمراجعة تحريرية وقابلية وصول. قد يزيل قص الهاتف تفصيلًا في المنتج أو شخصًا مذكورًا في النص البديل. ضع alt على img ووصف المعلومات أو الوظيفة التي تنقلها الصورة. استخدم alt="" فقط للصورة الزخرفية حقًا؛ بالنسبة لصورة مرتبطة أو زر، صِف الإجراء بدلًا من المظهر. لا تدخل picture عندما لا يتغير القص: srcset المستند إلى العرض أبسط.
يحتاج هيرو مكتظ على سطح المكتب إلى قص عمودي مميز للهاتف.
يمكن لمصدر picture أن يقدم تلميح نوعي ويحافظ على img قابل للاستخدام على نطاق واسع.
تجنّب أخطاء تحميل وتوسيم مكلفة
الهدَر الشائع هو نسخ sizes="100vw" لكل صورة. قد يناسب ذلك صورة بعرض كامل ضيقة لكن ليس حاوية محدودة العرض أو بطاقة سطح مكتب ذات حد. الفشل المقابل هو بقائية قيم sizes بعد إعادة تصميم. غيّر CSS و sizes معًا.
لا تُحمِل كسولًا صورة مهمة في المحتوى الظاهر مبدئيًا. التوجيهات توصي بالتحميل الكسول للصور أسفل الطي وابقَ الهيرو الظاهر مُحمَّلًا فورًا. يمكن لـ fetch priority رفع صورة فعلًا حيوية، لكن قواعد أولوية أو preload عامة قد تضر الأداء. لا تعتمد على أسماء الملفات أو النتائج المخبأة كدليل.
قد يخفي CMS أو وكيل أو ذاكرة مخبأ موصِفًا خاطئًا أو طلب صورة غير مقصود.
لا تجعل نص الصفحة الأساسي يعتمد فقط على قص موجه فنيًا.
اختبر الطلب والقص والإصلاح
اختبر صفحات ممثلة عند عرضيات تغيير التخطيط، بما في ذلك مباشرة فوق وتحت نقطة انكسار الشبكة. أدرج إعداد كثافة عالية، وسطح مكتب واسع، وحالات تغير الفتحة. أكد الأبعاد المرسومة، والقص، والنص البديل، والحدة البصرية.
في Chrome DevTools، افتح Network، أعد التحميل مع تعطيل المخبأ أو استخدم "Empty Cache And Hard Reload"، صفّي طلبات الصور، وافحص URL، وحجم النقل، والرؤوس، والمُحفِّز (initiator)، والتوقيت. استخدم التقييد (throttle) لكشف الأعمال المتأخرة أو المهدرة. سجّل العرض، وعامل مقياس الجهاز (device scale factor)، والفتحة، والمرشح، والبايت المنقولة، والنتيجة المتوقعة.
عندما يتغير قالب أو نقطة انكسار أو CDN أو خط أنابيب الأصول، اجعل هذا بوابة إصدار. أصلح بشكل ضيق: صحّح sizes، أصلح مُوصِفًا، أعد توليد قصًا، استعد محتوى احتياطيًا، أو أزل preload غير الضروري. أعد الاختبار على إعادة تحميل بذاكرة مخبأ فارغة.
لوحة Network تسجل المرشح الذي طُلب فعليًا.
هذا يتحقق من سلوك تسليم الصورة، لا من قدرة المصدر، أو توافر CDN، أو وقت التشغيل العام.
طبّقه كتحكم مرونة SIU
الصور المستجيبة تقلل النقل غير الضروري لكن لا يمكنها ضمان نجاح الطلب. أخطاء الأصل، تحويلات غير متاحة، المضيفون من طرف ثالث، وفشل CDN تحتاج تخطيط استمرارية واسترداد منفصل.
لـ SIU، استخدم سجلات الاختبار لالتقاط تراجعات التسليم مبكرًا، وتحديد قالب مسؤول أو قاعدة تحويل، وعمل أصغر تصحيح آمن قبل الإطلاق. قارن هذا مع اختبار التوافر المسبق وخطة التراجع (rollback).
اسند مالكًا للمكوّن وأنبوب الصور لكل فشل فحص اختيار.