الفرق بين المراجعتين لصفحة: «HTML/img»

المراجعة الحالية بتاريخ 16:06، 7 أكتوبر 2022

يُمثِّل العنصر <img> صورةً في المستند.

مثال عن استخدام العنصر <img> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية alt):

<img src="wiki-logo.png" alt="Wiki Hsoub Logo">

مثال عن استخدام العنصر <img> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية alt) داخل العنصر مما يسمح بالنقر على الصورة للانتقال:

<a href="wiki.hsoub.com"><img src="wiki-logo.png" alt="Wiki Hsoub Logo"></a>

دورة تطوير واجهات المستخدم

72 ساعة فيديو تدريبية
من الصفر دون الحاجة لخبرة مسبقة
شهادة معتمدة من أكاديمية حسوب
متابعة أثناء الدورة من فريق مختص

اشترك الآن

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح	لا يوجد، فهذا العنصر فارغ.
الوسم المختصر	لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية.
العناصر الأب	أي عنصر يقبل العناصر التضمينية.
واجهة DOM	`HTMLImageElement`

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.

أضيفت الخاصية srcset في إصدار Chrome 35 و Firefox 32 و Opera 21 و Safari 7.1 وهي مدعومة في Edge.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`align`

تحديد محاذاة الصورة بالنسبة للمحتوى المجاور، هذه الخاصية مهملة في HTML 4 وحُذِفَت في HTML5، ويجب استخدام الخاصية float و/أو vertical-align في CSS بدلًا منها، وذكرناها بغرض العلم بها.

`alt`

تُعرِّف هذه الخاصية نصًا بديلًا يصف الصورة، وسيشاهد المستخدمون هذا النص إن كان رابط URL للصورة غير موجود، أو لم يكن المتصفح يدعم صيغة الصورة، أو لم يكتمل تنزيل الصورة بعد.

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

إذا لم تضع هذه الخاصية بالمطلق فهذا يُشير إلى أنَّ الصورة هي جزءٌ مهمٌ من المحتوى ولا يمكن تعويضها بمحتوى نصي، أما ضبط هذه الخاصية إلى قيمةٍ فارغة (أي alt=""‎) فذلك يشير إلى أنَّ الصورة ليست جزءًا مهمًا من المحتوى، ويمكن للمتصفحات غير الرسومية أن تتجاهلها.

مثال عن استخدام العنصر <img> لعرض صورة مهمة، وذلك بحذف الخاصية alt كليًا:

<img src="im-img.png">

مثال عن استخدام العنصر <img> لعرض صورة غير مهمة، وذلك بإسناد سلسلة نصية فارغة إلى الخاصية alt:

<img src="decoration.png" alt="">

`border`

تحديد ثخن إطار الصورة، لكن هذه الخاصية أمست مهملة في HTML 4 وحُذِفَت في HTML5، لذا استخدام الخاصية border في CSS بدلًا عنها.

`height`

تحديد الارتفاع الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.

استخدام الخاصية height لضبط ارتفاع الصورة:

<img src="wiki-logo.png" alt="Wiki Hsoub Logo" height="70">

`width`

تحديد العرض الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.

استخدام الخاصية width لضبط عرض الصورة:

<img src="wiki-logo.png" alt="Wiki Hsoub Logo" width="70">

`hspace`

تحديد عدد البكسلات من الفراغ الأبيض لتُضاف على يمين ويسار الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية margin في CSS بدلًا منها.

`vspace`

تحديد عدد البكسلات من الفراغ الأبيض لتُضاف أعلى وأسفل الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية margin في CSS بدلًا منها.

`ismap`

خاصية منطقية (Boolean) تُشير إذا كانت الصورة جزءًا من خريطة من طرف الخادوم (server-side map)، فلو كانت كذلك، فستُرسَل الإحداثيات الدقيقة لكل نقرة إلى الخادوم.

يُسمَح باستخدام هذه الخاصية إن كان العنصر <img> موجودًا داخل العنصر له خاصية href صالحة.

`longdesc`

رابط إلى وصف تفصيلي عن الصورة، القيم المسموحة لهذه الخاصية هي روابط URL أو مُعرِّف id لأحد العناصر الأخرى.

وضع رابط لصفحة دورة تطوير تطبيقات الويب باستخدام لغة PHP في أكاديمية حسوب لشرح الصورة شرحًا وافيًا، وذلك عبر الخاصية longdesc:

<img src="hsoub-academy-php-web-application-development-course.png" 
     alt="دورة تطوير تطبيقات الويب باستخدام لغة PHP" 
     longdesc="https://academy.hsoub.com/learn/php-web-application-development/">

`name`

تحديد اسم للعنصر، لكن هذه الخاصية مهملة في HTML 4 (وأضيفت إليها لغرض التوافقية مع الإصدارات السابقة) ومحذوفة في HTML5؛ ويجب استخدام الخاصية id بدلًا منها.

`sizes`

أُضيفت هذه الخاصية في HTML5، وهي تقبل سلسلة نصية فيها قيمة أو أكثر (مفصولة بفاصلة) لمصادر القياسات المختلفة للصور. يجب أن يحتوي كل مصدر على:

عبارة media query، والتي يجب حذفها في آخر عنصر في القائمة.
قيمة لقياس الصورة

قيمة قياس الصورة تُحدِّد ما هو حجم الصورة المراد عرضه، وتستخدم المتصفحات عبارة media query لتحديد أحد مصادر الصورة المُعرَّفة في خاصية srcset، وذلك عندما تقترن تلك المصادر مع مُحدِّدات العرض (w).

يؤثر حجم الصورة المُختارة على الحجم الصافي للصورة (أي الحجم الذي ستُعرَض فيه الصورة إن لم تُطبَّق قواعد CSS عليها).

إذا كانت الخاصية srcset غير موجودة، أو كانت لا تحتوي على أيّة قيمة فيها مُحدِّد العرض w، فلن يكون للخاصية sizes أي أثر.

`src`

رابط URL للصورة، وهذه الخاصية إجبارية لجميع عناصر <img>.

إذا كان المتصفح يدعم الخاصية srcset، فستُعامَل قيمة الخاصية src على أنها صورة مرشحّة لها معامل الكثافة 1x ما لم تُعرَّف صورة لها نفس معامل الكثافة في خاصية srcset، أو إذا لم تحتوي الخاصية srcset على المُحدِّد w.

`srcset`

قائمة أو أكثر من السلاسل النصية المفصولة بفاصلة , التي تُشير إلى مجموعة من مصادر الصورة المحتملة لكي يستخدم إحداها المتصفح.

تتألف كل سلسلة نصية من محتويات هذه الخاصية من:

رابط URL لملف الصورة
(اختياريًا) فراغ يتبعه أحد المُحدِّدات الآتية:
- مُحدِّد العرض الذي هو عدد صحيح موجب يتبعه الحرف w، وستُقسَّم قيمة مُحدِّد العرض على الحجم المصدري المُعطى في خاصية sizes لحساب كثافة البكسلات الفعلية.
- مُحدِّد كثافة البكسلات التي هو عددٌ عشري موجب يتبعه الحرف x مباشرةً.

إذا لم تعطى قيمة لأحد المُحدِّدَين السابقين فسيُسنَد للمصدر المُحدِّد الافتراضي 1x.

من غير السليم استخدام مُحدِّد العرض مع مُحدِّد الكثافة في نفس خاصية srcset، ومن غير السليم تكرار المُحدِّدات (أي لا يجوز أن يكون لمصدرين مختلفين في نفس الخاصية srcset مُحدِّد الكثافة 2x).

سيختار المتصفح أحد المصادر المذكورة في هذه الخاصية حسب تقديره، مما يعطي المتصفحات مجالًا لاختيار أفضل قياس للصورة اعتمادًا على تفضيلات المستخدم أو لتقييد استخدام التراسل الشبكي.

مثال عن استخدام الخاصية srcset لتحديد صورة بديلة للمتصفحات التي تعمل على أجهزة كثافتها 2x، لاحظ أنَّ قيمة الخاصية src ستُفسَّر على أنها مصدر الصورة ذات الكثافة 1x:

<img src="wiki-logo.png" 
  alt="Wiki Hsoub Logo" 
  srcset="wiki-logo-HD.png 2x">

مثال عن استخدام الخاصية srcset مع الخاصية sizes، وعندما ينطبق شرط media query الذي هو min-width: 600px فسيكون عرض الصورة 400px، عدا ذلك ستكون بعرض 50vw (أي 50% من عرض إطار العرض):

<img src="cover-small.png" 
  alt="Cover Photo" 
  srcset="cover-large.png 1640w,
      cover-small.png 965w"
  sizes="(min-width: 600px) 400px, 50vm">

`usemap`

تأخذ هذه الخاصية عنوان URL جزئي (يبدأ برمز #) لخريطة <map> مرتبطة بهذا العنصر.

يجدر بالذكر أنَّك لا تستطيع استخدام هذه الخاصية إن كان العنصر <img> موجودًا ضمن عنصر أو <button>.

راجع صفحة العنصر <map> لمثال عن استخدام العنصر <img> مع هذه الخاصية.

ملاحظات الاستخدام

صيغ الصورة المدعومة

لا يعطي معيار HTML قائمةً بصيغ الصورة التي يجب دعمها، لذا يدعم كل متصفح قائمةً مختلفةً من الصيغ، فمثلًا متصفح Firefox يدعم:

JPEG
GIF بما في ذلك صور GIF المتحركة
PNG
APNG
SVG
BMP
BMP ICO
PNG ICO

وبعض المتصفحات مثل Chrome و Opera تدعم صيغة WebP الجديدة.

التفاعل مع CSS

إنَّ العنصر <img> هو عنصر سيستبدل بمورد خارجي، وليس له خط أساس (baseline)، لذا عندما تستخدم الصور في المحتوى السطري (inline) مع خاصية vertical-align: baseline في CSS فسيوضع أسفل الصورة على خط الأساس للعنصر الحاوي لها.

قد يكون للصورة أبعاد صافية اعتمادًا على نوعها، لكن لبعض أنواع الصورة لا يكون لها أبعاد صافية، مثل صور SVG.

الأخطاء

عندما يحدث خطأ عند محاولة تحميل أو عرض الصورة، فستستدعى الدالة التي تُعالِج الحدث error، وهذا قد يحدث في عدِّة حالات مثل:

الخاصية src غير موجودة أو قيمتها فارغة.
قيمة رابط URL للصورة هي نفس قيمة رابط URL للصفحة الحالية.
الصورة المُحدَّدة معطوبة بطريقةٍ ما تمنع عرضها.
البيانات الوصفية للصورة معطوبة بشكلٍ يمنع الحصول على أبعادها، ولم تكن أبعادها مُحدَّدة عبر خاصيات العنصر <img>.
صيغة الصورة المُحدَّدة ليست مدعومة في المتصفح.

التنسيق الافتراضي

تعرض أغلبية المتصفحات الصور مع ضبط الخاصية display إلى inline-block:

img {
  display: inline-block;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.

@@ سطر 1: / سطر 1: @@
+<noinclude>{{DISPLAYTITLE:العنصر <code><img></code>}}</noinclude>
 يُمثِّل العنصر <code><img></code> صورةً في المستند.
@@ سطر 6: / سطر 7: @@
 <a href="wiki.hsoub.com"><img src="wiki-logo.png" alt="Wiki Hsoub Logo"></a>
 </syntaxhighlight>
+{{Course|course=frontend}}
+__TOC__
 == بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
@@ سطر 44: / سطر 46: @@
 يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.
 ===<code>align</code>===
-تحديد محاذاة الصورة بالنسبة للمحتوى المجاور، هذه الخاصية مهملة في HTML 4 وحُذِفَت في HTML5، ويجب استخدام الخاصية <code>float</code> و/أو <code>vertical-align</code> في CSS بدلًا منها، وذكرناها بغرض العلم بها.
+تحديد محاذاة الصورة بالنسبة للمحتوى المجاور، هذه الخاصية مهملة في HTML 4 وحُذِفَت في HTML5، ويجب استخدام الخاصية <code>[[CSS/float|float]]</code> و/أو <code>[[CSS/vertical-align|vertical-align]]</code> في [[CSS]] بدلًا منها، وذكرناها بغرض العلم بها.
 ===<code>alt</code>===
 تُعرِّف هذه الخاصية نصًا بديلًا يصف الصورة، وسيشاهد المستخدمون هذا النص إن كان رابط URL للصورة غير موجود، أو لم يكن المتصفح يدعم صيغة الصورة، أو لم يكتمل تنزيل الصورة بعد.
@@ سطر 122: / سطر 124: @@
    alt="Wiki Hsoub Logo"
    srcset="wiki-logo-HD.png 2x">
-</syntaxhighlight>مثال عن استخدام الخاصية <code>srcset</code> مع الخاصية <code>[[HTML/img#sizes|sizes]]</code>، وعندما ينطبق شرط media query الذي هو <code>min-width: 600px</code> فسيكون عرض الصورة <code>200px</code>، عدا ذلك ستكون بعرض <code>50vw</code> (أي 50% من عرض إطار العرض):<syntaxhighlight lang="html">
+</syntaxhighlight>مثال عن استخدام الخاصية <code>srcset</code> مع الخاصية <code>[[HTML/img#sizes|sizes]]</code>، وعندما ينطبق شرط media query الذي هو <code>min-width: 600px</code> فسيكون عرض الصورة <code>400px</code>، عدا ذلك ستكون بعرض <code>50vw</code> (أي 50% من عرض إطار العرض):<syntaxhighlight lang="html">
-<img src="clock-demo-thumb-200.png"
+<img src="cover-small.png"
-      alt="Clock"
+  alt="Cover Photo"
-      srcset="clock-demo-thumb-200.png 200w,
+  srcset="cover-large.png 1640w,
-          clock-demo-thumb-400.png 400w"
+      cover-small.png 965w"
-      sizes="(min-width: 600px) 200px, 50vw">
+  sizes="(min-width: 600px) 400px, 50vm">
 </syntaxhighlight>
 ===<code>usemap</code>===