نحوه استفاده از تگ picture در html
تگ picture به شما اجازه میده تصاویر رو از منابع مختلف نمایش بدید یعنی براساس صفحه نمایش یا پلتفرم مورد نظر تصویر لازم رو نمایش بدید
تگ picture با استفاده از source میتونه این تصاویر رو مشخص کنه به این ترتیب خود مرورگر از بین تصاویر مناسب ترین تصویر رو برای سایز فعلی پلتفرم درخواستی رو نمایش میده که آدرس تصویر با خاصیت srcset مشخص میشه خاصیت media در source تعیین کننده اندازه مناسب برای نمایش تصویر آدرس دهی شده فعلی هستش.
<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>
همیشه از یک تگ img در داخل تگ picture استفاده کنید چون بعضی از مرورگرها از این تگ پشتیبانی نمی کنند و همچنین امکان داره شما برای برخی از نمایشگرها تصویری مشخص نکرده باشید پس تصویر مشخص شده در img نمایش داده خواهد شد.
امروزه با استفاده از کتابخانه های ریسپانسیو مثل بوت استرپ دیگه نیازی به استفاده از تگ picture احساس نمیشه
چه زمانی از تگ picture استفاده کنیم؟
دو فاکتور برای تعیین کردن این موضوع وجود داره
- پهنای باند : بازدیدکنندگان سایت شما با استفاده از دستگاه های مختلفی امکان داره وارد سایت شما شوند تگ picture کمک میکنه تصویر با اندازه مناسب مخصوصا از نظر حجم برای بازدیدکننده مورد نظر نمایش داده بشه تا حجم کمتری از پهنای باند سرور یا هاست شما استفاده بشه. سبک بودن صفحه برای بازدیدکنندگان مخصوصا موبایل یکی از مهمترین فاکتورهای سئو وب سایت هستش
- پشتیبانی از فرمت تصاویر : تصاویر با فرمت های مختلفی وجود داره مثلا png, jpg , ... که امکان داره برخی از مرورگرها از این تصاویر پشتیبانی نکنند picture کمک میکنه تصاویر با پسوندهای مختلف رو مشخص کنید و مرورگر اولین تصویری رو که پشتیبانی میکنه به بازدیدکننده نمایش میده
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
