در برنامه نویسی فرانت تگ picture در html به شما کمک میکنه تصاویر رو در پلتفرم یا سایزهای مختلف صفحه نمایش های مختلف نمایش بدید.
نحوه استفاده از تگ 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>
برنامه نویس خوب، موفق و توانایی هایی که باید داشته باشید
وسط چین کردن تصاویر با css داخل متن
کلیک بر روی دکمه های موجود بر روی صفحه با جاوا اسکریپت
آموزش لیست ها (Lists) در html
تصاویر پس زمینه در html
تصاویر (img) در html
نشانه گذاری (bookmarks) در html
تغییر رنگ لینک ها در html
مخفی کردن متن بلند با css
لینک (پیوند) در html
