آموزش کامل تگ img در HTML
تگ <img> یکی از پرکاربردترین عناصر در طراحی وب است که برای نمایش تصاویر در صفحات HTML استفاده می‌شود. این تگ یک عنصر خودبسته (self-closing) است و نیازی به تگ پایانی ندارد.
تگ img از مهم‌ترین عناصر HTML برای بهبود تجربه کاربری و زیبایی بصری وبسایت‌ها محسوب می‌شود.
ویژگی‌های اصلی تگ img
| ویژگی |
توضیحات |
| src |
مسیر تصویر (اجباری) |
| alt |
متن جایگزین برای دسترسی‌پذیری |
| width/height |
تعیین ابعاد تصویر (پیکسل یا درصد) |
نحوه استفاده از تگ img
ساده‌ترین روش استفاده از این تگ به صورت زیر است:
<img src="image.jpg" alt="توضیح تصویر">
برای یادگیری عمیق‌تر می‌توانید آموزش تگ img در html تا با جزئیات بیشتری آشنا شوید.
نکات مهم در استفاده از تصاویر
- همیشه از ویژگی alt برای توصیف تصویر استفاده کنید (امنیت و سئو)
- از فرمت‌های مناسب مانند JPEG، PNG یا WebP استفاده نمایید
- تصاویر را قبل از آپلود بهینه‌سازی کنید تا سرعت بارگذاری افزایش یابد
- برای تصاویر واکنش‌گرا از CSS یا ویژگی srcset استفاده کنید
مثال‌های پیشرفته
نمونه استفاده از تصویر با لینک:
<a href="page.html">
<img src="banner.jpg" alt="بنر تبلیغاتی" width="800" height="200">
</a>
استفاده از ویژگی srcset برای نمایش تصاویر واکنش‌گرا:
<img src="small.jpg"
srcset="medium.jpg 1000w, large.jpg 2000w"
alt="تصویر نمونه">
