عنصر picture در HTML
عنصر <picture> در HTML امکان نمایش تصاویر متفاوت بر اساس اندازه صفحه یا دستگاه را فراهم می کند. این قابلیت به بهینه سازی سرعت و کاهش مصرف پهنای باند کمک می کند.
ساختار عنصر picture
عنصر <picture> شامل یک یا چند تگ <source> است. هر <source> از ویژگی srcset برای معرفی تصویر و ویژگی media برای تعیین شرایط نمایش استفاده می کند. در پایان نیز یک تگ <img> برای مرورگرهایی که <picture> را پشتیبانی نمی کنند قرار داده می شود.
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" alt="Sample">
</picture>نکته: همیشه یک تگ <img> به عنوان آخرین فرزند <picture> قرار دهید.
موارد استفاده از picture
دو کاربرد اصلی برای استفاده از عنصر <picture> وجود دارد:
1. صرفه جویی در پهنای باند
در دستگاه های کوچک نیازی به بارگذاری تصاویر با حجم بالا نیست. مرورگر تصویر مناسب را بر اساس شرایط انتخاب می کند.
2. پشتیبانی از فرمت های مختلف
ممکن است برخی مرورگرها فرمت های خاصی را پشتیبانی نکنند. با استفاده از <picture> می توان چند فرمت تعریف کرد تا مرورگر اولین فرمت پشتیبانی شده را بارگذاری کند.
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles">
</picture>خلاصه فصل
- عنصر
<picture>برای تعریف چند منبع تصویر استفاده می شود. - تگ
<source>شرایط و منابع تصویر را مشخص می کند. - تگ
<img>برای مرورگرهای قدیمی یا شرایط پیش فرض ضروری است.
برای ادامه مطالعه به بخش تصاویر پس زمینه در HTML و فاویکون در HTML مراجعه کنید.