الصور في HTML: الوسم img والنص البديل

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

الوسم img

الصورة تُضاف بالوسم <img> (اختصار image)، وهو وسم فارغ بلا وسم إغلاق:

<img src="cat.jpg" alt="قطة رمادية نائمة على وسادة">

أهم خاصيتين:

• src (اختصار source أي «المصدر»): مسار ملف الصورة أو رابطها.
• alt (اختصار alternative أي «بديل»): نص يصف الصورة.

لاحظ أن الصورة ليست جزءاً من ملف HTML نفسه. الوسم <img> مثل برواز فارغ معلّق على الحائط، و src تخبر المتصفح أين يجد الصورة ليضعها داخله.

مسار الصورة في src

تنطبق هنا نفس قواعد المسارات التي تعلمتها في درس الروابط:

<!-- صورة في نفس مجلد الصفحة -->
<img src="logo.png" alt="شعار الموقع">

<!-- صورة داخل مجلد images -->
<img src="images/team.jpg" alt="فريق العمل في الاجتماع الأسبوعي">

<!-- صورة من موقع آخر -->
<img src="https://example.com/photo.jpg" alt="صورة توضيحية">

نظّم ملفاتك

اجمع صور موقعك في مجلد واحد اسمه images، وسمِّ الملفات بأسماء إنجليزية صغيرة بلا مسافات، مثل team-photo.jpg بدل Team Photo 1.JPG. هذا يجنّبك مشاكل كثيرة عند رفع الموقع.

لماذا النص البديل alt مهم جداً؟

قد تظن أن alt غير ضروري لأن الصورة ظاهرة، لكنه مهم لثلاثة أسباب:

1. المكفوفون يستخدمون قارئات شاشة تقرأ نص alt بصوت مسموع. بدونه، لن يعرفوا ما في الصورة.
2. إذا فشل تحميل الصورة (مسار خاطئ أو إنترنت ضعيف)، يظهر نص alt مكانها.
3. محركات البحث لا «ترى» الصور، بل تقرأ alt لتفهم محتواها.

كيف تكتب alt جيداً؟ صف ما يهم في الصورة بجملة قصيرة، كأنك تصفها لصديق على الهاتف:

<!-- ضعيف -->
<img src="chart.png" alt="صورة">

<!-- جيد -->
<img src="chart.png" alt="رسم بياني يوضح زيادة عدد الطلاب من 100 إلى 400 خلال عام">

أما الصور الزخرفية التي لا تضيف معلومة (مثل خط زخرفي)، فاكتب لها alt="" فارغاً، لتتجاهلها قارئات الشاشة.

العرض والارتفاع

يمكنك تحديد أبعاد الصورة بالبكسل باستخدام width و height:

<img src="logo.png" alt="شعار الموقع" width="200" height="100">

الأرقام تُكتب بدون px. وحتى لو كنت ستتحكم في الحجم لاحقاً بـ CSS، فكتابة الأبعاد الحقيقية للصورة مفيدة: المتصفح يحجز مكانها قبل تحميلها، فلا «تقفز» الصفحة عندما تظهر الصورة فجأة.

انتبه للنسبة

إذا غيّرت العرض والارتفاع بنسبة مختلفة عن الصورة الأصلية، ستظهر مشوّهة (ممطوطة أو مضغوطة). حافظ على نفس النسبة.

أشهر صيغ الصور

الصيغة	متى تستخدمها
JPG	الصور الفوتوغرافية، حجمها صغير
PNG	الصور التي تحتاج خلفية شفافة أو تفاصيل حادة
SVG	الشعارات والأيقونات، تبقى حادة مهما كبّرتها
WebP	صيغة حديثة بحجم أصغر وجودة عالية، مدعومة في كل المتصفحات الحديثة
GIF	الصور المتحركة البسيطة

التحميل الكسول

في الصفحات الطويلة المليئة بالصور، لا داعي لتحميل الصور البعيدة في أسفل الصفحة فوراً. أضف loading="lazy" ليؤجل المتصفح تحميلها حتى يقترب الزائر منها:

<img src="gallery-10.jpg" alt="صورة من رحلة المدرسة" loading="lazy">

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

الصورة مع تعليق: figure و figcaption

إذا أردت كتابة تعليق يظهر تحت الصورة، مثل الكتب والمجلات، ضعها داخل <figure> وأضف <figcaption>:

<figure>
  <img src="pyramids.jpg" alt="أهرامات الجيزة الثلاثة وقت الغروب">
  <figcaption>أهرامات الجيزة، إحدى عجائب الدنيا السبع.</figcaption>
</figure>

جرّب بنفسك

في هذا المثال صورتان من ملفات موقعنا. جرّب تغيير width، وجرّب كتابة مسار خاطئ في src لترى كيف يظهر نص alt بدلاً من الصورة:

جرّب بنفسكHTML

محرر الكود (HTML)<h2>شعار مدرسة البرمجة</h2> <img src="/favicon.svg" alt="شعار مدرسة البرمجة: علامة الكود" width="80" height="80"> <figure> <img src="/og-default.png" alt="بطاقة مدرسة البرمجة بعنوان تعلّم البرمجة بالعربي" width="300" height="158"> <figcaption>صورة المشاركة الخاصة بالموقع.</figcaption> </figure> <!-- جرّب: مسار غير موجود --> <img src="/no-image.png" alt="هذه صورة لم يجدها المتصفح">

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان alt أو كتابة كلمة «صورة» فقط: اكتب وصفاً حقيقياً مفيداً، أو alt="" للصور الزخرفية.
• مسار خاطئ أو حالة أحرف مختلفة: Photo.JPG ليست photo.jpg على أغلب الخوادم. وإذا ظهر نص alt بدل الصورة، فراجع المسار أولاً.
• رفع صور ضخمة: صورة من الكاميرا حجمها 5 ميجابايت تبطئ الصفحة جداً. صغّر أبعادها واضغطها قبل استخدامها.

اختبر نفسك

سؤال

ما الذي يظهر للزائر إذا فشل تحميل الصورة؟

نص الخاصية altقيمة srcلا شيء على الإطلاق دائماً

سؤال

أي صيغة هي الأنسب لشعار يجب أن يبقى حاداً مهما كبر حجمه؟

JPGSVGGIF

الخلاصة

• الصورة بالوسم الفارغ <img>، ومسارها في src.
• alt ضروري: لقارئات الشاشة، وعند فشل التحميل، ولمحركات البحث.
• width و height بالأرقام دون px، وتمنعان قفز الصفحة أثناء التحميل.
• اختر الصيغة المناسبة: JPG للصور، و PNG للشفافية، و SVG للشعارات.
• loading="lazy" للصور البعيدة، و <figure> مع <figcaption> لتعليق الصورة.