تگ image در HTML: راهنمای جامع
تگ <img> یکی از پرکاربردترین عناصر در طراحی وب است که امکان نمایش تصاویر را در صفحات HTML فراهم می‌کند. این تگ به‌عنوان یک تگ خودبسته شناخته می‌شود و برخلاف بسیاری از تگ‌های دیگر، محتوایی بین تگ باز و بسته ندارد.
استفاده صحیح از تگ img نه‌تنها بر زیبایی سایت تأثیر می‌گذارد، بلکه بر سئو و دسترسی‌پذیری وبسایت نیز مؤثر است.
ویژگی‌های اصلی تگ img
| ویژگی |
توضیح |
| src |
مسیر تصویر (مطلق یا نسبی) |
| alt |
متن جایگزین برای دسترسی‌پذیری و سئو |
| width/height |
تعیین ابعاد تصویر (پیکسل یا درصد) |
نحوه استفاده پایه از تگ img
ساده‌ترین شکل استفاده از این تگ به صورت زیر است:
<img src="image.jpg" alt="توضیح تصویر">
برای یادگیری عمیق‌تر می‌توانید تگ image در html و اطلاعات تکمیلی را مطالعه کنید.
بهینه‌سازی تصاویر برای وب
- استفاده از فرمت‌های مناسب (JPEG برای عکس‌ها، PNG برای گرافیک‌های شفاف)
- فشرده‌سازی تصاویر بدون کاهش کیفیت محسوس
- تعیین ابعاد دقیق تصویر برای جلوگیری از تغییر سایز توسط مرورگر
- استفاده از ویژگی loading="lazy" برای بارگذاری تنبلانه
نکات پیشرفته
- استفاده از srcset برای تصاویر واکنش‌گرا
- به‌کارگیری تگ picture برای شرایط مختلف نمایش
- استفاده از نقشه‌های تصویری (image maps) برای مناطق قابل کلیک
توجه: همیشه متن alt را برای تصاویر مهم وارد کنید. این کار نه‌تنها برای کاربران نابینا مفید است، بلکه به موتورهای جستجو در درک محتوای تصویر کمک می‌کند.
