نمایش تصویر با عنصر img

عنصر <img> برای جای دادن یک تصویر در صفحه استفاده می‌شود. این عنصر یک عنصر خالی است و برچسب بسته ندارد؛ اما دو ویژگی src و alt تقریباً همیشه لازم است.

<img src="nature.jpg" alt="منظره‌ی طبیعت">

چرا alt مهم است؟

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

تعیین اندازه‌ی تصویر

با ویژگی‌های width و height می‌توان ابعاد نمایش تصویر را به پیکسل مشخص کرد. تعیین از پیش این مقادیر باعث می‌شود مرورگر فضای لازم را زودتر رزرو کند و صفحه هنگام بارگذاری تصویر نپرد.

<img src="nature.jpg" alt="منظره‌ی طبیعت" width="500" height="300">

استفاده از تصویر به‌عنوان لینک

با قرار دادن <img> داخل یک عنصر <a>، می‌توانید کل تصویر را قابل کلیک کنید.

<a href="https://example.com">
    <img src="logo.png" alt="لوگو">
</a>