برچسب <img> HTML

تعریف و استفاده

<img> برچسب برای اتصال تصویر به صفحه HTML استفاده می‌شود.

از نظر فنی، در واقع تصویر به صفحه وب اضافه نشده است، بلکه تصویر به صفحه وب لینک داده شده است.<img> برچسب یک مخزن ایجاد می‌کند که برای مراجعه به تصویر استفاده می‌شود.

<img> برچسب دو ویژگی ضروری دارد:

  • src - مسیر تصویر را مشخص کنید
  • alt - اگر به هر دلیلی نمی‌توان تصویر را نمایش داد، متن جایگزین تصویر را مشخص کنید

توجه:همچنین، همیشه باید عرض و ارتفاع تصویر را مشخص کنید. اگر عرض و ارتفاع مشخص نشده باشد، ممکن است صفحه در حال بارگذاری تصویر لرزان باشد.

توجه:برای لینک دادن تصویر به یک مستند دیگر، فقط باید این: <img> برچسب‌های درون‌ریز در داخل: <a> درون برچسب (لطفاً به مثال زیر مراجعه کنید).

لطفاً به:

آموزش HTML:تصویر HTML

دستورالعمل HTML DOM:آبجکت Image

آموزش CSS:تنظیم سبک تصویر

مطالعه بیشتر:چگونه تصویر را به درستی استفاده کنیم

مثال

مثال 1

در مثال‌های زیر، ما تصویری از یک تورک که توسط مهندس CodeW3C.com در پارک گل‌های شانگهای گرفته شده است، در صفحه قرار داده‌ایم:

<img src="tulip.jpg" alt="پارک گل‌های شانگهای - تورک‌ها" />

آزمایش کنید

شهرستان گل‌های شانگهای - لاله‌ها

مثال 2

مثال دیگری از نحوه اضافه کردن تصویر:

<img src="dancer.png" alt="رقصنده" width="500" height="749">

آزمایش کنید

توجه:مثال‌های بیشتری در پایین صفحه ارائه می‌شود.

ویژگی

ویژگی مقدار توضیح
alt متن تعریف متن جایگزین تصویر.
crossorigin
  • anonymous
  • use-credentials
 اجازه استفاده از تصاویر از وب‌سایت‌های سوم که اجازه دسترسی از طریق سرورهای دیگر را دارند با استفاده از کانواس (canvas).
height پیکسل تعریف ارتفاع تصویر.
ismap ismap تعریف تصویر به عنوان نقشه تصویر سرور.
loading
  • eager
  • lazy
 تعیین اینکه آیا مرورگر باید به طور فوری تصویر را بارگذاری کند یا بارگذاری تصویر را تا زمانی که شرایط خاصی برآورده شود به تأخیر بیندازد.
longdesc URL تعریف URL که به توضیحات دقیق‌تر تصویر اشاره دارد.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 تعریف اطلاعات مراجعه‌ای که باید در دریافت تصویر استفاده شود.
sizes اندازه تعریف اندازه تصویر برای آرایش صفحات مختلف.
src URL تعریف مسیر تصویر.
srcset URL-list لیستی از فایل‌های تصویری که در شرایط مختلف استفاده می‌شوند را مشخص کنید.
usemap #mapname تصویر را به عنوان نقشه‌ی تصویر مشتری تعریف کنید.
width پیکسل گنجاندن عرض تصویر.

ویژگی‌های جهانی

<img> برچسب‌ها نیز از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML。

ویژگی‌های رویداد

<img> برچسب‌ها نیز از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های رویداد در HTML。

مثال‌های بیشتری

مثال 3

تراز کردن تصویر (استفاده از CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

آزمایش کنید

مثال 4

افزودن حاشیه به تصویر (استفاده از CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

آزمایش کنید

مثال 5

افزودن حاشیه‌های چپ و راست به تصویر (استفاده از CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

آزمایش کنید

مثال 6

افزودن حاشیه‌های بالا، پایین و خارجی به تصویر (استفاده از CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

آزمایش کنید

مثال 7

چگونه تصویر را از یک پوشه یا وب‌سایت دیگر اضافه کنیم:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

آزمایش کنید

مثال 8

چگونه می‌توان به تصاویر لینک اضافه کرد:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

آزمایش کنید

مثال 9

چگونه می‌توان یک نقشه تصویری با مناطق قابل کلیک ایجاد کرد. هر منطقه یک لینک است:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

آزمایش کنید

خواندن ادامه - چگونه تصاویر را به درستی استفاده کنید

یکی از ویژگی‌های برجسته HTML و XHTML این است که می‌توانند تصاویر را در متن مستند قرار دهند، که می‌توان تصاویر را به عنوان یک عنصر داخلی مستند (تصویر درون‌ریز) استفاده کرد یا آن را به عنوان یک مستند جداگانه قابل دانلود از طریق لینک‌های اضافی یا به عنوان پس‌زمینه مستند قرار داد.

در حالی که تصاویر (مثلاً آیکون‌های متحرک، عکس‌ها، توضیحات، نقاشی‌ها و غیره) را به صورت منطقی به محتوای مستند اضافه می‌کنید، مستند می‌تواند بیشتر زنده و جذاب شود، و به نظر می‌رسد که حرفه‌ای‌تر و اطلاعات‌دارتر است، و همچنین قابل جستجو و مرور است. همچنین می‌توان یک تصویر را به عنوان یک نقشه هدایت‌کننده برای لینک‌های تصویری استفاده کرد.

اما اگر از تصاویر بیش از حد استفاده شود، مستند می‌تواند به طور قطعی به هم رفته و به هم ریخته شود، و خواندن آن غیرممکن خواهد بود، و این امر باعث می‌شود که زمان بیشتری برای بارگذاری و مشاهده صفحه توسط کاربران صرف شود.

لطفاً مقاله زیر را بخوانید تا یاد بگیرید که دو فرمت اصلی تصاویر وب، GIF و JPEG، چگونه استفاده می‌شوند و چگونه تصاویر را به درستی استفاده کنید:

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <img> عنصر:

img {
  display: inline-block;
}

آزمایش کنید

پشتیبانی از مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی