شرح الصور في HTML بالعربي — وسم وكيفية استخدام src

السابق التالي

صفحة الويب بدون صور كفيلم بدون مشاهد. الصور تجذب الانتباه، توضح المعلومات، وتجعل المحتوى أكثر متعة. في HTML لا "ندرج" الصورة داخل الملف — بل نربطها بالصفحة عبر مسار (URL أو مسار ملف). كل هذا بوسم واحد فارغ: <img>.

وسم الصورة `<img>` — الأساسيات

<img> هو عنصر فارغ — لا يحتاج وسم إغلاق ولا محتوى. يعتمد كلياً على خصائصه لتحديد الصورة التي ستُعرض.

<!-- الصيغة الأساسية -->
<img src="مسار-الصورة" alt="وصف الصورة">

<!-- مثال حقيقي -->
<img src="/assets/images/logo.png" alt="شعار موقع DevArabi">

خاصيتان إلزاميتان: كل صورة تحتاج على الأقل src (أين الصورة؟) وalt (ماذا تصور؟). بدونهما الصورة إما لا تظهر، أو تضر بـ SEO موقعك.

شرح كل خاصية بالتفصيل

1. خاصية `src` — مصدر الصورة

تحدد مكان ملف الصورة. يمكن أن يكون:

<!-- صورة من نفس مجلد الموقع -->
<img src="photo.jpg" alt="صورتي">

<!-- صورة في مجلد فرعي -->
<img src="/assets/images/banner.jpg" alt="بانر الموقع">

<!-- صورة من الإنترنت (URL خارجي) -->
<img src="https://example.com/photo.jpg" alt="صورة خارجية">

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

2. خاصية `alt` — النص البديل (الأهم لـ SEO)

alt اختصار لـ Alternative Text. هو النص الذي يظهر عوضاً عن الصورة في حالتين:

إذا فشلت الصورة في التحميل (ضعف الإنترنت، خطأ في المسار)
للمستخدمين المكفوفين الذين يستخدمون قارئات الشاشة (Screen Readers)

<!-- ✅ alt وصفي ومفيد -->
<img src="team.jpg" alt="فريق DevArabi يعمل على مشروع ويب">

<!-- ✅ alt فارغ — للصور الزخرفية فقط -->
<img src="decoration.png" alt="">

<!-- ❌ alt سيئ — لا يصف الصورة -->
<img src="img1.jpg" alt="صورة">

SEO مهم: جوجل لا يرى الصور — لكنه يقرأ alt. صف الصورة بدقة وضع الكلمات المفتاحية المناسبة فيها. هذا يُحسّن ظهورك في Google Images وفي نتائج البحث العادية.

3. خاصيتا `width` و`height` — الأبعاد

تحددان عرض وارتفاع الصورة بالبكسل. لماذا هاتان الخاصيتان مهمتان جداً؟

<img src="photo.jpg" alt="صورة تجريبية" width="400" height="300">

عندما تُحدد الأبعاد مسبقاً، يحجز المتصفح المساحة قبل تحميل الصورة. هذا يمنع ظاهرة "اهتزاز الصفحة" (Layout Shift) التي تزعج الزوار وتضر بـ SEO.

نصيحة: حدد الأبعاد الحقيقية للصورة دائماً. لو أردت تغيير حجم الصورة بصرياً، استخدم CSS: img { width: 100%; height: auto; } بدلاً من تغيير قيم width وheight في HTML.

4. خاصية `title` — نص التلميح

نص يظهر عند تمرير الماوس فوق الصورة (Tooltip).

<img
    src="/assets/images/logo.png"
    alt="شعار DevArabi"
    title="انقر للعودة للصفحة الرئيسية"
    width="200"
    height="80"
>

صيغ الصور المدعومة في الويب

الصيغة	الامتداد	متى تستخدمها؟	مميزاتها
WebP	`.webp`	الخيار الأول دائماً	أصغر حجم + جودة عالية + شفافية
JPEG/JPG	`.jpg`	الصور الفوتوغرافية	حجم صغير — بدون شفافية
PNG	`.png`	الشعارات، الصور بخلفية شفافة	جودة عالية + شفافية — حجم أكبر
SVG	`.svg`	الأيقونات، الرسوم البيانية	قابلة للتكبير بلا تشويه
GIF	`.gif`	صور متحركة بسيطة	دعم الحركة — جودة محدودة

الصور المتجاوبة — للموبايل والكمبيوتر

لجعل الصورة تتكيف مع حجم الشاشة تلقائياً، هناك حلان:

الحل الأول: CSS بسيط

<!-- في HTML -->
<img src="banner.jpg" alt="بانر الموقع" style="max-width: 100%; height: auto;">

الحل الثاني: وسم `<picture>` للصور المتعددة

يتيح لك تحديد صور مختلفة لأحجام شاشات مختلفة:

<picture>
    <!-- للشاشات الكبيرة -->
    <source media="(min-width: 768px)" srcset="banner-large.webp">
    <!-- للموبايل (الافتراضي) -->
    <img src="banner-small.webp" alt="بانر الموقع">
</picture>

مثال عملي كامل — معرض صور بسيط

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>معرض الصور</title>
</head>
<body>

    <h1>معرض صور البرمجة</h1>

    <!-- صورة عادية -->
    <img
        src="/assets/images/coding.jpg"
        alt="مبرمج يكتب كوداً على حاسوبه"
        width="800"
        height="400"
        title="تعلم البرمجة مع DevArabi"
    >

    <p>تعلم <strong>HTML</strong> من الصفر معنا.</p>

    <!-- صورة قابلة للنقر -->
    <a href="/courses/html/intro.php">
        <img
            src="/assets/images/html-course.jpg"
            alt="دورة HTML بالعربي — انقر للبدء"
            width="300"
            height="200"
        >
    </a>

</body>
</html>

الأسئلة الشائعة — FAQ

هل alt إجباري؟

تقنياً لا — الصفحة تعمل بدونه. لكن عملياً نعم: بدون alt تُخسر نقاطاً في SEO، وتُعقّد الأمور لمستخدمي قارئات الشاشة. اجعل كتابة alt عادةً لا تتركها.

ما الفرق بين تحديد الحجم في HTML vs CSS؟

تحديد width وheight في HTML يُخبر المتصفح بالأبعاد الأصلية قبل التحميل (يمنع اهتزاز الصفحة). CSS يتحكم في الحجم المعروض فعلياً. الأفضل: حدد الأبعاد الأصلية في HTML، ثم تحكم في الحجم الفعلي بـ CSS.

لماذا صيغة WebP هي الأفضل؟

جوجل طوّرت WebP خصيصاً للويب. الصور بهذه الصيغة أصغر بـ 25-34% من JPG وbdون فقدان واضح في الجودة. وهي مدعومة في كل المتصفحات الحديثة.

هل يمكن تضمين صورة SVG مباشرة في HTML؟

نعم! يمكنك إما ربطها كصورة عادية <img src="icon.svg">، أو كتابة كود SVG مباشرة داخل صفحة HTML. الطريقة الثانية تُتيح التحكم فيها بـ CSS وJavaScript.

ممتاز! أتقنت الآن إضافة الصور في HTML بشكل احترافي. في الدرس القادم سنتعلم مسارات الملفات (File Paths) — كيف تصل إلى أي ملف في مشروعك بالمسار الصحيح.

السابق التالي

DevArabi

دورة تعلم HTML

شرح الصور في HTML بالعربي — وسم وكيفية استخدام src

وسم الصورة <img> — الأساسيات

شرح كل خاصية بالتفصيل

1. خاصية src — مصدر الصورة

2. خاصية alt — النص البديل (الأهم لـ SEO)

3. خاصيتا width وheight — الأبعاد

4. خاصية title — نص التلميح