الصور والفيديو والصوت في HTML: img والنص البديل وfigure وsrcset والتحميل الكسول

العنصر img والنص البديل

<img> عنصر فارغ لا يحتاج وسم إغلاق. والسمة src عنوان الصورة، وتُكتب مثل عنوان الرابط. أما alt فهي البديل النصي، تقرؤها قارئات الشاشة، ويعرضها المتصفح إذا فشل تحميل الصورة، وتستخدمها محركات البحث لفهم الصورة.

النص البديل الجيد يقول ما تعنيه الصورة في هذا الموضع باختصار. فصورة منتج قد تكون "كرسي مكتب من الجلد الأسود، منظر أمامي". والرسم البياني يحتاج إلى معلومته الأساسية: "ارتفعت المبيعات من 2 إلى 5 ملايين درهم بين 2023 و2025". ولا تبدأ بعبارة "صورة لـ"، فقارئات الشاشة تقول ذلك أصلاً.

إذا كانت الصورة للزينة فقط، مثل زخرفة في الخلفية، فاكتب alt="" (فارغة لا محذوفة)، فتتجاوزها قارئات الشاشة. أما إذا حذفت alt تماماً، فكثير من قارئات الشاشة تقرأ اسم الملف بدلاً منها، مثل "IMG underscore 4 0 2 1 dot jpg".

الحجم وتحرك التخطيط والصور المتجاوبة

أعطِ دائماً width وheight بالبكسل بما يطابق نسب الصورة الحقيقية. فيحجز المتصفح المساحة الصحيحة قبل وصول الملف، ولا يقفز النص إلى الأسفل عند تحميل الصورة. وتقيس Google هذا القفز باسم Cumulative Layout Shift، وهو أحد مؤشرات Core Web Vitals. ويمكن لـ CSS تصغير الصورة على الهواتف، فالسمتان تحددان الشكل فقط.

تخبر loading="lazy" المتصفح أن ينتظر حتى تقترب الصورة من الشاشة. استخدمها للصور الموجودة بعد الشاشة الأولى، لا للصورة الرئيسية في الأعلى، فتلك يجب أن تُحمّل في أبكر وقت ممكن.

تسرد srcset عدة أحجام للصورة نفسها، وتقول sizes بأي عرض ستُعرض. فيختار المتصفح أصغر ملف يبقى واضحاً على تلك الشاشة. وللقصّات أو الصيغ المختلفة ضع المصادر داخل <picture>. وضع الصورة التي لها تعليق ظاهر داخل <figure> مع <figcaption>.

الفيديو والصوت

يشغّل <video> و<audio> الوسائط دون إضافات. أضف السمة controls ليتمكن الناس من الإيقاف وتغيير مستوى الصوت، فبدونها لا توجد أزرار. وتجنب autoplay مع الصوت، فالمتصفحات تمنعه، وهو مزعج. وإذا اضطررت إلى تشغيل فيديو خلفية صامت تلقائياً، فأضف muted وplaysinline.

الترجمة النصية تجعل الفيديو صالحاً للمشاهدين الصم ولكل من يشاهد دون صوت. أضفها باستخدام <track kind="captions" src="captions.vtt" srclang="en" label="English"> داخل الفيديو. ويمكنك إضافة مسار عربي أيضاً مع srclang="ar". أما فيديو YouTube فيُضمَّن بعنصر <iframe> من قائمة المشاركة في YouTube.

أخطاء شائعة

• غياب alt أو نص بديل يكرر اسم الملف

  alt="IMG_4021.jpg" أو غياب النص البديل لا يخبر الزائر الكفيف بشيء. صِف ما يهم، أو استخدم alt="" للزينة.

• رفع صور ضخمة

  صورة كاميرا بعرض 5000 بكسل تُعرض بعرض 600 بكسل تهدر البيانات وتبطئ الصفحة. غيّر الحجم واضغط الصورة قبل رفعها، وأداتا ضغط الصور وتغيير حجمها المجانيتان لدينا تفعلان ذلك داخل المتصفح.

• نص داخل الصور

  لافتة كُتب العرض فيها داخل الصورة لا يمكن لقارئات الشاشة قراءتها ولا ترجمتها ولا العثور عليها في البحث. ضع النص المهم في HTML.

تمرين

اعرض منتجاً: عنصر figure فيه صورة لها نص بديل alt مفيد وwidth وheight، مع figcaption. ثم أضف صورة ثانية زخرفية لها alt="" فارغة وloading="lazy".

<h2>Our best seller</h2>
<figure>
  <img src="https://needmytools.com/icon.svg" alt="Green NeedMyTools logo" width="120" height="120">
  <figcaption>The NeedMyTools logo, shown here as a sample product.</figcaption>
</figure>
<img src="https://needmytools.com/icon.svg" alt="" width="40" height="40" loading="lazy">

اختبار سريع

أسئلة يطرحها الناس

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

• MDN: The img element
• W3C WAI: Images tutorial (alt decision tree)
• web.dev: Cumulative Layout Shift
• MDN: The video element

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