توضیح تگ IMG در HTML – به زبان ساده با کد و مثال – EXPRESSJS – مجله تکنولوژی نرم افزار و سخت افزار

تگ IMG در HTML که به صورت «<img>» نمایش داده می‌شود، عنصری اساسی است که برای جاسازی تصاویر در صفحه وب مورد استفاده قرار می‌گیرد. این تگ به کاربر امکان می‌دهد تصاویر گرافیکی، عکس‌ها و سایر محتوای بصری را در صفحه به نمایش بگذارد. ویژگی src

در تگ img

مکان فایل تصویر را مشخص می‌کند، در حالی که ویژگی‌های اختیاری مانند alt

، متن جایگزین یا توصیفی را برای زمانی که تصویر در دسترس نیست، ارائه می‌کند. تگ img

با ساختار ساده خود برای افزایش جذابیت بصری و ارائه اطلاعات به شیوه‌ای جذاب، ضروری است.

فهرست مطالب این نوشته

در این مطلب از «مجله فرادرس» می‌خواهیم که در رابطه با تگ IMG در اچ تی ام ال اطلاعاتی کامل و مفید ارائه کرده و استفاده از این تگ را در سناریوهایی عملی مورد بررسی قرار دهیم. همچنین در مطلب پیشِ‌رو انواع ویژگی برای این تگ، ویژگی‌های منسوخ شده، مثال‌های عینی و نکات مورد استفاده برای این تگ ارائه شده است. در پایان مطالعه این مطلب کاربران درک نسبتاً خوبی از تگ IMG در HTML به دست خواهند آورد و تقریباً بر تمامی جنبه‌های مختلف این تگ تسلط خواهند یافت.

تگ IMG در HTML چیست؟

تگ IMG در زبان نشانه گذاری HTML که با «<img>» مشخص می‌شود، به منظور نمایش تصاویر در صفحه وب مورد استفاده قرار می‌گیرد. قابل ذکر است که این تگ به عنوان یکی از کاربردی‌ترین تگ‌های HTML نیاز به تگ بسته شدن جداگانه ندارد.

در این تگ، ویژگی src

محل منبع تصویر را مشخص می‌کند و ویژگی‌ اضافی مانند alt

متن توصیفی را برای تصویر ارائه می‌کند. نحوه استفاده از تگ img

به صورت زیر است:

1<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall">

در مثال فوق، منبع تصویر https://example.com/cat.jpg

است و ویژگی alt

تصویر را در قالب متن توصیف می‌کند. این تگ ساده HTML برای ادغام یکپارچه تصاویر در محتوای وب ضروری است.

یک برنامه نویس دختر در حال کار با تصاویر و درج آن ها در صفحه وب

نحوه استفاده از تگ IMG در HTML چگونه است؟

برای گنجاندن تصاویر در کد HTML، از تگ img

در مکان موردنظر باید استفاده کرد. این تگ همیشه به دو ویژگی اساسی نیاز دارد:

src
: مسیر تصویری که قرار است نمایش داده شود را مشخص می‌کند.
alt
: متن جایگزین را ارائه می‌دهد که در صورت عدم بارگیری قابل مشاهده است.

تصویر مستقیماً در صفحات وب جاسازی نمی‌شود و از مسیر منبع مشخص شده بارگیری می‌شود. تصویر را می‌توان از سرور همان وب‌سایت یا از سرورها و حتی وب‌سایت‌های مختلف دیگر در صفحه وب به نمایش گذاشت. علاوه بر این، می‌توان تگ img

را در داخل سایر تگ‌های کانتینر، مانند تگ A در HTML قرار داد که تصویر را قابل کلیک می‌کند. مثال زیر برای بیان این هدف است:

1<!DOCTYPE html>
2<html>
3<head>
4<title>Imag tag</title>
5</head>
6<body>
7<a href="https://faradars.org/">
8  <img src="https://faradars.org/_next/image?url=https%3A%2F%2Ffaradars.org%2Fwp-content%2Fuploads%2F2023%2F08%2F09%2Ffaradarslogosmall%20(1).svg&w=128&q=75" alt="لوگوی سایت فرادرس">
9</a>
10
11</body>
12</html>

خروجی مثال فوق در صفحه وب به صورت زیر است:

تصویری برای نشان دادن استفاده از تگ img در صفحات وب

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

ویژگی های تگ Img در اچ تی ام ال

ویژگی‌های تگ Img در HTML اطلاعات مهمی در مورد نحوه نمایش و بارگذاری تصاویر در صفحه وب ارائه می‌دهند. همان‌طور که گفته شد دو ویژگی بسیار مهم برای این تگ وجود دارد که در ادامه معرفی شده‌اند.

ویژگی Src برای تگ Img چیست؟

ویژگی Src در اصل مسیر یا منبع بازیابی فایل تصویری را مشخص خواهد کرد این مسیر می‌تواند در خود میزبان سایت و یا از منابع خارجی هم باشد. جزئیات آن به صورت زیر است:

هدف: مسیر رسیدن به تصویر را مشخص کرده و مکان‌یابی و نمایش تصویر را برای مرورگرها ضروری می‌کند.
انواع مسیرها: مسیر یا منابع فایل تصویری می‌تواند URL مطلق (آدرس وب کامل) یا URL نسبی باشد.

ویژگی Alt برای تگ Img چیست؟

ویژگی Alt در اصل برای نمایش متن جایگزین تصویر و نوعی توصیف از عکس بوده که درج آن اختیاری است ولی در کل توصیه می‌شود که این ویژگی را مخصوصا برای تصاویر غیر تزئینی خالی نگذاریم. جزئیات این ویژگی به صورت زیر است.

هدف: شامل متن جایگزین برای تصویر است که به عنوان توضیحات مبتنی بر متن عمل می‌کند.
قابلیت مشاهده: اگر تصویر بارگیری نشود یا پیدا نشود، مرورگرها این متن را نشان می‌دهند و به کاربرانی با اتصال اینترنت کند کمک می‌کنند.
دسترسی: این ویژگی برای کاربران کم‌بینا بسیار مهم است زیرا صفحه خوان‌ها و ابزارهای تبدیل متن به گفتار برای توصیف تصاویر به متن جایگزین یا همان ویژگی Alt متکی هستند.
تأثیر سئو: ویژگی متن جایگزین تصاویر برای «بهینه‌سازی موتورهای جستجو» (SEO) مهم است، زیرا موتورهای جستجو مانند گوگل از متن جایگزین برای درک محتوا استفاده می‌کنند که به طور بالقوه منجر به رتبه‌های بالاتر می‌شود. گنجاندن کلمات کلیدی مرتبط باعث افزایش دید تصویر در نتایج جستجوی تصویر می‌شود.

تصویر زیر کاربرد ویژگی alt

را برای تصویری که بارگیری نشده است، نشان می‌دهد:

تصویری برای نمایش کاربرد ویژگی Alt در HTML — برای نمایش تصویر در ابعاد بزرگ روی آن کلیک کنید.

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

ویژگی تایتل یا عنوان

یکی دیگر از ویژگی‌های تگ IMG در صفحات HTML، ویژگی title

بوده که جزئیات آن به صورت زیر است:

هدف: برای اختصاص عنوان و ارائه اطلاعات اضافی به تصویر استفاده می‌شود.
نمایش: ویژگی عنوان به عنوان نوعی راهنمای ابزار ظاهر می‌شود. در اصل عنوان تصویر نوعی پاپ آپ کوچک است که جزئیات را هنگامی که نشانگر ماوس روی تصویر می‌رود، نشان می‌دهد.
عملکرد: به ارائه بینش یا توضیحات اضافی برای تصاویر بدون درهم ریختن محتوای اصلی صفحه وب کمک می‌کند.

برای مثال وقتی ماوس را روی تصویر نگه می‌داریم، ممکن است نوعی راهنمای ابزار ظاهر شود که جزئیات بیشتری در مورد تصویر ارائه می‌دهد. مانند تصویر زیر:

تصویری برای نشان دادن نحوه عملکرد ویژگی ویژگی تایتل یا عنوان در تگ img در html — برای نمایش تصویر در ابحاد بزرگتر روی آن کلیک کنید.

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

ویژگی Longdesc

نوعی ویژگی دیگر که در ارتباط با تگ ایمیج در HTML باید از آن آگاه باشیم، ویژگی Longdesc

بوده که جزئیات آن به صورت زیر است:

هدف: پیوندهایی به صفحه وب حاوی توضیحات دقیق تصویر ارائه می‌دهد. این ویژگی برای تصاویر پیچیده که به طور کامل با متن جایگزین توضیح داده نشده‌اند مفید است.
کاربرد: صفحه پیوند داده‌شده می‌تواند در صفحه وب دیگر یا در همان صفحه باشد.
پشتیبانی به وسیله مرورگرها: این ویژگی به ندرت استفاده می‌شود زیرا اکثر مرورگرها از آن پشتیبانی نمی‌کنند.

در اصل ویژگی Longdesc

به ارائه توضیحات دقیق برای تصاویر پیچیده کمک می‌کند.

ویژگی Crossorigin

ویژگی crossorigin

نیز یکی دیگر از ویژگی‌های کمتر شناخته‌شده برای تصاویر در صفحات HTML بوده که جزئیات آن به صورت زیر است:

کاربرد: این تگ هنگام بارگیری تصویر از دامنه دیگری استفاده می‌شود.
مکانیزم: ویژگی crossorigin
شامل ایجاد نوعی درخواست اشتراک منبع و مکانیزم امنیتی کنترل دسترسی به منابع در سرورهای وب است. این اطلاعات حساس را از دسترسی غیرمجاز محافظت می‌کند.
نحوه کار: این ویژگی درخواستی را بدون اعتبار ارسال می‌کند و برای دسترسی به منابع در دسترس عموم مناسب است.
«Use-Credentials»: ویژگی crossorigin
درخواستی را با اعتبارنامه‌ها (به عنوان مثال، کوکی‌ها، گواهی‌ها) برای احراز هویت ارسال می‌کند و این قابلیت ویژگی نام برده برای دسترسی به منابع خصوصی مفید است.

در کل می‌توان گفت که ویژگی crossorigin

برای بارگذاری ایمن تصاویر از سایر دامنه‌ها با تعیین نوع درخواست مورد نیاز مفید است. باید به این نکته توجه داشت که crossorigin

به دلیل پشتیبانی محدود مرورگر معمولاً استفاده نمی‌شود.

ویژگی Ismap

نیز یکی دیگر از ویژگی‌های تگ IMG در HTML بوده که جزئیات این ویژگی به صورت زیر است:

هدف: به قسمت‌های خاصی از تصویر اجازه می‌دهد تا قابل کلیک باشند.
موارد استفاده: برای تصاویر قابل کلیک مورداستفاده قرار می‌گیرد و به ویژه در تگ‌های img
و تگ‌های a

اعمال می‌شود.

مثال زیر نحوه استفاده از این ویژگی را نشان می‌دهد:

1<a href="https://example.com/"><img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" ismap></a>

با کلیک بر روی مختصات ( x=33، y=45

) در مثال ارائه شده، آدرس https://example.com/?33،45

ایجاد می‌شود. امروزه به دلیل دسترسی محدود برای صفحه‌خوان‌ها معمولاً از این تگ استفاده نمی‌شود. جایگزین‌های مدرن با استفاده از جاوا اسکریپت یا CSS بدون تکیه‌بر پردازش سرور، عملکرد کارآمدتری را ارائه می‌دهند.

فردی خیره به مانیتور در حال طراحی سایت و کد نویسی

ویژگی Usemap برای تگ IMG در HTML

ویژگی Usemap

هم یکی دیگر از ویژگی‌هایی است که کاربرانی کمتری با آن آشنا هستند و جزئیات این ویژگی به صورت زیر است:

هدف: به مناطق خاصی از تصویر امکان کلیک کردن را می‌دهد که در آن هر مکان قابل کلیک در تصویر به آدرسی تعیین‌شده‌ای لینک می‌شود.
نحوه پیاده‌سازی: اطلاعات مربوط به این مکان‌های قابل کلیک و آدرس‌های مربوطه آن‌ها در تگ map
سازمان‌دهی شده است. مقدار ویژگی Usemap

به نام نقشه مرتبط اشاره می‌کند.
نتیجه: ویژگی Usemap
ایجاد نقشه‌های تصویر سمت مشتری را که در مرورگرهای وب پردازش می‌شوند، تسهیل می‌کند.

مثال استفاده از این تگ به صورت زیر است:

1<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" usemap="#cat">
2<map name="cat">
3<area shape="rect" coords="0,0,200,400" href="left_part.html" alt="Left Part">
4<area shape="rect" coords="200,0,400,400" href="right_part.html" alt="Right Part">
5</map>

توجه: تگ Usemap

را نمی‌توان برای تصاویر قابل کلیک استفاده کرد. در عوض، به عنوان مرجعی برای مکان قابل کلیک تصویر مرتبط عمل می‌کند و مناطق قابل کلیک و مقصد آن‌ها را تعریف خواهد کرد.

ویژگی Loading برای تگ IMG در ‌HTML

ویژگی Loading

برای تگ IMG در اچ تی ام ال مشخص می‌کند که مرورگرها چگونه باید بارگذاری تصویر را مدیریت کنند. این ویژگی دو مقدار زیر را می‌پذیرد:

eager
: تصویر را بلافاصله بارگیری می‌کند (تنظیم پیش‌فرض).
lazy
: بارگذاری تصویر را تا زمانی که نیاز باشد به تأخیر می‌اندازد، معمولاً زمانی که کاربر به آن قسمت از صفحه پیمایش می‌کند، تصویر بارگذاری می‌شود.

«بارگذاری تنبل یا بارگذاری با تاخیر» (Lazy Loading) می‌تواند زمان بارگذاری صفحه را افزایش دهد و بر امتیاز عملکرد صفحه در ابزارهایی مانند «PageSpeed Insights Google» تأثیر مثبت بگذارد. از طرف دیگر سرعت صفحه نوعی عامل تائید شده رتبه‌بندی گوگل است که بارگذاری تنبل را به عملی خوب برای بهبود سئوی صفحه تبدیل می‌کند.

ویژگی Referrerpolicy

نوع اطلاعات ارجاع دهنده را که باید در درخواست تصویر گنجانده شود، مشخص می‌کند. در اصل ارجاع دهنده صفحه‌ای است که درخواست تصویر از آن انجام شده و اساساً جایی است که تصویر در آن جاسازی می‌شود. مقادیری که ویژگی Referrerpolicy

می‌گیرد به صورت زیر است:

no-referrer
: هیچ اطلاعات ارجاعی همراه با درخواست تصویر ارسال نمی‌شود.
no-referrer-when-downgrade
: هیچ اطلاعات ارجاعی هنگام انتقال از HTTPS به HTTP ارسال نمی‌شود.
same-origin
: URL کامل با درخواست‌های یکسان ارسال می‌شود. هیچ اطلاعات ارجاعی برای درخواست‌های متقاطع ارسال نمی‌شود.
origin
: مبدأ (طرح، میزبان و پورت) را ارسال می‌کند.
strict-origin
: مبدأ را با HTTPS به HTTPS و HTTP را به هر درخواست مبدأ ارسال می‌کند. هیچ اطلاعات ارجاعی با HTTPS به درخواست‌های HTTP ارسال نمی‌شود.
origin-when-cross-origin
: مبدأ را با درخواست‌های متقاطع ارسال می‌کند. URL کامل، از جمله مسیر، با درخواست‌های یکسان ارسال می‌شود.
strict-origin-when-cross-origin
: مشابه origin-when-cross-origin

، اما هیچ اطلاعات ارجاعی با HTTPS به درخواست‌های HTTP ارسال نمی‌شود (مقدار پیش‌فرض).
unsafe-url
: مبدأ، مسیر و رشته پرس‌وجو را ارسال می‌کند. استفاده از این مقدار توصیه نمی‌شود زیرا اطلاعات کامل ارجاع دهنده را به اشتراک می‌گذارد و خطر امنیتی ایجاد می‌کند.

ویژگی Srcset برای تگ IMG در HTML

ویژگی Srcset

برای تگ IMG در HTML برای نمایش تصاویر واکنش‌گرا در وب‌سایت‌ها طراحی شده است. این ویژگی حاوی پیوندهایی به تصویر در اندازه‌های مختلف بوده که اندازه هر تصویر با عرض یا ارتفاع مشخص شده است. ویژگی Srcset

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

ویژگی size

این ویژگی همراه با ویژگی Srcset

استفاده می‌شود. در اصل ویژگی نام برده به مرورگر می‌گوید که در شرایط مختلف از چه اندازه تصویری استفاده کند.

ویژگی استایل

ویژگی Style

برای تگ ایمیج در HTML، برای اعمال استایل‌های‌ درون‌خطی مستقیماً بر روی تگ img

استفاده می‌شود و همه استایل‌های سراسری را که قبلاً اعمال شده است لغو می‌کند. ویژگی Style

بر ظاهر تگ ایمیج تاثیر گذاشته و امکان تنظیماتی مانند حاشیه، سایه و تراز را فراهم می‌کند.

ویژگی ارتفاع

ویژگی Height

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

ویژگی عرض

ویژگی Width

برای تگ IMG در HTML عرض تصویر را بر حسب پیکسل مشخص می‌کند. اگر هیچ ویژگی عرضی تعریف نشده باشد، تصویر در عرض اصلی خود ظاهر می‌شود. برای حفظ چیدمان ثابت و جلوگیری از تغییرات پس از بارگذاری تصویر، توصیه می‌شود هم ارتفاع و هم عرض برای تصاویر تعریف شوند.

ویژگی های HTML منسوخ شده برای تگ ایمیج

در نسخه‌های قدیمی‌تر HTML، برخی از ویژگی‌های تصویر با استانداردهای جدیدتر در «HTML5» جایگزین شده‌اند. در حالی که ممکن است مرورگرها همچنان از این ویژگی‌ها برای سازگاری پشتیبانی کنند اما استفاده از آن‌ها اکیداً توصیه نمی‌شود زیرا منسوخ شده تلقی می‌شوند.

فهرست ویژگی‌های منسوخ شده برای تگ ایمیج در اچ تی ام ال به صورت فهرست موارد زیر است:

align
: برای تراز کردن تصویر استفاده می‌شود.
border
: برای تنظیم حاشیه اطراف تصویر اعمال می‌شود.
hspace
: فضای افقی اطراف تصویر را کنترل می‌کند.
longdesc
: به صفحه وب پیوندی ایجاد کرده و شرح تصویر دقیق را ارائه می‌دهد.
name
: نامی را به تصویر اختصاص می‌دهد که اغلب برای اهداف اسکریپت استفاده می‌شود.
vspace
: فضای عمودی اطراف تصویر را مدیریت می‌کند.

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

چه مرورگرهایی از تگ ایمیج پشتیبانی می کنند؟

تگ IMG در HTML به طور جهانی به وسیله مرورگرهای بزرگ اینترنت شناخته‌شده و استفاده می‌شود. این تگ به طور کامل به وسیله مرورگرهای محبوب زیر پشتیبانی خواهد شد.

کروم
سافاری
اج
فایرفاکس
اپرا

علاوه بر این، تگ IMG در اچ تی ام ال با اکثر مرورگرهای تلفن همراه سازگار است و از نمایش و عملکرد ثابت در دستگاه‌های مختلف اطمینان می‌دهد.

تگ IMG در HTML از چه نوع فرمت تصویری پشتیبانی می کند؟

در زیر فهرستی از فرمت‌های تصویری محبوب پشتیبانی شده به وسیله مرورگرهایی مانند گوگل کروم، کروم، اج، فایرفاکس، سافاری و اپرا آمده است:

Apng
Bmp
Gif
Jpeg
Jpg
Png
Webp
Svg

نکات استفاده از تصاویر در صفحات وب

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

تصویری از یک برنامه‌ نویس
تصویری از یک برنامه‌ نویس عینکی پسر در حال نوشیدن قهوه و انجام کارهای کدنویسی پشت سیستم کامپیوتر.

توضیح دومی مناسب‌تر و کامل‌تر از اولی است. این رویکرد پر کردن متن جایگزین تصاویر به کاربرانی که به صفحه‌خوان‌ها تکیه می‌کنند کمک می‌کند تا محتوا را بهتر درک کنند.

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

استفاده از متن جایگزین متنی و توصیفی: باید اطمینان حاصل شود که متن جایگزین محتوای تصاویر غیر تزئینی را توصیف می‌کند.
اجتناب از متن جایگزین برای تصاویر تزئینی: برای تصاویری که هدفی صرفاً تزئینی دارند بهتر است متن جایگزین خالی نگه داشته شوند ولی با این حال کاربران می‌توانند برای این‌گونه تصاویر نیز متن جایگزین درج کنند.
تشریح پیوندهای هدف برای تصاویر قابل کلیک: اگر تصویری قابل کلیک است و به لینک خاصی منتهی می‌شود، بهتر است جزئیات مربوط به لینک هدف در متن جایگزین ارائه شود.
زبان سازگار در متن جایگزین: بهتر است متن جایگزین به همان زبان بقیه محتوای صفحه شود تا سازگاری داشته باشد. مثلاً برای محتوای فارسی بهتر است متن جایگزین تصاویر هم فارسی باشد.
استفاده از نام فایل‌های توصیفی: نام فایل تصویری بهتر است معنا دار و توصیفی از متن باشد.

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

برنامه نویسی با عینک در حال نوشیدن قهوه و کد نویسی

مثال هایی برای استفاده از تگ IMG در HTML

در این بخش چند مثال کاربردی از استفاده از IMG در HTML را بررسی خواهیم کرد.

تصویر با ویژگی خاص

می‌توان ارتفاع و عرض تصویر را با استفاده از ویژگی‌های height

و width

تعریف کرد. در این مثال، تصویر 150×150

پیکسل تنظیم شده است.

1<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" height="150" width="150">

تصویر با استایل درون خطی

می‌توان با استفاده از ویژگی style

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

1<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" style="border:3px solid black">

تصویر متحرک

تگ ایمیج در اچ تی ام ال از تصاویر متحرک مانند GIF پشتیبانی می‌کند. در زیر نمونه‌ای از نمایش GIF را مشاهده میکنید.

1<img src="https://example.com/rabbit.gif" alt="Rabbit jumping across the grass">

تصویر به عنوان دکمه

برای استفاده از تصویر به عنوان دکمه، تگ img

را باید در داخل تگ button

قرار داد. مثال زیر تصویری را نشان می‌دهد که به عنوان دکمه برای فرم استفاده می‌شود.

1<button type="submit"><img src="https://example.com/submit.jpg" alt="Submit the form"></button>

تصویر در حال بارگذاری تنبل

با تنظیم ویژگی loading

روی lazy

می‌توان بارگیری تنبل را برای تصویر فعال کرد. مثال زیر نحوه بارگذاری تنبل برای فایل GIF نشان می‌دهد.

1<img src="https://example.com/rabbit.gif" alt="Rabbit jumping across the grass" loading="lazy">

مثال‌های فوق راه‌های مختلف را برای استفاده از تگ تصویر HTML نشان می‌دهند که می‌توان تصاویر را در صفحه وب خود سفارشی کرده و نمایش آن را بهبود بخشید.

سخن پایانی

تصاویر یکی از اجزای جداناپذیر صفحات وب هستند که به این صفحات جذابیت خاصی بخشیده و موجب بهبود تجربه کاربری می‌شوند. نحوه استفاده صحیح از امور طراحی سایت و سئو از اهمیت بالایی برخوردار است و موجب می‌شود که تصاویر در نتایج موتورهای جستجو رتبه بگیرند.

در مطلب فوق از مجله فرادرس توضیحاتی کامل و مطلوب در رابطه با تگ IMG در HTML و نحوه استفاده از این تگ مورد بررسی و بازبینی قرار گرفت. همچنین در مطلب بالا انواع ویژگی‌های موجود و مورد استفاده در حال حاضر و حتی ویژگی‌های منسوخ‌شده برای این تگ مورد بررسی قرار گرفتند و در نهایت نکات مفید و کاربردی در رابطه با ویژگی متن جایگزین ارائه شد. در آخرسر چندین مثال عملی برای چگونگی استفاده از تگ ایمیج در HTML مورد بررسی قرار گرفتند.

source

توسطexpressjs.ir