الصور المتجاوبة: شرح srcset و sizes وكثافة البكسل

افصل بكسلات المصدر عن CSS وعن DPR

ملف عرضه 800 بكسل يمكن عرضه داخل مساحة 400 بكسل CSS. عند DPR بقيمة 2 تقابل هذه المساحة نحو 800 بكسل فعلي في العرض. العلاقة مفيدة لتخطيط الدقة، لكنها لا تسلب المتصفح حرية اختيار المورد.

احسب المساحة أولاً: الأصغر بين 800 وبين عرض النافذة ناقص 32 بكسلاً. اضرب المساحة في DPR لتحصل على عرض مصدر مستهدف. لا تضرب عرض النافذة كله حين تكون الصورة داخل عمود ضيق؛ حجم المكوّن هو المدخل المناسب للحساب.

استخدم واصفات العرض للتخطيط المتغير

يحدد الواصف w العرض الحقيقي للملف بالبكسل؛ ليس نقطة توقف، ويجب أن يطابق المورد فعلاً. تصف sizes العرض المتوقع في التخطيط الحالي. في الترميز، نافذة بعرض 832 بكسل CSS أو أكثر تستعمل مساحة 800 ، وما دونها يستعمل عرض النافذة مطروحاً منه الهامشان.

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

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

توقع الاختيار ثم افحص المورد الحقيقي

في نافذة 392 ومع DPR بقيمة 2 ، المساحة 360 والهدف 720 بكسل مصدر؛ المرشح 800w اختيار متوقع معقول. على شاشة واسعة مع DPR بقيمة 2 يصبح الهدف 1600. تشرح الأرقام مدخلات الاختيار، لكنها لا تُجبر المتصفح على تنزيل مرشح بعينه.

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

ولّد ملفات 400 و 800 و 1600 الحقيقية وافحص الجودة وكل عنوان. نسخ ملف 1600 نفسه بأسماء مختلفة ثم وضع واصفات w مختلفة لا يصنع صوراً متجاوبة؛ البيانات الفعلية للصور هي ما يحدد صحة الترميز.

• قِس عرض العنصر المعروض، ولا تفترض أنه عرض النافذة.
• قارن عنوان currentSrc بالاستجابة في لوحة الشبكة.
• افحص أبعاد الملف ونوع الرد وحالة التخزين والبايتات المنقولة.
• كرر الاختبار لنافذة ضيقة وواسعة مع DPR بقيمتي 1 و 2.
• راقب التجاوز الأفقي وتحرك التخطيط قبل وصول الصورة وبعده.

اختر واصفات الكثافة للصورة الثابتة فعلاً

يمكن لشعار ثابت العرض استعمال واصفات x. إذا كان العرض 120 بكسل CSS ، قدم ملف 120 بوصف 1x وملف 240 بوصف 2x. إنها دقات مختلفة لمساحة عرض ثابتة. لا تخلط واصفات x و w داخل srcset واحدة.

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

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

خطط للنسبة ولسلوك التحميل معاً

تتيح خاصيتا width و height حجز مساحة بنسبة أبعاد قبل وصول الصورة. لا تفرضان ثبات أبعاد CSS حين تغير الأنماط العرض. في نسبة 4:3 يعطي العرض 800 ارتفاع 600 ، والعرض 360 ارتفاع 270 بكسلاً؛ حجز هذه النسبة يقلل الحركة غير المتوقعة.

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

ذاكرة الصورة المفكوكة تختلف عن حجم الملف المنقول. قد يكون WebP المضغوط صغيراً ويصبح مخزناً كبيراً للبكسلات بعد فكّه. استخدم حاسب الذاكرة للأبعاد المفكوكة، وقِس الملف المضغوط فعلياً بدلاً من استنتاج بايتاته من عدد البكسلات فقط.

راجع المكوّن قبل النشر

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

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