تصویر در HTML چیست؟ آموزش تگ img، ویژگی‌های src و alt و اندازه تصاویر

بعد از یادگیری لینک‌ها، یکی از مهم‌ترین عناصر محتوایی صفحات وب را بررسی می‌کنیم: تصویر در HTML.

در این درس یاد می‌گیریم تگ img چگونه کار می‌کند، ویژگی‌های src و alt چه کاربردی دارند، مسیر تصویر را چگونه بنویسیم، چرا بهتر است width و height را مشخص کنیم و ویژگی loading="lazy" چه زمانی مفید است.

تصویر در HTML چگونه نمایش داده می‌شود؟

<img src="images/html-course.webp" alt="آموزش HTML">

src مسیر تصویر و alt متن جایگزین تصویر را مشخص می‌کند. عنصر img یک Void Element است و تگ بسته ندارد.

ویژگی src در HTML چیست؟

ویژگی src مشخص می‌کند مرورگر تصویر را از کجا دریافت کند.

<img src="photo.webp" alt="تصویر نمونه">

<img src="images/photo.webp" alt="تصویر نمونه">

مسیر نسبی و مطلق تصویر

اگر تصویر داخل پروژه باشد معمولاً از مسیر نسبی استفاده می‌کنیم:

project/
├── index.html
└── images/
    └── course.webp

<img src="images/course.webp" alt="دوره آموزش HTML">

آدرس کامل تصویر نیز می‌تواند داخل src قرار بگیرد:

<img src="https://example.com/images/course.webp" alt="دوره آموزش HTML">

اگر مسیر تصویر اشتباه باشد چه می‌شود؟

اگر نام پوشه، نام فایل یا پسوند اشتباه باشد مرورگر نمی‌تواند تصویر را بارگذاری کند. DevTools و پنل Network برای پیدا کردن این خطا مفید هستند.

ویژگی alt در HTML چیست؟

alt متن جایگزین تصویر است و برای دسترس‌پذیری اهمیت زیادی دارد.

<img src="laptop.webp" alt="لپ‌تاپ روی میز کنار یک فنجان قهوه">

Alt باید متناسب با هدف تصویر در همان صفحه نوشته شود و نباید صرفاً نام فایل باشد.

Alt مناسب چگونه نوشته می‌شود؟

برای یک تصویر آموزشی می‌توان نوشت:

alt="ساختار تگ a شامل href و متن لینک در HTML"

اما عبارتی مثل alt="image-123.webp" اطلاعات مفیدی به کاربر نمی‌دهد.

تصویر تزئینی چه altی دارد؟

اگر تصویر صرفاً تزئینی است و هیچ اطلاعاتی منتقل نمی‌کند، معمولاً از Alt خالی استفاده می‌شود:

<img src="decoration.svg" alt="">

تفاوت alt و title

title جایگزین alt نیست. Alt نقش جایگزین متنی تصویر را دارد، در حالی که title فقط می‌تواند اطلاعات تکمیلی ارائه کند.

ویژگی width و height در img

<img
    src="course.webp"
    alt="دوره آموزش HTML"
    width="800"
    height="450"
>

مشخص کردن width و height به مرورگر کمک می‌کند قبل از دانلود تصویر، فضای لازم را رزرو کند و جابه‌جایی ناگهانی محتوا کمتر شود.

آیا width و height جای CSS را می‌گیرند؟

خیر. طراحی Responsive معمولاً با CSS کنترل می‌شود:

img {
    max-width: 100%;
    height: auto;
}

loading=”lazy” چیست؟

<img
    src="lesson-image.webp"
    alt="تصویر آموزشی HTML"
    width="1200"
    height="675"
    loading="lazy"
>

loading="lazy" به مرورگر اجازه می‌دهد بارگذاری بعضی تصاویر خارج از محدوده دید کاربر را به تعویق بیندازد.

آیا همه تصاویر باید lazy باشند؟

خیر. تصویری که در ابتدای صفحه و داخل محدوده دید اولیه قرار دارد معمولاً نباید بدون دلیل Lazy Load شود.

فرمت‌های رایج تصویر در وب

• JPEG یا JPG برای بسیاری از تصاویر عکاسی
• PNG برای برخی تصاویر دارای شفافیت
• WebP برای فشرده‌سازی مناسب در وب
• AVIF برای فشرده‌سازی پیشرفته‌تر در مرورگرهای مدرن
• SVG برای گرافیک‌های برداری

نام فایل تصویر

نامی مانند html-image-alt-example.webp از IMG_837492.webp قابل‌فهم‌تر است، اما نام فایل جای Alt را نمی‌گیرد.

قرار دادن تصویر داخل لینک

<a href="/html-course/">
    <img
        src="html-course.webp"
        alt="مشاهده دوره آموزش HTML"
        width="600"
        height="338"
    >
</a>

تصویر Responsive چیست؟

در ساده‌ترین حالت می‌توان با CSS از بیرون زدن تصویر از عرض محتوا جلوگیری کرد. HTML همچنین امکانات پیشرفته‌تری مثل srcset، sizes و picture دارد که در درس جداگانه بررسی می‌کنیم.

SEO تصاویر در HTML

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

اشتباهات رایج

• فراموش کردن Alt برای تصاویر محتوایی
• نوشتن نام فایل به‌جای Alt مفید
• اشتباه در مسیر src
• استفاده از تصاویر بسیار سنگین
• استفاده از چند br برای تنظیم جای تصویر
• Lazy Load کردن بی‌دلیل تصویر مهم بالای صفحه

مثال کامل

<img
    src="images/html-course.webp"
    alt="نمایی از محیط آموزش HTML و نمونه کد صفحه وب"
    width="1200"
    height="675"
    loading="lazy"
>

تمرین‌ها

یک پوشه images بسازید، یک تصویر محلی را با مسیر نسبی نمایش دهید، برای آن Alt مناسب بنویسید، سپس عمداً مسیر را اشتباه کنید و خطا را با DevTools بررسی کنید.

در این درس چه چیزهایی یاد گرفتیم؟

• برای نمایش تصویر از img استفاده می‌کنیم.
• src مسیر تصویر را مشخص می‌کند.
• alt متن جایگزین تصویر است.
• برای تصاویر تزئینی می‌توان از alt="" استفاده کرد.
• width و height به رزرو فضای تصویر کمک می‌کنند.
• loading="lazy" برای تعویق بارگذاری بعضی تصاویر پایین صفحه کاربرد دارد.

جمع‌بندی

تصویر در HTML با عنصر img در صفحه قرار می‌گیرد و دو ویژگی پایه آن src و alt هستند. استفاده درست از Alt، ابعاد تصویر و Lazy Loading به دسترس‌پذیری، پایداری چیدمان و تجربه کاربری بهتر کمک می‌کند.