إعلان
تعلم الآن

HTML الوسم <img>

تعريفه

نستخدم الوسم <img> على هذا النحو <img src="url"> لعرض صورة في الصفحة.
مكان الكلمة url نضع مسار الصورة التي نريد عرضها.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <img>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


الخاصية alt

نضيفها للوسم لوضع نص بديل يظهر مكانه في حال لم يستطع المتصفح عرض الصورة لأي سبب كان.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية crossorigin

نضيفها للوسم في حال أردنا عرض صورة موجودة في موقع آخر و هذه الصورة سيتم عرضها لاحقاً بداخل <canvas>.
سبب ذلك أن الوسم <canvas> لا يسمح برسم صورة بداخله ما لم تكن بالأساس موجودة في نفس الموقع.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية crossorigin لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب الذي يقضي بجلب الصورة.

القيمة معناها
anonymous في حال وضع هذا القيمة فهذا يعني أن الصورة التي يتم جلبها لا يمكن استخدامها بداخل <canvas> في حال كانت من موقع آخر هذه القيمة الإفتراضية لها في حال لم تحدد ذلك بنفسك أو في حال مررت لها قيمة خاطئة.
use-credentials في حال وضع هذه القيمة فهذا يعني أنه يمكن استخدام الصورة بداخل <canvas> حتى لو كانت من موقع آخر لطالما أن الموقع الآخر في الأساس لا يعارض ذلك.


الخاصية decoding

نضيفها للوسم في حال أردنا تحديد ما إذا كان المتصفح سيعرض الصورة في الصفحة أثناء جلبها حتى لو لم يكن المتصفح قد قام بتحميل كل أجزاءها أم أنه يجب أن يتنظر أن ينتهي تحميل الصورة حتى يعرضها في الصفحة.
سبب ذلك أن الوسم <canvas> لا يسمح برسم صورة بداخله ما لم تكن بالأساس موجودة في نفس الموقع.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم ≤79 63 مدعوم 11.1 مدعوم مدعوم 63 مدعوم 11.1 مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية decoding لتحديد متى سيتم عرض الصورة في الصفحة.

القيمة معناها
sync في حال أردت أن يتم تحميل الصورة بشكل متزامن و هذا يعني أنه سيتم عرضها بعد أن يتم يكتمل تحميلها. و هنا نود الإشارة إلى أن المتصفح لن يظهر أي محتوى آخر في الصفحة قبل أن يتم جلب الصورة.
async في حال أردت أن يتم تحميل الصورة بشكل غير متزامن و هذا يعني أنه سيتم عرض كل جزء يتم تحميله من الصورة بشكل مباشر في المتصفح بدون إنتظار أن يكتمل تحميلها.
auto هذا هو الحال الإفتراضي حيث يقرر المتصفح ما هو الأنسب و يفعله.


الخاصية height

يمكن إضافتها للوسم لتحديد كم سيكون طول الصورة التي سيتم عرضها بالبكسل.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية ismap

يمكن إضافتها للوسم لإعلام الموقع أين قام المستخدم بالنقر بالضبط على الصورة.

ملاحظة: الصورة هنا يجب أن تكون موضوعة بداخل الرابط الذي سيتم إرسال الإحداثيات إليه كالتالي <a href="/imagemapper"><img src="logo.png" ismap/></a> على سبيل المثال.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية referrerpolicy

يمكن إضافتها للوسم بهدف تحديد ما هي المعلومات التي سيتم إرفاقها مع طلب جلب الصورة من الموقع.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
51 79 50 38 11.1 51 51 50 41 غير مدعوم 7.2

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

القيمة معناها
no-referrer لعدم إرسال أي معلومة مع طلب المستخدم.
no-referrer-when-downgrade لعدم إرسال أي معلومة في Header طلب المستخدم ( أي المعلومات التي يرسلها المستخدم للموقع و لا تظهر في الرابط ) إذا كان الموقع الذي سيتلقى الطلب لا يستخدم البروتوكل https و هذا هو الحال الإفتراضي.
origin لإرسال المعلومات التالية فقط مع طلب المستخدم ( scheme - host - port ).
origin-when-cross-origin لإرسال المعلومات التالية مع طلب المستخدم ( scheme - host - port ) بالإضافة إلى المسار ( path ) في حال كان الرابط موجود في نفس الموقع.
unsafe-url لإرسال المعلومات التالية فقط مع طلب المستخدم ( origin - path ) أي بدون أي معلومة حساسة مثل إسم المستخدم و كلمة مروره.


الخاصية sizes

يمكن إضافتها للوسم لجعل حجم الصورة التي يتم عرضها يظهر بشكل متجاوب ( Responsive ) مع حجم الصفحة, مع الإشارة إلى أن هذه الخاصية تعمل فقط في حال كان المتصفح سيعرض إحدى الصور الموضوع مسارها بواسطة الخاصية srcset و التي تم تحديد قياسها أيضاً بالإعتماد على الحرف w.

ملاحظة: في حال كان حجم الصورة في الصفحة محدد بواسطة CSS فإن المتصفح سيتجاهل خصائص تحديد حجم الصورة التي تم وضعها بواسطة الخاصية sizes.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية src

يجب إضافتها للوسم لتحديد مسار الصورة المراد عرضها.
مسار الصورة يجب تمريره لها كقيمة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية srcset

يمكن إضافتها للوسم لتجهيز صور أحجامها مختلفة و على حسب حجم الشاشة يتم عرض الصورة التي يتناسب حجمها معها.
مسار أي صورة يتمريره لها يجب تمرير عرض الشاشة معه الذي على أساسه سيتم اختيار الصورة و هذا الأمر يمكن فعله بأسلوبين كالتالي:

  • إضافة الحرف w لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بالبكسل.
  • إضافة الحرف x لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بشكل تقريبي.

لا تقلق ستفهم ما نقصده بالحرفين w و x لاحقاً من الأمثلة.

معلومة: إنتبه في حال قام المتصفح مسبقاً بتحميل الصورة التي حجمها كبير ثم قمت بتصغير الشاشة و تحديثها من جديد فإنه سيظهر أيضاً الصورة التي حجمها كبير و سبب ذلك أن المتصفح يقوم بتخزين الصور التي يتم عرضها في الصفحة حتى لا يطلبها مجدداً إذا طلبت مشاهدتها مرة أخرى.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
34 ≤18 38 21 8 37 34 38 21 8 2.0


الخاصية width

يمكن إضافتها للوسم لتحديد كم سيكون عرض الصورة التي سيتم عرضها بالبكسل.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

إستخدامه

في المثال التالي قمنا بإضافة صورة بوسطة الوسم <img> مع تحديد أن عرضها 200 بكسل و طولها 200 بكسل أيضاً.

المثال الأول

<img src="harmash-logo.PNG"
	alt="HTML 5 Logo"
	width="200"
	height="200">
		

جرب الكود



في المثال التالي قمنا باستخدام الخاصية srcset لوضع صورتين إضافيتين أحجامها مختلفة بهدف جعل المتصفح يحمل الصورة الأخف حجماً و التي تتناسب مع حجم عرض الصورة في الصفحة. ركز في النقاط التالية لتعرف كيف يختار المتصفح الصورة التي سيتم تحميلها و عرضها في الصفحة:

  • الصورة الموضوع مسارها كقيمة للخاصية src يعتمدها المتصفح في حال كانت الخاصية srcset غير معروفة بالنسبة له فقط.
  • الصورة الأولى الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان ناتج قسمة عرض الصورة على عرض الشاشة قريب إلى 1x, مثال: 1.45623.
  • الصورة الثانية الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان ناتج قسمة عرض الصورة على عرض الشاشة قريب إلى 2x, مثال: 2.83239.

المثال الثاني

<img src="default.PNG"
	srcset="small.PNG 1x,
		    medium.PNG 2x">
		

جرب الكود



في المثال التالي قمنا باستخدام الخاصية srcset لوضع صورتين إضافيتين مع تحديد الحجم الذي على أساسه سيقرر المتصفح أي صورة يقوم بتحميلها كالتالي:

  • الصورة الموضوع مسارها كقيمة للخاصية src يعتمدها المتصفح في حال كانت الخاصية srcset غير معروفة بالنسبة له فقط.
  • الصورة الأولى الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان حجم الصفحة لا يتجاوز 500 بكسل.
  • الصورة الثانية الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان حجم الصفحة يتجاوز 500 بكسل لأن حجمها أكبر و ملائم أكثر للعرض.

المثال الثالث

<img src="default.PNG"
	srcset="small.PNG 500w,
			medium.PNG 1500w">
		

جرب الكود



في المثال التالي قمنا باستخدام الخاصية sizes لجعل حجم الصورة التي يقرر المتصفح تحميلها تظهر بشكل متجاوب أيضاً مع حجم الصفحة بالشكل الذي نحدده لها.
هنا بعد أن يتم تحميل الصورة التي تتناسب مع عرض شاشة المستخدم, سيقوم المتصفح بعرضها بحجم 100 × 100 إذا كان عرض الصفحة لا يتجاوز 600 بكسل, غير ذلك فإنه يعرضها بحجم 200 × 200 مهما كان حجم الصفحة كبيراً.

ملاحظة: القيم التي نمررها للخاصية sizes بداخل القوسين نضعها بالوحدة بكسل, أما القيمتين اللتين نضعهما بعد القوسين فيمكن وضعهما بأسلوب مسموح في لغة CSS لتحديد الحجم.

المثال الرابع

<img src="default.PNG"
	srcset="small.PNG 500w,
			medium.PNG 1500w"
	sizes="(max-width: 600px) 100px, 200px">
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

img {
	display: inline-block;
}
	

نصائح و ملاحظات

في حال لم تحدد أحجام الصور التي سيتم عرضها فإن المتصفح سيومض على الأغلب عندما يحاول عرض الصور في الصفحة بعد أن يتم تحميلها حيث سيقوم برسم الصفحة بأكملها من جديد بلمح البصر لهذا يرى المستخدم هذا الأمر كومضة. لذلك قم دائماً بتحديد حجم الصور التي تنوي عرضها في الصفحة سواء حددت ذلك بواسطة خصائص HTML أو كود CSS.

إذا كانت الصفحة تحتوي العديد من الصور, قم بوضع صور أحجامها مقبولة مثل 200KB كحد أقصى لأنه كلما كان حجم الصور أكبر كلما استغرق المتصفح وقتاً حتى يحمّلها و من ثم يعرضها للمستخدم و هذا الأمر سيء جداً بالنسبة لتجربة المستخدم.

يمكنك استغلال الخاصية srcset أيضاً لجعل الصور تتحمل بشكل أسرع عند المستخدم حيث أنه إذا تم استغلال هذه الخاصية بشكل صحيح فإن المتصفح سيقوم بتحميل أفضل صورة تتناسب مع حجم شاشة المستخدم مما يعني أنه سيحمل أفضل صورة تعتبر مقبولة نسبةً لجهازه.

عند عرض صور في موقعك, تأكد دائماً من أن لا تكون الصور التي تنشرها عليها حقوق نشر تمنع استخدامها - بمعنى أنها غير مجانية - لأنه في حال كانت كذلك يمكن لصاحب الصور الإبلاغ عنك بكل سهولة مما قد يؤدي لحذف موقعك.

إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة