تصاویر و رسانه‌های چندرسانه‌ای

6.1 نمایش و بهینه‌سازی تصاویر: از ساختار تا عملکرد

6.1.1 <img>: عنصر اصلی نمایش تصویر

• src: مسیر فایل تصویر (ضروری)
• alt: متن جایگزین (ضروری برای دسترسی‌پذیری)
• loading: نحوه بارگذاری (lazy, eager)
• decoding: روش دécoding (sync, async, auto)
• sizes و srcset: برای تصاویر واکنش‌گرا

<img 
 src="hero.jpg" 
 alt="تصویر معرفی دوره آموزشی برنامه‌نویسی"
 loading="lazy"
 decoding="async"
 srcset="hero-small.jpg 480w, hero-medium.jpg 800w, hero-large.jpg 1200w"
 sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
 />

6.1.2 ***picture*** و ***source***: تصاویر واکنش‌گرا (Responsive Images)

• <source> می‌تواند شامل media - type - sizes - srcset باشد.
• <img> در آخر قرار می‌گیرد به عنوان فایل پیش‌فرض

<picture>
 <source media="(max-width: 768px)" srcset="mobile-hero.webp" type="image/webp">
 <source media="(max-width: 768px)" srcset="mobile-hero.jpg">
 <source media="(min-width: 769px)" srcset="desktop-hero.webp" type="image/webp">
 <source media="(min-width: 769px)" srcset="desktop-hero.jpg">
 <img 
  src="desktop-hero.jpg" 
  alt="عنوان دوره آموزشی"
  loading="lazy"
  decoding="async"
 />
</picture>

6.1.3 بهینه‌سازی عملکرد: پیش‌بارگذاری و مدیریت بار

• استفاده از loading="lazy" برای تصاویر غیرضروری.
• استفاده از srcset و sizes برای بارگذاری تصویر مناسب به اندازه دستگاه.
• از decoding="async" برای کاهش تأخیر در تحلیل تصویر استفاده کنید.

6.2 صوت و ویدئو در صفحات وب: پخش هوشمندانه و قابلیت تنظیم

6.2.1 <video>: پخش ویدئو در صفحه

• controls: نمایش کنترل‌های پخش (پیش‌فرض: true)
• autoplay: شروع خودکار (باید با muted همراه باشد)
• loop: تکرار
• poster: تصویر پیش‌نمایش
• preload: none - metadata - auto
• playsinline: پخش در صفحه بدون پنجره کامل

<video 
 controls 
 autoplay 
 muted 
 loop 
 poster="preview.jpg"
 preload="metadata"
 playsinline
 >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="captions" src="subtitles.vtt" srclang="fa" label="زیرنویس فارسی">
  <p>مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند.</p>
</video>

6.2.2 <audio>: پخش صوت

• مشابه <video> اما برای فایل‌های صوتی.
• ویژگی‌های مشابه: controls - autoplay - loop - preload - poster (در صورت وجود).

<audio controls preload="metadata">
 <source src="podcast.mp3" type="audio/mpeg">
 <source src="podcast.ogg" type="audio/ogg">
 <p>مرورگر شما از پخش صوت پشتیبانی نمی‌کند.</p>
</audio>

6.2.3 <track>: زیرنویس و ردیف‌های مرتبط

• kind: captions - subtitles - descriptions - chapters - metadata
• srclang: زبان فایل زیرنویس
• label: نام نمایشی زیرنویس
• src: مسیر فایل زیرنویس (معمولاً .vtt)

<track 
 kind="captions" 
 src="subtitles-fa.vtt" 
 srclang="fa" 
 label="زیرنویس فارسی"
 default
/>

6.3 گرافیک برداری و گرافیک پیکسلی: از SVG تا Canvas

6.3.1 گرافیک برداری با <svg>

• مقیاس‌پذیر بدون از دست دادن کیفیت
• فایل‌های کوچک‌تر
• قابلیت تغییر رنگ، انیمیشن و تعامل با CSS/JS
• می‌تواند به صورت داخلی (inline) یا خارجی (embedded) استفاده شود.

<svg width="100" height="100" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="40" fill="#3498db" />
 <text x="50" y="55" text-anchor="middle" fill="white" font-size="12">SVG</text>
</svg>

6.3.2 گرافیک ترسیمی با <canvas>

• مناسب برای انیمیشن، بازی‌های وب، تحلیل داده و گرافیک پیچیده
• عملکرد بالا در محیط‌های پویا
• <canvas> بدون محتوای جایگزین (fallback) غیرقابل دسترسی است.

<canvas id="myCanvas" width="400" height="300">
 <p>مرورگر شما از <code><canvas></code> پشتیبانی نمی‌کند.</p>
</canvas>
  
<script>
 const canvas = document.getElementById('myCanvas');
 const ctx = canvas.getContext('2d');
 ctx.fillStyle = '#e74c3c';
 ctx.fillRect(50, 50, 200, 100);
</script>

بعدی

قبلی