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


جایگزین الکسا: ماجرای بازنشستگی الکسا و معرفی بهترین ابزارها برای جایگزینی آن

تگ audio در HTML

تگ video در HTML

تگ head در زبان نشانه گذاری HTML

تگ iframe در زبان نشانه گذاری HTML
تگ کنونیکال چیست؟ صفر تا صد کنونیکال + آموزش استفاده
آموزش جامع هشتگ گذاری در اینستاگرام ۰ تا ۱۰۰

تگ map (نقشه تصویری) در html

تگ a یا لینک (پیوند) در html

تگ های نقل قول و استناد در html (Quotation and Citation)

لینک فارسی یا انگلیسی،کدام url در سئو می تواند بهتر باشد؟

سئو سایت فروشگاهی بهمراه چک لیست کامل

سایت مپ نکات و موارد مهم درباره ثبت نقشه سایت در گوگل

پشتیبانی سایت + موارد، هزینه و تعرفه ها

بوم مدل کسب و کار چیست و راهنمای کامل

حذف سشن (session) سبد خرید برگشت از درگاه پرداخت در لاراول

نصب کتابخانه در پایتون

ارجاع دهنده یا منبع ورودی کاربر به سایت شما

استراتژی سئو به زبان ساده

مشکل sql_mode=only_full_group_by در لاراول (laravel)