HTML چندرسانه‌ای

تگ picture

تگ picture امکان ارائه چند نسخه از یک تصویر را می‌دهد تا مرورگر مناسب‌ترین را انتخاب کند. تگ‌های source فرمت یا اندازه‌های مختلف را تعریف می‌کنند و تگ img به‌عنوان گزینه پایانی همیشه لازم است. برای بهینه‌سازی سرعت و پشتیبانی از فرمت‌های مدرن مثل WebP عالی است.

سینتکس

<picture><source srcset="..." type="..."><img src="..." alt="..."></picture>

مثال کاربردی

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="منظره">
</picture>

ویژگی‌های (Attributes) مهم

media روی تگ source؛ شرط رسانه‌ای انتخاب منبع
srcset روی تگ source؛ فهرست تصاویر با عرضهای مختلف
class کلاس CSS برای استایل‌دهی

موارد مرتبط در HTML