<img>

وسم الصور <img>

وسم img يعرض صورة في الصفحة عبر src، مع نص بديل alt إلزامي عمليًّا للوصولية والسيو.

وسم ذاتي الإغلاق (لا يحتاج وسم إغلاق) يجلب الصورة من المسار المحدد في src ويعرضها مكانه. الخاصيتان اللتان لا تُهملان أبدًا: alt الذي يصف الصورة نصيًّا (يظهر عند فشل التحميل، وتقرؤه قارئات الشاشة، وتفهمه محركات البحث)، وwidth/height اللذان يحجزان مساحة الصورة قبل تحميلها فيمنعان «قفزة» التخطيط المزعجة.

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

الصياغة

<img src="photo.jpg" alt="وصف الصورة" width="600" height="400">

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<img
  src="https://placehold.co/300x150/7c5cff/white?text=The+Code+Fix"
  alt="شعار تجريبي بخلفية بنفسجية"
  width="300" height="150">

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
src	مسار الصورة — نسبي من موقعك أو URL كامل
alt	الوصف النصي البديل — إلزامي عمليًّا: وصولية + SEO + يظهر عند فشل التحميل
width / height	أبعاد العرض — تحجز المساحة مسبقًا وتمنع قفزات التخطيط (CLS)
loading="lazy"	تحميل كسول للصور تحت طي الصفحة — تحسين أداء مجاني

💡 نصائح عملية

صورة زخرفية بحتة؟ اكتب alt="" فارغًا عمدًا كي تتجاهلها قارئات الشاشة
حدد width وheight دائمًا حتى لو ضبطت الحجم بـ CSS — لحجز المساحة فقط
الصيغ الحديثة WebP/AVIF أصغر بكثير من JPG/PNG بنفس الجودة

⚠️ أخطاء شائعة

إهمال alt نهائيًّا — يخسرك ترتيب صور Google ويكسر تجربة قارئات الشاشة
استخدام صورة ضخمة وتصغيرها بالعرض فقط — حمّل مقاسًا مناسبًا
كتابة <img></img> — الوسم ذاتي الإغلاق ولا يحتاج إغلاقًا

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs