آموزش جامع تصاویر در HTML

🎯 اهداف یادگیری

• یادگیری نحوه درج تصاویر در صفحات وب
• آشنایی با ویژگی‌های مهم تگ img
• بهینه‌سازی تصاویر برای وب
• استفاده از تصاویر واکنش‌گرا
• کار با تصاویر پس‌زمینه

📌 مقدمه ای بر تصاویر در HTML

تصاویر نقش حیاتی در طراحی وب دارند و می‌توانند تجربه کاربری را به شدت بهبود بخشند. در HTML از تگ <img> برای نمایش تصاویر استفاده می‌شود.

<!-- ساده ترین روش استفاده از تصویر -->
<img src="image.jpg" alt="توضیح تصویر">

ویژگی‌های ضروری تگ img:

• src (منبع): آدرس تصویر (مطلق یا نسبی)
• alt (متن جایگزین): توضیح تصویر برای مواردی که تصویر نمایش داده نمی‌شود

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

انتخاب فرمت مناسب تصویر تأثیر زیادی بر کیفیت و حجم صفحه دارد:

📌 ویژگی‌های پیشرفته تصاویر

تگ img ویژگی‌های مفید دیگری نیز دارد که باید با آنها آشنا شوید:

<img
  src="product.jpg"
  alt="محصول ویژه"
  width="400"
  height="300"
  loading="lazy"
  title="توضیح اضافی هنگام هاور"
  style="border: 2px solid #eee; border-radius: 8px;"
>

توضیح ویژگی‌های مهم:

• width/height: تعیین ابعاد تصویر (به پیکسل)
• loading="lazy": بارگذاری تنبلانه (فقط وقتی تصویر در viewport قرار می‌گیرد)

  بارگذاری تنبلانه (Lazy Loading) یک تکنیک بهینه‌سازی وب است که به کاهش زمان بارگذاری صفحات و استفاده بهینه از منابع شبکه کمک می‌کند. با استفاده از این تکنیک، محتوا یا تصاویر تنها زمانی بارگذاری می‌شوند که کاربر آنها را در viewport (منطقه قابل مشاهده صفحه) مشاهده کند. این به این معناست که تصاویر یا اجزایی که در بالای صفحه نیستند و کاربر آن‌ها را نمی‌بیند، بلافاصله بارگذاری نمی‌شوند.

  ویژگی loading="lazy" در تگ <img> به مرورگر می‌گوید که تصویر مربوطه را تنها زمانی بارگذاری کند که به ناحیه قابل مشاهده صفحه نزدیک شده باشد. این ویژگی باعث می‌شود که زمان بارگذاری اولیه صفحه کاهش یابد و پهنای باند کمتری مصرف شود، زیرا فقط تصاویری که واقعاً مورد نیاز هستند، بارگذاری می‌شوند.

• title: متن راهنما هنگام قرار گرفتن موس روی تصویر
• style: استایل‌دهی مستقیم به تصویر

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

تصاویر واکنش‌گرا (Responsive Images) به تصاویری اطلاق می‌شود که به طور بهینه برای اندازه و وضوح مختلف نمایشگرها و دستگاه‌ها بارگذاری می‌شوند. برای نمایش مناسب تصاویر در دستگاه‌های مختلف، چندین روش وجود دارد:

۱. استفاده از CSS

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

۲. استفاده از تگ picture

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="تصویر واکنش‌گرا">
</picture>

۳. استفاده از srcset

<img
  src="default.jpg"
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px"
  alt="تصویر با srcset"
>

📌 تصاویر پس‌زمینه در CSS

برای استفاده از تصاویر به عنوان پس‌زمینه، از CSS استفاده می‌کنیم:

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
}

ویژگی‌های مهم background-image:

• background-size: تعیین اندازه تصویر (cover, contain, یا مقادیر مشخص)
• background-position: موقعیت تصویر (center, top, left, right, bottom)
• background-repeat: تعیین تکرار یا عدم تکرار تصویر
• background-attachment: ثابت کردن تصویر هنگام اسکرول (fixed)

📌 بهینه‌سازی تصاویر برای وب

رعایت این نکات سرعت بارگذاری صفحه را بهبود می‌بخشد:

۱. فشرده‌سازی تصاویر

• استفاده از ابزارهایی مانند TinyPNG یا ImageOptim
• تبدیل به فرمت WebP برای حجم کمتر و کیفیت بهتر
• تنظیم کیفیت تصاویر بر اساس نیاز (معمولاً 70-80% برای JPG کافی است)

۲. انتخاب ابعاد مناسب

• تنظیم ابعاد تصویر دقیقاً به اندازه مورد نیاز در صفحه
• استفاده از تصاویر با وضوح مناسب (معمولاً 72-96 DPI برای وب کافی است)

۳. استفاده از تکنیک‌های مدرن

• استفاده از loading="lazy" برای تصاویر خارج از viewport
• استفاده از srcset برای ارائه تصاویر با اندازه‌های مختلف
• استفاده از CDN برای تحویل سریع‌تر تصاویر

📌 تمرین عملی

صفحه زیر را با استفاده از تصاویر بهینه‌شده ایجاد کنید:

<div class="gallery">
  <h2>گالری تصاویر</h2>
  <div class="images">
    <img src="..." alt="...">
    <img src="..." alt="...">
    <img src="..." alt="...">
  </div>
</div>

راهنمای تمرین:

1. از تصاویر با فرمت مناسب استفاده کنید (WebP یا JPG برای عکس‌ها، PNG برای تصاویر با شفافیت)
2. ابعاد تصاویر را بهینه کنید (حداکثر عرض 800px برای گالری کافی است)
3. از ویژگی loading="lazy" استفاده کنید
4. متن alt توصیفی برای هر تصویر بنویسید
5. تصاویر را با CSS به شکل زیبا نمایش دهید (حاشیه، سایه، انحنای گوشه‌ها)

📌 قدم بعدی

در درس بعدی با لینک‌ها و نحوه پیوند صفحات در HTML آشنا خواهیم شد!