المان Picture (The Picture Element)
با «المان Picture» می توان برای اندازه های مختلف، تصویر مناسب نشان داد. «عنصر (Element)» یک جزء HTML است. «منبع تصویر (Source)» یعنی آدرس فایل های تصویر. حالا ساده جلو می رویم.
المان Picture چیست؟
المان <picture> چند <source> می گیرد. هر source با srcset یک تصویر می دهد. سپس مرورگر بهترین تصویر را انتخاب می کند. می توان با media شرط اندازه صفحه را تعیین کرد.
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
نکته: همیشه در انتهای <picture> یک <img> قرار دهید. این «جایگزین (Fallback)» برای مرورگرهای قدیمی است.
چه زمانی از المان Picture استفاده کنیم؟
دو هدف اصلی داریم: صرفه جویی پهنای باند، و پشتیبانی از فرمت ها. مرورگر اولین منبع سازگار را برمی گزیند و بقیه را رد می کند.
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
گام های عملی سریع
- یک
<picture>بسازید. - چند
<source>باsrcsetو شایدmediaاضافه کنید. - در پایان، یک
<img>به عنوان جایگزین بگذارید.
جمع بندی سریع
- المان Picture تصاویر واکنش گرا را ساده می کند.
- از
mediaبرای اندازه ها استفاده کنید. - همیشه
<img>جایگزین را بگذارید. - اولین منبع سازگار استفاده می شود.