تصویر پاسخ گو (picture)
تگ «تصویر پاسخ گو (picture)» برای انتخاب هوشمند تصویر است. مرورگر با توجه به شرط ها، مناسب ترین تصویر را نشان می دهد. این کار توی طراحی واکنش گرا خیلی کمک می کند؛ مثل انتخاب سایز مناسب عکس برای موبایل یا دسکتاپ.
تعریف و کاربرد ساده
عنصر «picture» داخلش چند «source» و در آخر یک «img» دارد. مرورگر از بالا به پایین «source»ها را بررسی می کند. اگر «media» جور بود، تصویر همان «srcset» را نشان می دهد. اگر هیچ کدام جور نبود، «img» به عنوان جایگزین نمایش داده می شود.
نمونه استفاده
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
چرا برای تصویر پاسخ گو مهم است؟
به جای یک تصویر ثابت، می توان چند نسخه دقیق ساخت. سپس براساس پهنای دید، بهترین نسخه انتخاب می شود. این کار هم زیباتر است، هم بهینه تر.
ساختار اجزاء picture
1) یک یا چند «source» با «media» و «srcset». 2) یک «img» در انتها برای حالت پشتیبان. ترتیب «source»ها مهم است؛ چون اولین مورد مطابق انتخاب می شود.
نکته: کار «picture» شبیه «video» و «audio» است. چند منبع می دهید و اولین منبع سازگار پخش می شود. برای آشنایی با اجزاء مرتبط ببین: source و img.
گام های عملی سریع
- یک تگ <picture> بساز.
- برای هر اندازه، یک <source> با media و srcset بگذار.
- در پایان، یک <img> به عنوان پشتیبان قرار بده.
جمع بندی سریع
- «picture» انتخاب تصویر را هوشمند می کند.
- چند «source» بده، یکی انتخاب می شود.
- وجود «img» در انتها ضروری است.
- ترتیب «source»ها روی نتیجه اثر دارد.