آموزش تگ img در html

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب آموزش تگ img در html از سری آموزش های HTML در خدمت شما عزیزان هستیم.

بعضی اوقات تصاویر مفهوم بهتری نسبت به متن در ذهن مخاطب ایجاد می کند و اصلا شاید می خواهید سایتی مانند گالری عکس بسازید و تصاویری را به اشتراک بگذارید. در HTML این امکان فراهم شده تا بنا به نیاز خود به درج عکس در فضای اینترنت بپردازید. در این مطلب قصد داریم نحوه افزودن عکس در html را به شما آموزش دهیم.

تگ img چیست؟

تگ img که اشاره به کلمه Image دارد و معنای آن به زبان فارسی تصویر می شود برای افزودن عکس در صفحه HTML به کار می رود.

ساختار این تگ به شکل زیر است و نیاز به بستن ندارد.

<img src="image.jpg">

شما می توانید از فرمت های jpg و png و gif و webp برای افزودن تصاویر مورد نظر استفاده کنید.

صفات تگ img

در این بخش با صفات تگ img آشنا خواهید شد.

صفت alt در img

حتما به تصاویر خود صفت alt را اضافه کنید. این صفت، متنی است برای عکس مورد نظر که به موتور های جستجو برای درک بهتر تصاویر کمک فراوانی می کند.

<img alt="عکس">

صفت height

با استفاده از این صفت می توانید ارتفاع عکس مورد نظر را مشخص کنید.

<img height="100">

صفت ismap

با استفاده از این صفت می توان نقشه تصویری سمت سرور ایجاد کرد.

<a href="#">
  <img src="image.jpg" ismap>
</a>

صفت loading

نحوه بارگذاری عکس در مرورگر را مشخص می کند.

<img loading="eager|lazy">

eager

بلافاصله تصویر بارگذاری می شود. (پیش فرض)

<img loading="eager">

lazy

در صورت فراهم شدن شرایط تصویر بارگذاری می شود.

<img loading="lazy">

صفت longdesc

لینکی جهت توضیح در مورد عکس مشخص می کند.

<img longdesc="URL">

صفت referrerpolicy

مشخص می کند کدام اطلاعات ارجاع دهنده هنگام نمایش عکس ارسال شود.

<img referrerpolicy="no-referrer-when-downgrade|no-referrer|same-origin|strict-origin-when-cross-origin|origin|origin-when-cross-origin|unsafe-url"> 

صفت sizes

اندازه تصویر را بر اساس سایز صفحه نمایش های مختلف مشخص می کند.

<img sizes="Value">

صفت src

لینک تصویر با استفاده از این صفت مشخص می شود.

<img src="image.jpg">

صفت usemap

با استفاده از این صفت می توان نقشه تصویری سمت کاربر ایجاد کرد.

<img usemap="Value">

صفت width

با استفاده از این صفت می توانید عرض عکس مورد نظر را مشخص کنید.

<img width="100">

نکته: حتما قبل از آپلود تصاویر در سایت، توسط نرم افزار های جانبی حجم آن را کمتر کنید تا عکس در زمان کمتری لود شود و برای سئو بهتر، از صفت alt استفاده کنید.

مثال تگ img

کد:

<img src="image.jpg" alt="Text" width="300" height="300">

همان طور که در کد بالا مشاهده می فرمایید با استفاده از صفت src در تگ img آدرس لینک عکس مورد نظر را قرار می دهیم تا توسط مرورگر نمایش داده شود.

سازگاری با مرورگرها

تگ img با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS