HTML img Tag

HTML img Tag – يٌستخدم الوسم <img> لتضمين صورة في صفحة HTML.

HTML img Tag

لا يتم إدراج الصور مباشرة في صفحات HTML؛ حيث أن الصور مرتبطة بصفحات الويب. كل ما يقوم به الوسم <img> هو إنشاء مساحة تعليق لتضمين الصورة المشار إليها بواسطة سمة src.

مثال للتوضيح

شغل إيدك

لتضمين صورة فى صفحات الويب، إتبع هذه الطريقة:

 <img src="/images/person_image.png" alt="Person sitting in front of a desk">

إذا لاحظت فى المثال السابق، إحتوى الوسم <img> على سمتين:

src: يحدد مسار أو عنوان URL للصورة.
alt: إختصار لكلمة (alternative) وتحدد نصًا بديلاً للصورة، فى حالة تعذر عرض الصورة لسبب ما.

كلًا من السمتين src و alt مطلوبين (required) أى يجب تضمينهم عند إستخدام وسم <img>.

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

ربط الصورة برابط تشعبي – Hyperlink

لربط صورة برابط تشعبى، قٌم بتضمين وسم <img> داخل وسم <a> فقط.

مثال للتوضيح

شغل إيدك

للجعل الصورة كرابط وعند النقر عليها تقوم بفتح هذا الرابط:

<a href="https://www.albashmoparmeg.com/">
    <img src="https://www.albashmoparmeg.com/images/logo_albashmoparmeg.png" alt="Logo Website albashmoparmeg!" data-skip-lazy="">
</a>

السمات المحددة – Specific Attributes

يدعم الوسم <img> هذه السمات:

السمة	القيمة	الوصف
alt	text	تحدد نصيًا بديلاً للصورة.
crossorigin	anonymous use-credentials	يشير إلى ما إذا كان يجب أن يتم جلب الصورة من مواقع الجهات الخارجية التي تسمح بالوصول عبر الأصل cross-origin باستخدام طلب CORS. لإستخدامها مع عنصر <canvas>.
height	pixels	تحدد ارتفاع الصورة.
ismap	ismap	تحدد صورة كخريطة صورة من جانب الخادم.
loading	eager lazy	تحدد كيفية تحميل المتصفح للصورة، سواء كان: eager (القيمة الافتراضية): يتم تحميل الصورة فورًا. lazy: يؤجل تحميل الصورة لتطبيق بعض الشروط.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	تحدد معلومات المرجع التي سيتم استخدامها عند جلب صورة.
sizes	sizes	تحدد أحجام الصور لتخطيطات الصفحات المختلفة.
src	URL	تحدد مسار أو عنوان URL للصورة.
srcset	URL-list	تحدد قائمة بملفات الصور لاستخدامها في مواقف مختلفة.
width	pixels	تحدد عرض الصورة.
usemap	map_name#	تحدد الصورة كخريطة صورة من جانب العميل. 💡ملاحظة: لا يمكنك استخدام هذه السمة إذا كان الوسم <img> داخل الوسم <a>.
align^deprecated	left right top middle bottom	تحدد محاذاة الصورة بالنسبة للعناصر المحيطة بها.
border^deprecated	pixels	تحدد عرض الحدود حول الصورة.
hspace^deprecated	pixels	تحدد مقدار المسافة البيضاء (white space) على الجانب الأيسر والأيمن من الصورة.
longdesc^deprecated	URL	تحدد عنوان URL لوصف تفصيلي للصورة.
name^deprecated	text	تحدد اسم للصورة.
vspace^deprecated	pixels	تحدد مقدار المسافة البيضاء (white space) على الجانب العلوى والسفلى من الصورة.