<img> : افزودن تصاویر

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

مقدمه

تصاویر از عناصر اصلی طراحی وب محسوب می‌شوند؛ زیرا علاوه بر افزایش جذابیت بصری، اطلاعات بیشتری را به کاربر منتقل می‌کنند. تگ <img> به شما این امکان را می‌دهد که تصاویر را به صفحات وب اضافه کنید و محتوا را به صورت بصری ارائه دهید.

در این مقاله به بررسی کاربردهای تگ <img>، ویژگی‌های آن و نکات بهینه استفاده می‌پردازیم.

کاربرد تگ <img>

استفاده اصلی از تگ <img>، نمایش تصاویر در صفحات وب است. این تصاویر می‌توانند بخشی از محتوای اصلی، عناصر دکوراتیو یا اطلاعات تکمیلی یک مطلب باشند.

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

ویژگی‌های کلیدی تگ <img>

استفاده صحیح از تگ <img> مستلزم به کارگیری چند ویژگی کلیدی است:

src: مسیر فایل تصویری که قرار است نمایش داده شود.
alt: توضیح متنی تصویر که برای دسترسی‌پذیری و سئو اهمیت دارد. این ویژگی به کاربران کمک می‌کند تا در صورت عدم نمایش تصویر، مفهوم آن را درک کنند.
width و height: تعیین ابعاد تصویر جهت بهبود لود صفحه و جلوگیری از تغییرات ناگهانی در چیدمان محتوا.
title (اختیاری): ارائه توضیح تکمیلی که هنگام قرار گرفتن ماوس بر روی تصویر نمایش داده می‌شود.

نکات بهینه استفاده از تگ <img>

همیشه از ویژگی alt استفاده کنید تا تصاویر برای همه کاربران و موتورهای جستجو قابل دسترس باشند.
ابعاد تصاویر را مشخص کنید تا از جابجایی ناخواسته محتوا جلوگیری شود و سرعت لود صفحه بهبود یابد.
تصاویر را با فرمت مناسب (مانند JPEG، PNG یا WebP) انتخاب کنید تا کیفیت حفظ شده و حجم فایل کاهش یابد.
در صورت نیاز از تکنیک‌های lazy loading برای بهبود عملکرد و زمان بارگذاری صفحه استفاده کنید.

نمونه کد استفاده از تگ <img>

در زیر یک نمونه کد HTML نمایش داده شده است که در آن از تگ <img> برای افزودن تصویر به صفحه استفاده شده:

<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه نمونه با تصویر</title>
  </head>
  <body>
    <h1>صفحه نمونه</h1>
    <img src="https://www.example.com/images/sample.jpg" alt="تصویر نمونه" width="600" height="400" title="این یک تصویر نمونه است">
    <p>این تصویر نمونه نشان می‌دهد چگونه از تگ <img> برای افزودن تصاویر به صفحه وب استفاده کنید.</p>
  </body>
</html>