لإضافة صورة في HTML نستخدم وسم <img>. يعمل بـURL (من خادم بعيد) أو مسار محلي.

الاستخدام الأساسي

<img src="resim.jpg" alt="وصف الصورة">

<img> وسم منفرد — لا إغلاق (</img>).

السمات المهمة

• src: URL أو مسار (إلزامي).
• alt: نص بديل — عند فشل التحميل أو لقارئ الشاشة (يُعتبر إلزاميًا).
• width / height: بالبكسل.
• title: وصف قصير عند hover.

طريقتان: URL مقابل محلي

1. URL (بعيد)

<img src="https://www.burakbayram.com/wp-content/uploads/2026/foto.jpg" alt="منظر">

2. ملف محلي

في نفس مجلد HTML:

<img src="foto.jpg" alt="منظر">

في مجلد فرعي:

<img src="images/foto.jpg" alt="منظر">

2026 — أفضل ممارسات <img>

• loading=”lazy”: لا يُحمّل حتى يظهر — سرعة +.
• decoding=”async”: decode في الخلفية.
• srcset: ملفات لدقات مختلفة.
• sizes: أحجام لـviewport مختلف.
• WebP / AVIF: أصغر 50–80% من JPG/PNG.
• <picture>: art-direction وfallback.

مثال حديث

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="منظر"
       width="800" height="600"
       loading="lazy" decoding="async">
</picture>