عنصر img و ویژگی‌های آن

img: اولین قدم برای گذاشتن تصویر تو صفحه

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

تگ img چیه؟

تگ <img> برای جاسازی (Embed) یه تصویر داخل صفحه استفاده می‌شه. برخلاف تگ‌هایی مثل p یا div، این تگ یه تگ خالیه (Void Element)؛ یعنی نه محتوایی داره، نه تگ بسته‌شونده نیاز داره.

<img src="cat.jpg" alt="یک گربه‌ی پشمالو روی مبل نشسته است">

ویژگی src: منبع تصویر

ویژگی src مخفف Source هست و مسیر فایل تصویر رو مشخص می‌کنه؛ این مسیر می‌تونه نسبی (فایل داخل همون پروژه) یا کامل (آدرس اینترنتی یه تصویر روی یه سرور دیگه) باشه:

<!-- مسیر نسبی -->
<img src="images/cat.jpg" alt="گربه">

<!-- مسیر کامل -->
<img src="https://example.com/images/cat.jpg" alt="گربه">

ویژگی alt: متن جایگزین

ویژگی alt مخفف Alternative Text هست و یه توضیح متنی از تصویر ارائه می‌ده. این ویژگی تو چند حالت مهم به کار میاد:

• وقتی تصویر به هر دلیلی (خطای اینترنت، مسیر اشتباه، حذف فایل) بارگذاری نشه، این متن به‌جای تصویر نمایش داده می‌شه.
• صفحه‌خوان‌ها این متن رو برای کاربران نابینا می‌خونن، چون خودشون قادر به «دیدن» تصویر نیستن.
• موتورهای جستجو چون نمی‌تونن محتوای بصری تصویر رو مستقیم بفهمن، از alt برای درک موضوع تصویر استفاده می‌کنن.

<img src="team-photo.jpg" alt="اعضای تیم توسعه در دفتر مرکزی شرکت">

آیا alt همیشه اجباریه؟

طبق استاندارد HTML5، ویژگی alt همیشه باید وجود داشته باشه، حتی اگه مقدارش خالی باشه. برای تصاویری که صرفاً تزئینی هستن و هیچ معنای محتوایی ندارن (مثل یه خط جداکننده‌ی تزئینی)، می‌شه مقدار alt رو خالی گذاشت:

<img src="decorative-line.png" alt="">

این کار به صفحه‌خوان می‌گه «این تصویر رو کاملاً نادیده بگیر، چون هیچ اطلاعات معناداری نداره»؛ در مقابل، اگه اصلاً ویژگی alt رو ننویسی، صفحه‌خوان معمولاً مسیر فایل یا اسم تصویر رو می‌خونه که هیچ فایده‌ای برای کاربر نداره.

ویژگی‌های width و height

<img src="banner.jpg" alt="بنر تبلیغاتی محصولات جدید" width="800" height="400">

این دو ویژگی ابعاد تصویر رو بر حسب پیکسل مشخص می‌کنن. شاید فکر کنی این کار رو باید با CSS انجام داد (که درسته، برای کنترل دقیق‌تر معمولاً از CSS استفاده می‌شه)، اما نوشتن width و height مستقیم رو خود تگ img یه فایده‌ی مهم داره: مرورگر از همون ابتدا، قبل از اینکه تصویر کامل دانلود بشه، فضای دقیق موردنیازش رو تو صفحه رزرو می‌کنه. این کار از یه مشکل آزاردهنده به اسم «پرش محتوا» (Layout Shift) جلوگیری می‌کنه؛ یعنی جلوگیری از این‌که بقیه‌ی محتوای صفحه، بعد از لود شدن تصویر، ناگهان جابه‌جا بشن.

ویژگی title (اختیاری و کم‌کاربردتر)

<img src="chart.jpg" alt="نمودار فروش سال ۱۴۰۲" title="نمودار فروش ماهانه بر اساس داده‌های واقعی شرکت">

ویژگی title یه توضیح اضافه‌ست که وقتی کاربر موس رو روی تصویر نگه داره، به‌صورت یه تولتیپ کوچیک نمایش داده می‌شه. برخلاف alt که جایگزین تصویره و برای دسترسی‌پذیری حیاتیه، title صرفاً یه اطلاعات تکمیلیه و نباید جایگزین alt بشه.

یه مثال کامل

<h2>محصولات جدید ما</h2>

<img 
  src="images/new-product.jpg" 
  alt="کفش ورزشی مدل جدید با رنگ آبی و سفید" 
  width="600" 
  height="400">

<p>این محصول به‌تازگی به فروشگاه ما اضافه شده است.</p>

چه اتفاقی میفته اگه مسیر src اشتباه باشه؟

اگه فایل تصویر پیدا نشه (مثلاً اسم فایل اشتباه تایپ شده یا فایل حذف شده)، مرورگر به‌جای تصویر، یه آیکون شکسته (Broken Image Icon) نشون می‌ده و کنارش متن alt رو نمایش می‌ده. این دقیقاً یکی از دلایلیه که alt همیشه باید دقیق و معنادار نوشته بشه؛ چون تو این حالت، تنها چیزی که کاربر می‌بینه همین متنه.

چند اشتباه رایج

• فراموش‌کردن ویژگی alt، که هم برای دسترسی‌پذیری، هم برای سئو، هم برای حالت خطا (تصویر لود نشده) ضرریه.
• نوشتن alt هایی مثل «تصویر» یا «عکس۱» که هیچ توضیح واقعی درباره‌ی محتوای تصویر نمی‌دن.
• استفاده از title به‌جای alt، در حالی که این دو ویژگی هدف کاملاً متفاوتی دارن.
• ننوشتن width و height، که باعث پرش محتوای صفحه در زمان بارگذاری تصویر می‌شه.

بهترین روش‌ها

• همیشه alt رو با یه توضیح دقیق و مختصر از محتوای واقعی تصویر پر کن.
• برای تصاویر کاملاً تزئینی، alt رو خالی بذار (alt="")، نه اینکه کلاً حذفش کنی.
• همیشه width و height رو مشخص کن تا از پرش محتوای صفحه جلوگیری بشه.

نکته‌ی سئو

ویژگی alt یکی از مهم‌ترین فاکتورهای سئوی تصویر است؛ گوگل از این متن برای فهمیدن موضوع تصویر و نمایش آن در نتایج جستجوی تصویری (Google Images) استفاده می‌کند. توضیح دقیق و طبیعی (نه پر از کلمات کلیدی تکراری) بهترین نتیجه را دارد.

نکته‌ی دسترسی‌پذیری

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

جمع‌بندی

تگ img برای نمایش تصویر استفاده می‌شود و همیشه باید ویژگی src (مسیر فایل) و alt (متن جایگزین) داشته باشد. ویژگی‌های width و height به جلوگیری از پرش محتوای صفحه کمک می‌کنند، و alt نقش حیاتی در دسترسی‌پذیری، سئو و نمایش جایگزین در صورت خطای بارگذاری دارد.