HTML — تصویر (img)

آخرین بروزرسانی: 1404/08/07

قبلی: چارچوب درون صفحه ای (iframe) بعدی: ورودی (input)

تصویر (img)

تگ «تصویر (Image)» با نام <img> عکس را در صفحه نشان می دهد. اما خود عکس درون فایل HTML نیست؛ فقط لینک می شود. مثل وقتی در چت، عکس می فرستی ولی متن جداست.

تعریف و کاربرد img

طبق منبع، تگ <img> برای تعبیه تصویر در سند است. تصویر با ویژگی «src» آدرس می گیرد. متن جایگزین «alt» هم توصیف کوتاه تصویر است.

نکته: بهتر است همیشه «width» و «height» را مشخص کنی تا پرش چیدمان کمتر شود.

نمونه پایه

&lt;img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"&gt;

مشاهده در ادیتور

ویژگی های مهم

src: مسیر تصویر را تعیین می کند.
alt: متن جایگزین برای خطا یا دسترس پذیری.
width و height: اندازه رندر را مشخص می کنند.
loading: بارگذاری «lazy» یا «eager» را تعیین می کند.
srcset و sizes: فایل مناسب هر نمایشگر را انتخاب می کنند.
referrerpolicy: میزان ارسال اطلاعات ارجاع را کنترل می کند.

تراز و چینش با CSS

&lt;img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom"&gt;
&lt;img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle"&gt;
&lt;img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top"&gt;
&lt;img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right"&gt;
&lt;img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left"&gt;

مشاهده در ادیتور

تصویرِ لینک دار

&lt;a href="https://www.w3schools.com"&gt;
  &lt;img src="w3html.gif" alt="W3Schools.com" width="100" height="132"&gt;
&lt;/a&gt;

مشاهده در ادیتور

نقشه تصویر (Image Map)

&lt;img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"&gt;
&lt;map name="workmap"&gt;
  &lt;area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"&gt;
  &lt;area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"&gt;
  &lt;area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"&gt;
&lt;/map&gt;

مشاهده در ادیتور

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

img {
  display: inline-block;
}

مشاهده در ادیتور

تمرین گام به گام

یک <img> با src و alt بساز.
ابعاد مناسب با width و height بده.
برای بهینه سازی، loading="lazy" را اضافه کن.
برای نمایشگرها، از srcset و sizes استفاده کن.

پیوندهای مرتبط

برای تعبیه صفحه ببین چارچوب درون صفحه ای (iframe). برای لینک دهی هم سر بزن به لینک (a). درباره تصاویر واکنش گرا، صفحه تصویر واکنش گرا را بخوان.

جمع بندی سریع

<img> تصویر را لینک و نمایش می دهد.
دو ویژگیِ ضروری: src و alt.
ابعاد ثابت، پرش چیدمان را کم می کند.
loading و srcset سرعت را بهتر می کنند.

قبلی: چارچوب درون صفحه ای (iframe) بعدی: ورودی (input)

فهرست سرفصل‌های HTML

HTML — تصویر (img)

تصویر (img)

تعریف و کاربرد img

نمونه پایه

ویژگی های مهم

تراز و چینش با CSS

تصویرِ لینک دار

نقشه تصویر (Image Map)

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

تمرین گام به گام

پیوندهای مرتبط

جمع بندی سریع