HTML Academy · درس

الصور المتجاوبة باستخدام srcset وsizes

قدّم صورًا بالحجم المناسب لكثافات الشاشات المختلفة

الصور المتجاوبة باستخدام srcset وsizes درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

مشكلة استخدام صورة واحدة

يؤدي تقديم صورة كبيرة واحدة لجميع الأجهزة إلى هدر النطاق الترددي على الشاشات الصغيرة:

لا يحتاج هاتف بشاشة عرضها 390px إلى صورة بحجم 2400px
تستحق شاشة بدقة 4K صورةً بدقة أعلى من 96dpi
تقدّم الصور المتجاوبة الصورة المناسبة للشاشة المناسبة

السمة srcset

توفّر srcset قائمةً بمصادر الصور مع عروضها:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

واصفات كثافة البكسلات

استخدم الواصفات 1x و2x و3x للصور ذات الحجم الثابت وبدقات مختلفة:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

السمة sizes

تُخبر sizes المتصفح بعرض الصورة عند عرضها في أحجام مختلفة لإطار العرض:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

كيفية اختيار المتصفح للصورة

يحسب المتصفح: قيمة sizes × نسبة بكسلات الجهاز لاختيار صورة من srcset:

إطار عرض بحجم 600px، ونسبة DPR تساوي 2×، وsize=100vw → يحتاج إلى صورة بعرض 1200px → يختار 1600w
إطار عرض بحجم 1200px، ونسبة DPR تساوي 1×، وsize=50vw → يحتاج إلى صورة بعرض 600px → يختار 800w
بعد تحميل الصورة، يخزّنها المتصفح مؤقتًا وقد لا يعيد تحميلها

القيمة الافتراضية للسمة sizes

من دون sizes، يفترض المتصفح أن الصورة تشغل كامل عرض إطار العرض (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

واصفات العرض في srcset مقابل واصفات x

يوفّر srcset نمطين:

واصفات العرض (w) — مع sizes: اختيار مرن يراعي التخطيط
واصفات كثافة البكسلات (x) — للصور ذات الحجم الثابت وبدقات متعددة

استخدم واصفات w لمعظم الصور المتجاوبة. واستخدم x للأيقونات والشعارات والعناصر ذات الحجم الثابت.

إنشاء ملفات srcset

أدوات تُنشئ نسخًا متجاوبة من الصور:

Sharp (Node.js) — تغيير حجم الصور برمجيًا
Squoosh — يعمل في المتصفح ويتيح المقارنة المرئية
Cloudinary / Imgix — تغيير الحجم عند الطلب باستخدام عناوين URL
Webpack / Vite plugins — الإنشاء في وقت البناء

srcset مع WebP وبديل احتياطي

ادمج srcset مع <picture> لتوفير بديل للتنسيق:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

التوجيه الفني مقابل تبديل الدقة

هناك نوعان من مشكلات الصور المتجاوبة:

تبديل الدقة — الصورة نفسها بدقات مختلفة → استخدم srcset + sizes
التوجيه الفني — اقتصاص أو تكوين مختلف على الشاشات المختلفة → استخدم <picture> مع <source media>

اختبار الصور المتجاوبة

كيفية التحقّق من عمل srcset بشكل صحيح:

افتح DevTools ← علامة تبويب Network ← صفِّ النتائج حسب Images
اضبط محاكاة الجهاز على أحجام مختلفة لإطار العرض ونسب DPR
أعد التحميل — وتحقّق من الملف الذي يطلبه المتصفح
تحقّق أيضًا من: Lighthouse ← Performance ← فحص Properly sized images

دعم المتصفحات لـ srcset

دعم المتصفحات لـ srcset ممتاز:

مدعوم في جميع المتصفحات الحديثة (Chrome وFirefox وSafari وEdge)
يتولّى البديل src التعامل مع المتصفحات القديمة
لا حاجة إلى polyfill للاستخدام في بيئة الإنتاج

تحقّق سريعًا

ماذا تخبر السمة sizes المتصفح؟

مراجعة: srcset وsizes

أساسيات الصور المتجاوبة:

srcset — قائمة بملفات الصور مع عروضها الأصلية أو كثافات بكسلاتها
sizes — شروط الوسائط التي تصف العرض الذي ستُعرض به الصورة
يختار المتصفح أفضل تطابق: قيمة sizes × نسبة DPR للجهاز
واصفات العرض (w) للصور المرنة؛ وx للعناصر ذات الحجم الثابت
وفّر دائمًا src كبديل احتياطي

الأسئلة الشائعة

هل درس «الصور المتجاوبة باستخدام srcset وsizes» مجاني؟

نعم — نص درس «الصور المتجاوبة باستخدام srcset وsizes» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «الصور المتجاوبة باستخدام srcset وsizes»؟

قدّم صورًا بالحجم المناسب لكثافات الشاشات المختلفة تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الصور المتجاوبة باستخدام srcset وsizes»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy