الدليل الشامل لتاغ الصور HTML

مقدمة حول تاغ `<img>`

تاغ <img> هو عنصر HTML يستخدم لعرض الصور في صفحات الويب. وهو عنصر فارغ (void element) أي لا يحتاج إلى إغلاق، ويعتبر من أهم العناصر في تطوير الويب الحديث.

الصيغة الأساسية:

<img src="path/to/image.jpg" alt="وصف الصورة">

<img src="path/to/image.jpg" alt="وصف الصورة">

HTML

خصائص (Attributes) تاغ `<img>`

الخصائص الأساسية الإجبارية

`src` (Source)

الغرض: تحديد مسار الصورة
إجباري: نعم
أمثلة:

<!-- مسار نسبي -->
<img src="images/logo.png" alt="شعار الشركة">

<!-- مسار مطلق -->
<img src="/assets/images/banner.jpg" alt="بانر الصفحة">

<!-- رابط خارجي -->
<img src="https://example.com/image.jpg" alt="صورة خارجية">

<!-- Data URL -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="صورة مشفرة">

<!-- مسار نسبي -->
<img src="images/logo.png" alt="شعار الشركة">

<!-- مسار مطلق -->
<img src="/assets/images/banner.jpg" alt="بانر الصفحة">

<!-- رابط خارجي -->
<img src="https://example.com/image.jpg" alt="صورة خارجية">

<!-- Data URL -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="صورة مشفرة">

HTML

`alt` (Alternative Text)

الغرض: نص بديل للصورة عند عدم التحميل أو لقارئات الشاشة
إجباري: نعم (من ناحية إمكانية الوصول والSEO)
أمثلة:

<!-- جيد -->
<img src="cat.jpg" alt="قطة رمادية تجلس على عتبة النافذة">

<!-- سيء -->
<img src="cat.jpg" alt="صورة">
<img src="cat.jpg" alt="cat.jpg">

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

<!-- جيد -->
<img src="cat.jpg" alt="قطة رمادية تجلس على عتبة النافذة">

<!-- سيء -->
<img src="cat.jpg" alt="صورة">
<img src="cat.jpg" alt="cat.jpg">

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

HTML

الخصائص الاختيارية المهمة

`width` و `height`

<!-- بالبيكسل -->
<img src="image.jpg" alt="وصف" width="300" height="200">

<!-- نسبي (غير مستحب) -->
<img src="image.jpg" alt="وصف" width="50%">

<!-- بالبيكسل -->
<img src="image.jpg" alt="وصف" width="300" height="200">

<!-- نسبي (غير مستحب) -->
<img src="image.jpg" alt="وصف" width="50%">

HTML

`title`

<img src="image.jpg" alt="وصف الصورة" title="معلومات إضافية تظهر عند التحويم">

<img src="image.jpg" alt="وصف الصورة" title="معلومات إضافية تظهر عند التحويم">

HTML

`loading`

<!-- التحميل الكسول -->
<img src="image.jpg" alt="وصف" loading="lazy">

<!-- التحميل الفوري -->
<img src="image.jpg" alt="وصف" loading="eager">

<!-- التحميل الكسول -->
<img src="image.jpg" alt="وصف" loading="lazy">

<!-- التحميل الفوري -->
<img src="image.jpg" alt="وصف" loading="eager">

HTML

`decoding`

<!-- فك التشفير غير المتزامن -->
<img src="image.jpg" alt="وصف" decoding="async">

<!-- فك التشفير المتزامن -->
<img src="image.jpg" alt="وصف" decoding="sync">

<!-- تلقائي -->
<img src="image.jpg" alt="وصف" decoding="auto">

<!-- فك التشفير غير المتزامن -->
<img src="image.jpg" alt="وصف" decoding="async">

<!-- فك التشفير المتزامن -->
<img src="image.jpg" alt="وصف" decoding="sync">

<!-- تلقائي -->
<img src="image.jpg" alt="وصف" decoding="auto">

HTML

`fetchpriority`

<!-- أولوية عالية -->
<img src="hero-image.jpg" alt="صورة البطل" fetchpriority="high">

<!-- أولوية منخفضة -->
<img src="footer-logo.jpg" alt="شعار التذييل" fetchpriority="low">

<!-- أولوية عالية -->
<img src="hero-image.jpg" alt="صورة البطل" fetchpriority="high">

<!-- أولوية منخفضة -->
<img src="footer-logo.jpg" alt="شعار التذييل" fetchpriority="low">

HTML

تقنيات الصور المتقدمة

الصور المتجاوبة (Responsive Images)

استخدام `srcset`

<!-- أحجام مختلفة -->
<img src="image-400.jpg" 
     srcset="image-400.jpg 400w, 
             image-800.jpg 800w, 
             image-1200.jpg 1200w"
     sizes="(max-width: 400px) 400px, 
            (max-width: 800px) 800px, 
            1200px"
     alt="صورة متجاوبة">

<!-- كثافة البكسل -->
<img src="image.jpg"
     srcset="image.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
     alt="صورة عالية الدقة">

<!-- أحجام مختلفة -->
<img src="image-400.jpg" 
     srcset="image-400.jpg 400w, 
             image-800.jpg 800w, 
             image-1200.jpg 1200w"
     sizes="(max-width: 400px) 400px, 
            (max-width: 800px) 800px, 
            1200px"
     alt="صورة متجاوبة">

<!-- كثافة البكسل -->
<img src="image.jpg"
     srcset="image.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
     alt="صورة عالية الدقة">

HTML

عنصر `<picture>`

<picture>
  <source media="(max-width: 600px)" srcset="mobile-image.jpg">
  <source media="(max-width: 1200px)" srcset="tablet-image.jpg">
  <source srcset="desktop-image.jpg">
  <img src="fallback-image.jpg" alt="صورة متجاوبة">
</picture>

<picture>
  <source media="(max-width: 600px)" srcset="mobile-image.jpg">
  <source media="(max-width: 1200px)" srcset="tablet-image.jpg">
  <source srcset="desktop-image.jpg">
  <img src="fallback-image.jpg" alt="صورة متجاوبة">
</picture>

HTML

تنسيقات الصور الحديثة

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="صورة مع تنسيقات متعددة">
</picture>

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="صورة مع تنسيقات متعددة">
</picture>

HTML

أفضل الممارسات للSEO

تحسين النص البديل (Alt Text)

<!-- ممتاز -->
<img src="pizza-margherita.jpg" 
     alt="بيتزا مارجريتا طازجة بالطماطم والبازيليكا والموزاريلا">

<!-- جيد -->
<img src="ceo-photo.jpg" 
     alt="أحمد محمد، الرئيس التنفيذي لشركة التقنية">

<!-- تجنب -->
<img src="image1.jpg" alt="صورة">
<img src="logo.png" alt="لوجو شركة لوجو صورة شعار">

<!-- ممتاز -->
<img src="pizza-margherita.jpg" 
     alt="بيتزا مارجريتا طازجة بالطماطم والبازيليكا والموزاريلا">

<!-- جيد -->
<img src="ceo-photo.jpg" 
     alt="أحمد محمد، الرئيس التنفيذي لشركة التقنية">

<!-- تجنب -->
<img src="image1.jpg" alt="صورة">
<img src="logo.png" alt="لوجو شركة لوجو صورة شعار">

HTML

أسماء الملفات المحسنة

<!-- جيد -->
<img src="arabic-coffee-traditional-serving.jpg" alt="قهوة عربية تقليدية">

<!-- سيء -->
<img src="IMG_001.jpg" alt="قهوة">
<img src="صورة-قهوة.jpg" alt="قهوة"> <!-- تجنب الأحرف غير اللاتينية -->

<!-- جيد -->
<img src="arabic-coffee-traditional-serving.jpg" alt="قهوة عربية تقليدية">

<!-- سيء -->
<img src="IMG_001.jpg" alt="قهوة">
<img src="صورة-قهوة.jpg" alt="قهوة"> <!-- تجنب الأحرف غير اللاتينية -->

HTML

البيانات المنظمة (Structured Data)

<!-- مع Schema.org -->
<div itemscope itemtype="https://schema.org/ImageObject">
  <img src="product-image.jpg" 
       alt="ساعة ذكية سوداء"
       itemprop="contentUrl">
  <meta itemprop="description" content="ساعة ذكية عصرية باللون الأسود">
  <meta itemprop="name" content="ساعة ذكية برو">
</div>

<!-- مع Schema.org -->
<div itemscope itemtype="https://schema.org/ImageObject">
  <img src="product-image.jpg" 
       alt="ساعة ذكية سوداء"
       itemprop="contentUrl">
  <meta itemprop="description" content="ساعة ذكية عصرية باللون الأسود">
  <meta itemprop="name" content="ساعة ذكية برو">
</div>

HTML

إمكانية الوصول (Accessibility)

قواعد النص البديل

للصور المعلوماتية: وصف مفصل للمحتوى
للصور الزخرفية: alt=""
للصور المعقدة: استخدم longdesc أو وصف في النص

<!-- صورة معلوماتية -->
<img src="chart.png" 
     alt="مخطط يظهر زيادة المبيعات بنسبة 30% خلال الربع الأخير">

<!-- صورة زخرفية -->
<img src="decoration-border.png" alt="" role="presentation">

<!-- صورة معقدة -->
<img src="complex-diagram.png" 
     alt="مخطط تنظيمي للشركة"
     longdesc="description.html">

<!-- صورة معلوماتية -->
<img src="chart.png" 
     alt="مخطط يظهر زيادة المبيعات بنسبة 30% خلال الربع الأخير">

<!-- صورة زخرفية -->
<img src="decoration-border.png" alt="" role="presentation">

<!-- صورة معقدة -->
<img src="complex-diagram.png" 
     alt="مخطط تنظيمي للشركة"
     longdesc="description.html">

HTML

استخدام ARIA

<img src="loading.gif" 
     alt="جاري التحميل" 
     aria-live="polite"
     role="img">

<img src="error-icon.png" 
     alt="خطأ في التحميل" 
     aria-describedby="error-message">

<img src="loading.gif" 
     alt="جاري التحميل" 
     aria-live="polite"
     role="img">

<img src="error-icon.png" 
     alt="خطأ في التحميل" 
     aria-describedby="error-message">

HTML

الأداء والتحسين

التحميل الكسول (Lazy Loading)

<!-- تحميل كسول أصلي -->
<img src="image.jpg" alt="وصف" loading="lazy">

<!-- مع Intersection Observer (JavaScript) -->
<img data-src="image.jpg" 
     alt="وصف" 
     class="lazy-load"
     src="placeholder.jpg">

<!-- تحميل كسول أصلي -->
<img src="image.jpg" alt="وصف" loading="lazy">

<!-- مع Intersection Observer (JavaScript) -->
<img data-src="image.jpg" 
     alt="وصف" 
     class="lazy-load"
     src="placeholder.jpg">

HTML

الحجم المناسب

<!-- تحديد الأبعاد لتجنب Layout Shift -->
<img src="image.jpg" 
     alt="وصف" 
     width="300" 
     height="200"
     style="max-width: 100%; height: auto;">

<!-- تحديد الأبعاد لتجنب Layout Shift -->
<img src="image.jpg" 
     alt="وصف" 
     width="300" 
     height="200"
     style="max-width: 100%; height: auto;">

HTML

ضغط الصور

JPEG: للصور الفوتوغرافية (جودة 85-90%)
PNG: للصور بشفافية أو ألوان قليلة
WebP: تنسيق حديث بضغط أفضل
AVIF: الأحدث والأكثر كفاءة

الأخطاء الشائعة والمحاذير

أخطاء تقنية شائعة

❌ عدم تحديد النص البديل

<!-- خطأ -->
<img src="image.jpg">

<!-- خطأ -->
<img src="image.jpg">

HTML

✅ الحل الصحيح

❌ نص بديل غير مفيد

<img src="image.jpg" alt="وصف مناسب للصورة">

<img src="image.jpg" alt="وصف مناسب للصورة">

HTML

<img src="photo.jpg" alt="صورة">
<img src="image.png" alt="image.png">
<img src="pic.jpg" alt="انقر هنا">

<img src="photo.jpg" alt="صورة">
<img src="image.png" alt="image.png">
<img src="pic.jpg" alt="انقر هنا">

HTML

❌ عدم تحديد الأبعاد

<img src="large-image.jpg" alt="صورة كبيرة">

<img src="large-image.jpg" alt="صورة كبيرة">

HTML

✅ الحل الصحيح

<img src="large-image.jpg" 
     alt="صورة كبيرة" 
     width="800" 
     height="600"
     style="max-width: 100%; height: auto;">

<img src="large-image.jpg" 
     alt="صورة كبيرة" 
     width="800" 
     height="600"
     style="max-width: 100%; height: auto;">

HTML

أخطاء في الأداء

❌ عدم استخدام الصور المتجاوبة

<img src="huge-image-4k.jpg" alt="صورة">

<img src="huge-image-4k.jpg" alt="صورة">

HTML

✅ الحل الصحيح

<img src="image-400.jpg"
     srcset="image-400.jpg 400w, 
             image-800.jpg 800w, 
             image-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px, 
            (max-width: 1200px) 800px, 
            1600px"
     alt="صورة متجاوبة">

<img src="image-400.jpg"
     srcset="image-400.jpg 400w, 
             image-800.jpg 800w, 
             image-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px, 
            (max-width: 1200px) 800px, 
            1600px"
     alt="صورة متجاوبة">

HTML

❌ عدم استخدام التحميل الكسول

<img src="image-below-fold.jpg" alt="صورة في أسفل الصفحة">

<img src="image-below-fold.jpg" alt="صورة في أسفل الصفحة">

HTML

أخطاء في الأمان

❌ صور من مصادر غير موثوقة

<img src="http://untrusted-site.com/malicious.jpg" alt="صورة">

<img src="http://untrusted-site.com/malicious.jpg" alt="صورة">

HTML

✅ الحل الأفضل

<!--  موثوق CDN استضافة محلية أو  -->
<img src="/assets/images/safe-image.jpg" alt="صورة آمنة">

<!-- مع Content Security Policy -->
<img src="https://trusted-cdn.com/image.jpg" 
     alt="صورة من CDN موثوق"
     referrerpolicy="no-referrer">

<!--  موثوق CDN استضافة محلية أو  -->
<img src="/assets/images/safe-image.jpg" alt="صورة آمنة">

<!-- مع Content Security Policy -->
<img src="https://trusted-cdn.com/image.jpg" 
     alt="صورة من CDN موثوق"
     referrerpolicy="no-referrer">

HTML

أمثلة عملية متقدمة

صورة بطل متجاوبة مع أولوية عالية

<picture>
  <source media="(max-width: 600px)" 
          srcset="hero-mobile.webp" 
          type="image/webp">
  <source media="(max-width: 600px)" 
          srcset="hero-mobile.jpg">
  <source srcset="hero-desktop.webp" 
          type="image/webp">
  <img src="hero-desktop.jpg" 
       alt="منظر طبيعي خلاب للجبال مع غروب الشمس"
       width="1200" 
       height="600"
       fetchpriority="high"
       decoding="async">
</picture>

<picture>
  <source media="(max-width: 600px)" 
          srcset="hero-mobile.webp" 
          type="image/webp">
  <source media="(max-width: 600px)" 
          srcset="hero-mobile.jpg">
  <source srcset="hero-desktop.webp" 
          type="image/webp">
  <img src="hero-desktop.jpg" 
       alt="منظر طبيعي خلاب للجبال مع غروب الشمس"
       width="1200" 
       height="600"
       fetchpriority="high"
       decoding="async">
</picture>

HTML

معرض صور مع التحميل الكسول

<div class="gallery">
  <img src="placeholder.jpg" 
       data-src="gallery-1.jpg"
       alt="لوحة فنية تجريدية بألوان زاهية"
       loading="lazy"
       class="lazy-image"
       width="300" 
       height="200">
  
  <img src="placeholder.jpg"
       data-src="gallery-2.jpg" 
       alt="منحوتة رخامية كلاسيكية في المتحف"
       loading="lazy"
       class="lazy-image"
       width="300" 
       height="200">
</div>

<div class="gallery">
  <img src="placeholder.jpg" 
       data-src="gallery-1.jpg"
       alt="لوحة فنية تجريدية بألوان زاهية"
       loading="lazy"
       class="lazy-image"
       width="300" 
       height="200">
  
  <img src="placeholder.jpg"
       data-src="gallery-2.jpg" 
       alt="منحوتة رخامية كلاسيكية في المتحف"
       loading="lazy"
       class="lazy-image"
       width="300" 
       height="200">
</div>

HTML

صورة منتج للتجارة الإلكترونية

<div itemscope itemtype="https://schema.org/Product">
  <picture>
    <source srcset="product-main.avif" type="image/avif">
    <source srcset="product-main.webp" type="image/webp">
    <img src="product-main.jpg"
         alt="هاتف ذكي أسود بشاشة 6.5 بوصة وكاميرا ثلاثية"
         itemprop="image"
         width="400" 
         height="400"
         loading="lazy">
  </picture>
</div>

<div itemscope itemtype="https://schema.org/Product">
  <picture>
    <source srcset="product-main.avif" type="image/avif">
    <source srcset="product-main.webp" type="image/webp">
    <img src="product-main.jpg"
         alt="هاتف ذكي أسود بشاشة 6.5 بوصة وكاميرا ثلاثية"
         itemprop="image"
         width="400" 
         height="400"
         loading="lazy">
  </picture>
</div>

HTML

اختبار وتصحيح الأخطاء

أدوات الاختبار

Chrome DevTools: فحص الصور والشبكة
Lighthouse: تحليل الأداء وإمكانية الوصول
WAVE: اختبار إمكانية الوصول
GTmetrix: تحليل سرعة التحميل

نصائح التصحيح

<!-- إضافة معالج خطأ -->
<img src="image.jpg" 
     alt="وصف الصورة"
     onerror="this.src='fallback-image.jpg'; this.onerror=null;">

<!-- التحقق من التحميل -->
<img src="image.jpg" 
     alt="وصف الصورة"
     onload="console.log('تم تحميل الصورة بنجاح')"
     onerror="console.error('فشل في تحميل الصورة')">

<!-- إضافة معالج خطأ -->
<img src="image.jpg" 
     alt="وصف الصورة"
     onerror="this.src='fallback-image.jpg'; this.onerror=null;">

<!-- التحقق من التحميل -->
<img src="image.jpg" 
     alt="وصف الصورة"
     onload="console.log('تم تحميل الصورة بنجاح')"
     onerror="console.error('فشل في تحميل الصورة')">

HTML

نصائح للتحسين المستمر

المراقبة والقياس

راقب Core Web Vitals خاصة LCP للصور
استخدم Real User Monitoring (RUM)
قس تأثير تغييرات الصور على الأداء

أتمتة التحسين

<!-- استخدام Build Tools للتحسين التلقائي -->
<!-- مثال مع Webpack أو Vite -->
<img src="./images/hero.jpg?w=800&f=webp" alt="صورة محسنة تلقائياً">

<!-- استخدام Build Tools للتحسين التلقائي -->
<!-- مثال مع Webpack أو Vite -->
<img src="./images/hero.jpg?w=800&f=webp" alt="صورة محسنة تلقائياً">

HTML

مراجعة دورية

تحقق من الروابط المكسورة للصور
راجع النصوص البديلة بانتظام
قم بتحديث التنسيقات للاستفادة من الأحدث

خلاصة المحاذير المهمة

لا تهمل النص البديل أبداً
حدد الأبعاد لتجنب Layout Shift
استخدم التنسيقات الحديثة (WebP, AVIF)
طبق التحميل الكسول للصور تحت الطية
اختبر على أجهزة وسرعات مختلفة
لا تعتمد على الصور لنقل معلومات نصية مهمة
اهتم بأمان مصادر الصور
راجع الأداء بانتظام

هذا الدليل يغطي جميع جوانب استخدام تاغ <img> بشكل احترافي ومحسن لمحركات البحث وإمكانية الوصول.

مقدمة حول تاغ <img>

الصيغة الأساسية:

خصائص (Attributes) تاغ <img>

الخصائص الأساسية الإجبارية

src (Source)

alt (Alternative Text)

الخصائص الاختيارية المهمة

width و height

title

loading

decoding

fetchpriority

تقنيات الصور المتقدمة

الصور المتجاوبة (Responsive Images)

استخدام srcset

عنصر <picture>

تنسيقات الصور الحديثة

أفضل الممارسات للSEO

تحسين النص البديل (Alt Text)

أسماء الملفات المحسنة

البيانات المنظمة (Structured Data)

إمكانية الوصول (Accessibility)

قواعد النص البديل

استخدام ARIA

الأداء والتحسين

التحميل الكسول (Lazy Loading)

الحجم المناسب

ضغط الصور

الأخطاء الشائعة والمحاذير

أخطاء تقنية شائعة

❌ عدم تحديد النص البديل

✅ الحل الصحيح

❌ نص بديل غير مفيد

❌ عدم تحديد الأبعاد

✅ الحل الصحيح

أخطاء في الأداء

❌ عدم استخدام الصور المتجاوبة

✅ الحل الصحيح

❌ عدم استخدام التحميل الكسول

أخطاء في الأمان

❌ صور من مصادر غير موثوقة

✅ الحل الأفضل

أمثلة عملية متقدمة

صورة بطل متجاوبة مع أولوية عالية

معرض صور مع التحميل الكسول

صورة منتج للتجارة الإلكترونية

اختبار وتصحيح الأخطاء

أدوات الاختبار

نصائح التصحيح

نصائح للتحسين المستمر

المراقبة والقياس

أتمتة التحسين

مراجعة دورية

خلاصة المحاذير المهمة

مقدمة حول تاغ `<img>`

خصائص (Attributes) تاغ `<img>`

`src` (Source)

`alt` (Alternative Text)

`width` و `height`

`title`

`loading`

`decoding`

`fetchpriority`

استخدام `srcset`

عنصر `<picture>`