HTML الوسم <img>

تعريفه

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

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

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

خصائصه

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

الخاصية alt

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

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

الخاصية crossorigin

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

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

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

الخاصية decoding

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

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

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

الخاصية height

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

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

الخاصية ismap

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

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

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

الخاصية referrerpolicy

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

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

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

الخاصية sizes

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

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

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

الخاصية src

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

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

الخاصية srcset

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

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

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

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

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

الخاصية width

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

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

إستخدامه

في المثال التالي قمنا بإضافة صورة بوسطة الوسم <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 أيضاً لجعل الصور تتحمل بشكل أسرع عند المستخدم حيث أنه إذا تم استغلال هذه الخاصية بشكل صحيح فإن المتصفح سيقوم بتحميل أفضل صورة تتناسب مع حجم شاشة المستخدم مما يعني أنه سيحمل أفضل صورة تعتبر مقبولة نسبةً لجهازه.

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