تصاویر

تگ img

تگ <img> برای نمایش تصاویر استفاده می‌شود. این تگ تهی است و بسته نمی‌شود.

<img src="image.jpg" alt="توضیح تصویر">

ویژگی‌های مهم img

ویژگی	ضروری؟	توضیح
src	✅ بله	مسیر فایل تصویر
alt	✅ بله	توضیح متنی تصویر (برای دسترس‌پذیری)
width	خیر	عرض تصویر (پیکسل)
height</td><td>خیر</td><td>ارتفاع تصویر (پیکسل)</td></tr> <tr><td><code>loading	خیر	lazy برای بارگذاری تنبل

مسیرهای تصویر

مسیر تصویر می‌تواند:

• مطلق: src="https://example.com/image.jpg"
• نسبی: src="images/photo.jpg"
• روت: src="/images/photo.jpg"

ویژگی alt (مهم برای دسترس‌پذیری)

ویژگی alt توضیح متنی تصویر است و برای:

• صفحه‌خوان‌ها (Screen Readers)
• وقتی تصویر بارگذاری نمی‌شود
• سئو (SEO)

✅ درست: <img src="cat.jpg" alt="یک گربه سیاه روی مبل">
❌ غلط: <img src="cat.jpg" alt="image.jpg">
❌ غلط: <img src="cat.jpg"> (بدون alt)

برای تصاویر تزئینی، alt="" خالی بنویسید.

ویژگی loading="lazy"

برای بارگذاری تنبل تصاویر (فقط وقتی در دید کاربر قرار می‌گیرند):

<img src="image.jpg" alt="توضیح" loading="lazy">

این ویژگی سرعت صفحه را بهبود می‌دهد.

تگ picture و source

برای ارائه چند فرمت مختلف از یک تصویر (برای مرورگرهای مختلف):

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 500px)" srcset="medium.jpg">
  <img src="small.jpg" alt="توضیح">
</picture>

srcset و sizes

برای تصاویر واکنش‌گرا (Responsive):

<img src="image-800w.jpg"
     srcset="image-400w.jpg 400w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="توضیح">

Image Maps

برای ایجاد نواحی قابل کلیک روی یک تصویر:

<img src="planets.jpg" alt="سیارات" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="خورشید">
  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="عطارد">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="زهره">
</map>

آیکون (Favicon)

برای افزودن آیکون سایت در تب مرورگر:

<link rel="icon" href="favicon.ico" type="image/x-icon">

فرمت‌های تصویری

فرمت	توضیح	پشتیبانی
JPEG	عکس‌ها با رنگ‌های زیاد	عالی
PNG	تصاویر با شفافیت، شفافیت	عالی
WebP	فرمت جدید، فشرده‌تر	خوب
SVG	تصاویر برداری (مقیاس‌پذیر)	عالی
GIF	انیمیشن ساده	خوب

نکات مهم

• همیشه alt معنادار بنویسید
• از loading="lazy" برای تصاویر زیر خط دید استفاده کنید
• تصاویر را فشرده کنید (WebP، JPEG با کیفیت مناسب)
• برای آیکون از فرمت ICO یا PNG استفاده کنید
• از تصاویر واکنش‌گرا استفاده کنید
• مسیرهای تصویر را به‌درستی مدیریت کنید