تگ picture در html

زمان مطالعه

3 دقیقه

تعداد بازدید

732

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

نکات html

اشتراک گذاری این مطلب

دسته بندی مطالب

تگ picture در html

زمان مطالعه

3 دقیقه

تعداد بازدید

732

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

نکات html

اشتراک گذاری این مطلب

در برنامه نویسی فرانت تگ 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>

تصاویر پس زمینه در html

آموزش ایجاد جدول در HTML