الصور المتجاوبة والأداء

المشكلة التي تحلّها الصور المتجاوبة

تعلّمنا في درس الروابط والصور وسم <img> الأساسي: src وalt وأبعاد ثابتة. لكن هذا يعني أن كل زائر يحمّل نفس ملف الصورة — سواء كان على شاشة جوال صغيرة أو شاشة سطح مكتب عريضة. زائر الجوال يهدر بيانات وسرعة تحميل على صورة أكبر بكثير مما يحتاج.

الحل: نعطي المتصفح عدة نسخ من نفس الصورة بمقاسات مختلفة، ونتركه هو يختار الأنسب لشاشة الزائر الفعلية.

نسخ متعددة بنفس الصورة: srcset و sizes

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="واجهة الموقع على أجهزة مختلفة"
  width="800" height="500" />

• srcset يسرد النسخ المتاحة، وكل واحدة مع عرضها الحقيقي بالبكسل (400w يعني 400px عرضًا).
• sizes يخبر المتصفح كم ستشغل الصورة من عرض الشاشة فعليًا حسب حجم النافذة — قبل حتى أن تُحمَّل، ليختار المتصفح النسخة الأنسب من srcset دون تخمين.
• src يبقى احتياطيًا للمتصفحات التي لا تدعم srcset.

🔑 هذا يُسمّى Resolution Switching — نفس الصورة، مقاسات مختلفة. المتصفح (لا الخادم ولا جافاسكريبت) هو من يقرر أي نسخة يحمّل، بناءً على حجم شاشته وكثافة بكسلاتها.

تبديل الصورة نفسها: <picture>

أحيانًا لا تريد فقط مقاسًا أصغر، بل صورة مختلفة تمامًا حسب الشاشة (مثلًا: قصّة مربعة للجوال، وعريضة لسطح المكتب)، أو تريد تقديم صيغة حديثة موفّرة مثل WebP مع احتياطي JPG:

<picture>
  <source srcset="banner-square.jpg" media="(max-width: 600px)" />
  <source srcset="banner-wide.webp" type="image/webp" />
  <img src="banner-wide.jpg" alt="بانر إعلان الدورة" width="1200" height="400" />
</picture>

• المتصفح يفحص عناصر <source> بالترتيب ويأخذ أول واحد يطابق شرطه (media أو type).
• <img> في النهاية إلزامي دائمًا — هو الاحتياطي الأخير، وهو من يحمل alt (راجع مرجع وسم picture).

أبعاد الصورة تمنع "قفزة" التخطيط

<img src="hero.jpg" alt="صورة رئيسية" width="1200" height="600" />

حين تحدّد width وheight، يحجز المتصفح مساحة الصورة مسبقًا قبل أن تنتهي من التحميل، فلا يتحرك بقية المحتوى فجأة لأسفل عند وصولها. هذا يقلّل مقياس أداء اسمه Cumulative Layout Shift (CLS)، أحد مقاييس Core Web Vitals التي تستخدمها Google لقياس تجربة الصفحة الفعلية.

⚠️ ضع width وheight دائمًا، حتى لو كنت ستتحكم بحجم العرض النهائي عبر CSS — القيمتان هنا تحسبان نسبة الأبعاد لحجز المساحة، لا الحجم النهائي.

التحميل الكسول: loading="lazy"

<img src="footer-illustration.jpg" alt="رسمة توضيحية" loading="lazy" width="400" height="300" />

loading="lazy" يخبر المتصفح: لا تحمّل هذه الصورة الآن، بل أجّلها حتى يقترب الزائر منها بالتمرير. هذا يوفّر بيانات ووقت تحميل حقيقيين، خصوصًا في الصفحات الطويلة ذات الصور الكثيرة.

• استخدمه على الصور أسفل الشاشة الأولى (below the fold).
• لا تستخدمه على الصورة الرئيسية الظاهرة فور فتح الصفحة (Hero Image) — فهي أول ما يراه الزائر، وتأجيلها يبطئ ظهورها لا يسرّعه.

الاستخدام الواقعي

• متجر إلكتروني: srcset/sizes لصور المنتجات لتقليل استهلاك بيانات زوار الجوال.
• مدونة بصور كثيرة: loading="lazy" على كل صورة عدا أول صورة في المقال.
• صفحة هبوط تسويقية: <picture> لعرض بانر مربّع على الجوال وعريض على الشاشات الكبيرة.

الأخطاء الشائعة

• ❌ نسيان <img> الاحتياطي داخل <picture> — بعض البيئات لا تعرض شيئًا بدونه.
• ❌ loading="lazy" على الصورة الرئيسية في أعلى الصفحة — يبطئ أهم صورة بدل تحسين الأداء.
• ❌ الاعتماد على sizes بلا srcset، أو العكس — الاثنان يعملان معًا؛ أحدهما بلا الآخر عديم الفائدة.
• ❌ إهمال width/height رغم استخدام srcset — لا يزالان ضروريين لمنع قفزة التخطيط.

خلاصة

srcset وsizes يقدّمان نسخًا مختلفة الحجم من نفس الصورة ليختار المتصفح الأنسب لشاشة الزائر، و<picture> يذهب أبعد فيقدّم صورًا أو صيغًا مختلفة تمامًا. width/height يحجزان المساحة لمنع قفزة التخطيط، وloading="lazy" يؤجّل الصور البعيدة عن الشاشة. أربع أدوات بسيطة تحسّن أداء أي صفحة تحتوي صورًا — راجع مرجعي img وpicture للتفاصيل الكاملة لكل خاصية.