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 برای استایلدهی