13. تضمين الصور (<img>)

يتم تضمين الصور باستخدام وسم <img> ذاتي الإغلاق. يتطلب خاصيتين إلزاميتين.

13.1 الخصائص الإلزامية

1. src (المصدر): تحدد المسار (المطلق أو النسبي) إلى ملف الصورة.
2. alt (النص البديل): يوفر وصفاً نصياً للصورة. هذا حيوي لإمكانية الوصول (قارئات الشاشة) ولـ SEO، ويظهر إذا فشلت الصورة في التحميل.

html <img src="images/header-photo.jpg" alt="مجموعة كبيرة من الأشخاص يتعاونون في مشروع حاسوبي.">

13.2 تحديد الحجم

بينما ستستخدم CSS بشكل أساسي للتحكم في حجم الصورة، يمكنك تعيين الأبعاد الافتراضية باستخدام خاصيتي width و height (بالبكسل، بدون وحدة px).

html <img src="logo.png" alt="شعار الشركة" width="150" height="50">

أفضل الممارسات: قم دائماً بتعريف width و height لأسباب تتعلق بالأداء. هذا يسمح للمتصفح بحجز المساحة قبل تحميل الصورة، مما يمنع تحولات التخطيط (layout shifts).