الصور المتجاوبة: srcset وsizes وpicture

قدّم الصورة المناسبة للشاشة المناسبة بواسطة srcset وsizes، واحتفظ بـ picture للتوجيه الفني، وأتقن التحميل الكسول.

9 دقيقة · 3 أسئلة

تمثّل الصور عادةً نصف وزن الصفحة: إنها أول رافعة لأدائك. الآلية الأساسية هي srcset مع واصفات w، التي تعلن العروض الفعلية للملفات المتاحة، مقترنةً بـ sizes التي تعلن عرض العرض المقصود. نقطة أساسية: يختار المتصفح الصورة عبر ماسح التحميل المسبق لديه، قبل أن يحسب حتى تخطيط CSS. من دون sizes، يفترض 100vw ويُنزّل غالبًا أكثر مما يلزم بكثير. يأخذ الاختيار النهائي في الحسبان أيضًا كثافة الشاشة: شاشة بكثافة 2x على مساحة 400 بكسل ستجلب ملفًا بعرض 800 بكسل تقريبًا.

<img src="harbor-800.jpg"
     srcset="harbor-400.jpg 400w,
             harbor-800.jpg 800w,
             harbor-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Old harbor at sunset"
     width="800" height="533">

مع srcset/sizes، يبقى المتصفح متحكّمًا: فقد يقدّم نسخة أخف بحسب الكثافة أو تفضيلات توفير البيانات. أما <picture> فتقلب المنطق: أنت تفرض المصدر عبر <source media> أو <source type>. احتفظ بها لحالتين: التوجيه الفني (اقتصاص مختلف على الجوّال، لا مجرد حجم) والتفاوض على الصيغة (AVIF أو WebP مع بديل JPEG). لإعادة التحجيم البسيطة، تكون picture تعقيدًا لا لزوم له.

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-square.jpg">
  <source type="image/avif"
          srcset="hero-wide.avif">
  <img src="hero-wide.jpg" alt="Museum facade"
       width="1200" height="600">
</picture>

لكل ما تبقّى في الصفحة، تؤجّل loading="lazy" التنزيل حتى تقترب الصورة من إطار العرض، بشكل أصلي ومن دون JavaScript. اقرنها بـ decoding="async" كي لا يعيق فك الترميز التصيير، وقبل كل شيء بـ width وheight: يستنتج المتصفح نسبة العرض إلى الارتفاع ويحجز المساحة، مما يلغي انزياحات التخطيط (CLS). أما للصورة الحرجة فافعل عكس الكسول: fetchpriority="high".

<img src="gallery-01.jpg"
     alt="Exhibition hall"
     loading="lazy" decoding="async"
     width="800" height="600">

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ما وظيفة سمة sizes بالضبط؟
   • إعادة تحجيم الصورة على صعيد CSS
   • الإعلان عن عرض العرض المقصود كي يختار المتصفح من srcset
   • تحديد سقف للوزن الأقصى للملف المُنزَّل
2. في أي حالة تكون <picture> ضرورية بدلًا من srcset وحدها؟
   • لتقديم الصورة نفسها بعدة عروض
   • لاقتصاص مختلف لكل شاشة أو صيغة حديثة مع بديل
   • لتفعيل التحميل الكسول الأصلي
3. ما أثر loading="lazy" على صورتك الرئيسية الظاهرة عند التحميل؟
   • لا أثر، فالسمة مُتجاهَلة أعلى الطيّة
   • تؤخّر تحميلها وتضرّ بـ LCP
   • تحسّن LCP بإعطائها الأولوية للصورة