تگ picture در html

تگ picture در html

زمان مطالعه

3 دقیقه

تعداد بازدید

856

تعداد پرسش ها

0

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


برچسب ها :

نکات html

اشتراک گذاری این مطلب
بهزاد میرزازاده
در مورد نویسنده : همیشه سخت تلاش کردم و به موفقیت های خیلی زیادی رسیدم اما دلیل نشد که متوقف بشم من برای هر روز برنامه دارم و به امید موفقیت های بزرگتر قدم بر میدارم همیشه سخت ترین مسئله ها، ساده ترین راه حل رو دارند پس بهانه جویی نباید روش کار ما برنامه نویسان باشه!!! ما می توانیم آینده را تعیین کنیم

تگ picture در html

تگ picture در html

زمان مطالعه

3 دقیقه

تعداد بازدید

856

تعداد پرسش ها

0

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


برچسب ها :

نکات 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>

 

بهزاد میرزازاده
در مورد نویسنده : همیشه سخت تلاش کردم و به موفقیت های خیلی زیادی رسیدم اما دلیل نشد که متوقف بشم من برای هر روز برنامه دارم و به امید موفقیت های بزرگتر قدم بر میدارم همیشه سخت ترین مسئله ها، ساده ترین راه حل رو دارند پس بهانه جویی نباید روش کار ما برنامه نویسان باشه!!! ما می توانیم آینده را تعیین کنیم


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی