تگ img در html

از تگ img برای فراخوانی یک تصویر در صفحه HTML استفاده می شود. از نظر فنی تصاویر در یک صفحه وب درج نمی‌شوند بلکه از طریق تگ <img> به صفحه مورد نظر پیوند داده می‌شوند. برای لینک کردن تصویر به یک صفحه دیگر می‌توانید از این تگ را داخل تگ <a> قرار دهید.

برای استفاده از تگ img حتما باید از ویژگی‌هایی چون src, alt, width و height استفاده کنید.

<img src="logo.jpg" alt="Site Logo" width="64" height="64"> 

تگ img می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

ویژگی src یکی از ویژگی‌های ضروری تگ img بوده که آدرس تصویر را مشخص می‌کند. در این ویژگی می‌توان از آدرس دهی مطلق (absolute) یا نسبی(relative) استفاده کرد.

<!-- relative url -->
<img src="logo.jpg" alt="Logo" width="500" height="600"> 
<!-- absolute url -->
<img src="https://hamgamweb.com/logo.jpg" alt="Logo" width="500" height="600">

یک یا چند تصویر را برای استفاده در دستگاه‌های مختلف مشخص می‌کند تصاویر با استفاده از , از هم جدا می‌شوند.استفاده از تصاویر در موقعیت‌های مختلف

<img src="logo.jpg" alt="logo" width="500" height="600"
srcset="logo-480.jpg 480w, logo-800.jpg 800w"> 

مشخص کردن اندازه تصویر برای استفاده در صفحه نمایش‌های مختلف ( مثال صفحه نمایشی با عرض کمتر از 600 پیکسل).

<img src="logo.jpg" alt="logo" width="500" height="600"
sizes="(max-width: 600px) 480px, 800px"> 

ویژگی alt از ویژگی‌های ضروری تگ img است، این ویژگی در صورتی که کاربر به هر دلیلی نتواند تصویر را مشاهده کند یک متن جایگزین را به جای تصویر نمایش می‌دهد. استفاده از این ویژگی در سئو از اهمیت بالایی برخوردار است.

<img src="logo.jpg" alt="logo" width="500" height="600">  

height و width نیز از ویژگی‌های ضروری تگ img هستند، ویژگی height ارتفاع یک تصویر و ویژگی width عرض تصویر را بر حسب پیکسل مشخص می کند.

<img src="logo.jpg" alt="logo" width="500" height="600">  

ویژگی loading مشخص می‌کند که آیا مرورگر باید تصویر را از همان ابتدا بارگیری کند یا بارگذاری تصاویر را تا زمانی که برای مثال کاربر به نزدیکی عکس اسکرول کند به تعویق بیاندازد. مقدار پیشفرض این ویژگی eager بوده که تصویر از همان ابتدا بارگیری می‌شود که در صورت نیاز شما می‌توانید این مقدار را به lazy تغییر دهید.

نکته: بهتر است در قسمت بالای صفحه از حالت loading="lazy" استفاده نکنید.

<img src="/images/tehran.jpg" alt="Tehran" width="500" height="600">
<!-- off-screen images -->
<img src="/images/paris.jpg" alt="Paris" width="500" height="600" loading="lazy">

ویژگی longdesc توضیحات مرتبط را به تصویر لینک می‌کند در این ویژگی می‌توان از آدرس دهی مطلق (absolute) یا نسبی(relative) استفاده کرد

<img src="/images/tehran.jpg" alt="Tehran" width="500" height="600" 
longdesc="#explained">
<img src="/images/tehran.jpg" alt="Tehran" width="500" height="600" 
longdesc="pages/explained.html">
<img src="/images/tehran.jpg" alt="Tehran" width="500" height="600" 
longdesc="https://hamgamweb./explained">

ویژگی ismap، به مرورگر اطلاع می‌دهد که تصویر مربوطه یک نقشه تصویری (image map) است که می‌توانید روی آن کلیک کنید و به بخش‌های مختلفی از تصویر دسترسی داشته باشید. به طور معمول ویژگی ismap برای تعیین نقشه تصویری با ویژگی usemap همراه است. ویژگی usemap با # شروع می‌شود و به نام نقشه تصویری اشاره دارد.

<img src="example.jpg" alt="Example image" usemap="#map1" ismap>
<map name="map1">
  <area shape="circle" coords="180,90,50" href="https://example.com/page1.html" alt="Link 1">
  <area shape="rect" coords="50,100,150,200" href="https://example.com/page2.html" alt="Link 2">
</map>

ویژگی ReferrerPolicy مشخص می کند که وقتی کاربر روی لینک کلیک می کند، چه اطلاعاتی از سمت ارجاع دهنده (شما) ارسال شود، این رویکردها به دلیل حفظ حریم خصوصی کاربران برای درخواست‌های cross-origin استفاده می‌شود. این ویژگی دارای چندین مقدار است که در لیست زیر هریک از مقادیر توضیح داده شده است.

• no-referrer: هیچ اطلاعات ارجاعی ارسال نمی شود.
• no-referrer-when-downgrade: پیش فرض اگر سطح امنیتی پروتکل یکسان و یا بالاتر باشد، مبدا، مسیر، و یا رشته پرس و جو را ارسال می کند، http-to-http, https-to-https و http-to-https ارسال می‌شود اما https-to-http ارسال نخواهد شد چرا که سطح امنیتی پروتکل پایین تر است.
• origin: مبدا (scheme، host و port) سند را ارسال می کند.
• origin-when-cross-origin: این مقدار origin، path و query string را برای درخواست همان مبدا ارسال می کند. اطلاعات کامل referrer (شما، ارجاع دهنده) برای درخواست‌هایی که از دامنه‌های مشابه صورت می‌گیرند ارسال می‌شود، در غیر این صورت اطلاعات referrer تنها شامل دامنه مبدا است.
• unsafe-url: این مقدار تمامی اطلاعات (origin، path و query string) را بدون در نظر گرفتن امنیت و سطح پروتکل ارسال می‌کند. از این مقدار با دقت استفاده کنید!

<img src="https://example.com/images/myimage.jpg" alt="Some image" referrerpolicy="no-referrer">  

ویژگی crossorigin نشان می‌دهد که تصویر دریافت شده از یک دامنه دیگر مورد اعتماد است یا خیر. اگر مقدار ویژگی crossorigin برابر با anonymous باشد، تصویر با مجوز cross-origin دانلود می‌شود. در صورتی که مقدار crossorigin برای تصویر به use-credentials تنظیم شود، مرورگر با اطلاعات اعتبار کاربر (مانند کوکی‌ها و شناسه‌های وب) به دامنه منبع دسترسی می‌یابد. این به معنای این است که درخواست دانلود تصویر با اعتبار معتبر ارسال می‌شود و سرور اجازه دسترسی به تصویر را می‌دهد.

<img src="https://example.com/image.jpg" alt="Example Image" crossorigin="use-credentials">

تگ <img> از Global Attributes در HTML پشتیبانی می کند.

تگ <img> از Event Attributes in HTML در HTML پشتیبانی می کند.

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

img{
  display: inline-block;
}