شرح مميز لعلامة <img> وخصائصها في HTML
الغرض الرئيسي من هذا <img>العنصر هو تعزيز المظهر المرئي والتفاعلي لصفحات الويب من خلال عرض الصور. وقد صُمم لتلبية الحاجة المتزايدة لعرض المحتوى الرسومي على شبكة الويب العالمية، التي تطورت لتصبح بيئة غنية بالوسائط المتعددة.
مقدمة عن عنصر الصورة
علامة <img> هي أحد أهم العناصر في HTML تُستخدم لعرض الصور على صفحات الويب. وهي عنصر ذاتي الإغلاق (لا يحتاج إلى علامة إغلاق) ويعتبر من العناصر المضمنة (inline elements).
سمات <img>
يدعم العنصر السمات العالمية ويتضمن العديد من السمات الإضافية:
src:يحدد عنوان الويب لملف الصورة.alt:يوفر نصًا بديلاً لسهولة الوصول إليه.width:يحدد عرض الصورة.height:يحدد ارتفاع الصورة.title:إضافة تلميح أداة يحتوي على معلومات إضافية.srcset:يوفر خيارات صور مستجيبة.sizes:يساعد في اختيار الصورة المناسبة لمنفذ العرض.crossorigin:إدارة طلبات الصور متعددة الأصول.usemap:روابط لخرائط الصور على جانب الخادم.ismap:يشير إلى استخدام خريطة الصورة على جانب الخادم.referrerpolicy:يتحكم في معلومات المرجع المرسلة.decoding:يعمل على تحسين فك تشفير الصورة.loading:يتحكم في سلوك تحميل الصورة.fetchpriority:يوفر تلميحات حول أولوية تحميل الموارد.
محتوى العنصر <img> فارغ ولا يقبل أي محتوى ولا يحتوي على علامات إغلاق.
شرح السمات الأساسية
src (المصدر)
<img src="image.jpg">الوظيفة: تحدد مسار ملف الصورة (URL)الأهمية: بدون هذه السمة لن تظهر الصورةملاحظة: يمكن استخدام مسارات نسبية أو مطلقة
alt (النص البديل)
<img src="image.jpg" alt="وصف للصورة">الوظيفة: يوفر نصًا بديلاً عند عدم تحميل الصورة أو لذوي الاحتياجات الخاصةالأهمية: ضروري لـ:- تحسين SEO (تحسين محركات البحث)
- إمكانية الوصول (Accessibility)
- تجربة المستخدم عند وجود مشاكل في الاتصال
width و height (الأبعاد)
<img src="image.jpg" width="500" height="300">الوظيفة: تحدد أبعاد الصورة بالبكسلأفضل ممارسة: تحديد الأبعاد يحسن أداء الصفحة ويقلل من الانزياحات (layout shifts)
السمات المتقدمة
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">الوظيفة: توفير صور مختلفة لأحجام الشاشات المختلفةالفائدة: تحميل الصورة المناسبة لكل جهاز مما يحسن الأداء
loading (تحميل كسول)
<img src="image.jpg" loading="lazy">القيم الممكنة:eager: تحميل الصورة فورًا (افتراضي)lazy: تأجيل التحميل حتى يصبح العنصر قريبًا من نافذة العرض
الفائدة: تحسين أداء الصفحة خاصة للصور التي ليست فوق الطية
decoding (فك التشفير)
<img src="image.jpg" decoding="async">القيم الممكنة:sync: فك التشفير بشكل متزامنasync: فك التشفير بشكل غير متزامنauto: ترك القرار للمتصفح (افتراضي)
سمات الأمان والأداء
crossorigin (الطلبات عبر المصادر)
<img src="https://example.com/image.jpg" crossorigin="anonymous">الوظيفة: التحكم في كيفية طلب الصور من نطاقات أخرىمهم ل: استخدام الصور مع عنصر Canvas
referrerpolicy (سياسة الإحالة)
<img src="image.jpg" referrerpolicy="no-referrer">الوظيفة: التحكم في المعلومات المرسلة عند طلب الصورة
fetchpriority (أولوية الجلب)
<img src="important-image.jpg" fetchpriority="high">القيم:high,low,auto(افتراضي)الفائدة: إعطاء أولوية لتحميل الصور المهمة
سمات خاصة بخرائط الصور
usemap و ismap
<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,100,100" href="page.html">
</map>الوظيفة: إنشاء مناطق قابلة للنقر على الصورة
نصائح احترافية
تحسين الصور: دائماً ضغط الصور قبل رفعهاتنسيقات الصور: استخدم:JPEGللصور الفوتوغرافيةPNGللصور ذات الشفافيةWebPللتوازن بين الجودة والحجم
CDN للصور: استخدم شبكات توصيل المحتوى لتحميل أسرعالنسخ الاحتياطي: عند استخدامsrcset، احتفظ بـsrcكنسخة احتياطية
مثال شامل
<img src="default.jpg"
srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px"
alt="وصف دقيق للصورة"
width="1200"
height="800"
loading="lazy"
decoding="async"
fetchpriority="high"
crossorigin="anonymous"
referrerpolicy="no-referrer"
title="معلومات إضافية عند التمرير">هذا الشرح الشامل يغطي جميع الجوانب العملية والنظرية لاستخدام علامة <img> بشكل احترافي.
