دليل شامل لإدراج الصور في HTML مع تحسين الأداء وSEO

ouwayess1@gmail.com 16 مارس، 2025

0 12 2 دقائق

المقدمة

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

كيفية استخدام وسم <img> باحترافية.
تحسين الصور لزيادة سرعة الموقع.
نصائح SEO لجعل الصور صديقة لمحركات البحث.

1. الهيكل الأساسي لوسم `<img>`

1.1 السمة الإجبارية `src`

الوظيفة: تُحدد مسار الصورة (URL).
مثال:
html
Copy
```
<img src="images/logo.png">  
```
Run HTML

1.2 السمة المهمة `alt`

الوظيفة: وصف نصي للصورة (يظهر إذا فشل تحميل الصورة أو للمكفوفين).

مثال:

<img src="cat.jpg" alt="قطة بيضاء تلعب بكرة صوف">

Run HTML

1.3 السمات الاختيارية `width` و `height`

الوظيفة: تحديد أبعاد الصورة (بالبكسل).

مثال:

<img src="product.jpg" alt="حذاء رياضي" width="300" height="200">

Run HTML

2. تحسين الصور لزيادة سرعة الموقع

2.1 اختيار تنسيق الصورة المناسب

التنسيق	الاستخدام الأمثل
JPEG	الصور الفوتوغرافية (ذات الألوان المتدرجة).
PNG	الصور ذات الخلفية الشفافة أو التفاصيل الدقيقة.
WebP	تنسيق حديث يوفر جودة عالية مع حجم صغير (مدعوم من معظم المتصفحات).

مثال:

<img src="image.webp" alt="مثال لصورة WebP">

Run HTML

2.2 ضغط الصور دون فقدان الجودة

أدوات مجانية:
- TinyPNG
- Squoosh
مثال:
- حجم الصورة قبل الضغط: 1MB.
- بعد الضغط: 200KB (بفقدان غير ملحوظ).

2.3 استخدام الصور المتجاوبة (Responsive Images)

السمات srcset و sizes:

<img src="small.jpg"  
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"  
     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"  
     alt="صورة متجاوبة">

Run HTML

التفسير:
- srcset: يُحدد مصادر الصور المختلفة وأحجامها.
- sizes: يُحدد حجم الصورة بناءً على عرض الشاشة.

2.4 التحميل البطيء (Lazy Loading)

السمة `loading=”lazy”:**
html
Copy
```
<img src="image.jpg" alt="صورة" loading="lazy">  
```
Run HTML
- الفائدة: تحميل الصور فقط عندما تكون مرئية للمستخدم (يقلل وقت التحميل الأولي).

3. تحسين الصور لـ SEO

3.1 استخدام كلمات مفتاحية في سمة `alt`

خطأ شائع:

<img src="product.jpg" alt="منتج">

Run HTML

التصحيح:

<img src="product.jpg" alt="حذاء رياضي أديداس للرجال - لون أسود">

Run HTML

3.2 تسمية الملفات بشكل وصفي

خطأ شائع:
html
Copy
```
<img src="IMG_0234.jpg" alt="...">  
```
Run HTML

التصحيح:

<img src="black-running-shoes.jpg" alt="...">

Run HTML

3.3 استخدام البيانات المنظمة (Schema Markup)

مثال:

<script type="application/ld+json">  
{  
  "@context": "https://schema.org",  
  "@type": "ImageObject",  
  "contentUrl": "https://example.com/image.jpg",  
  "description": "حذاء رياضي أديداس للرجال - لون أسود"  
}  
</script>

Run HTML

4. تحسين إمكانية الوصول (Accessibility)

4.1 وصف الصور المعقدة بـ `longdesc`

مثال:
html
Copy
```
<img src="chart.png" alt="رسم بياني" longdesc="chart-description.html">  
```
Run HTML
- ملاحظة: اكتب وصفًا تفصيليًا في صفحة منفصلة ورابطها هنا.

4.2 تجنب الصور النصية

الخطأ: استخدام صورة تحتوي على نص بدلًا من HTML.
الحل: استخدم HTML + CSS للنصوص (أسهل للقراءة ولتحسين SEO).

5. التعامل مع الصور في الخلفية (CSS vs HTML)

5.1 متى تستخدم `<img>`؟

إذا كانت الصورة جزءًا من المحتوى (مثل صور المنتجات، الشعار).

5.2 متى تستخدم خلفية CSS؟

إذا كانت الصورة جزءًا من التصميم (مثل الخلفيات، الزخارف).

مثال:

.header {  
  background-image: url("header-bg.jpg");  
  background-size: cover;  
}

6. أخطاء شائعة يجب تجنبها

الصور الضخمة غير المضغوطة: تبطئ الموقع بشكل كبير.
إهمال سمة alt: يؤثر على SEO وإمكانية الوصول.
استخدام أبعاد غير صحيحة: يؤدي إلى تشويه الصورة.
عدم دعم التنسيقات الحديثة: مثل WebP.

7. أدوات مُساعدة

تحليل الأداء:
- Google PageSpeed Insights.
تحويل التنسيقات:
- CloudConvert.
إنشاء صور متجاوبة:
- Responsive Breakpoints Generator.

8. مثال عملي شامل

<!DOCTYPE html>  
<html lang="ar" dir="rtl">  
<head>  
    <meta charset="UTF-8">  
    <title>متجر أحذية رياضية</title>  
    <meta name="description" content="اشتري أفضل الأحذية الرياضية بأسعار منافسة">  
</head>  
<body>  
    <header>  
        <img src="logo.webp" alt="شعار متجر الأحذية الرياضية" width="150" loading="lazy">  
    </header>  

    <section>  
        <h1>أحذية رياضية للرجال</h1>  
        <img src="shoes.jpg"  
             alt="حذاء رياضي Nike باللون الأسود - خفيف الوزن"  
             width="600"  
             srcset="shoes-small.jpg 300w, shoes-medium.jpg 600w"  
             sizes="(max-width: 768px) 300px, 600px">  
    </section>  

    <script type="application/ld+json">  
    {  
        "@context": "https://schema.org",  
        "@type": "Product",  
        "image": "https://example.com/shoes.jpg",  
        "description": "حذاء رياضي Nike باللون الأسود - خفيف الوزن"  
    }  
    </script>  
</body>  
</html>