معرفی و کاربرد تگ picture در HTML

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد تگ <picture> در HTML می پردازیم.

تگ <picture> در HTML

معرفی و کاربرد تگ picture در HTML

معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML

تگ <picture> یکی از تگ های جدید HTML5 هست. که به شما امکان ایجاد چند تگ source که هر کدام از این تگ ها شامل محل تصویر و شرطی که تحت تاثیر آن باید تصاویر بارگذاری بشوند را می دهد.

با این روش یک تصویر کاملا متفاوت با توجه به دو حالت زیر بارگذاری می کنید:

  • نتایج مدیاکوئری مثلا ارتفاع ، عرض یا orientation دستگاه

  • تراکم پیکسلی

یعنی شما در این حالت ها می توانید:

  • تصاویر با سایز مناسب، که باعث استفاده بهتر از پهنای باند میشود را بارگذاری کنید.
  • تصاویر مختلف بریده شده با ابعاد مختلف را با توجه به تغییرات layout در عرض های مختلف بارگذاری کنید.
  • تصاویر با رزولوشن بالاتر را برای صفحه نمایش هایی با تراکم پیکسلی بالاتر بارگذاری کنید.

مراحل کار با تگ <picture> درون سند HTML

  1. در ابتدا شما باید تگهای باز و بسته <picture></picture> را بسازید.
  2. داخل این تگ ها ، یک تگ <source> به ازای هر کوئری که میخواید اجرا بشود بسازید.
  3. صفت media که حاوی کوئری شما برای چیزهایی مثل ارتفاع ، عرض یا orientation دستگاه هست را به همین تگ source که ساختید اضافه کنید.
  4. صفت srcset حاوی نام تصویر مربوطه برای بارگذاری را به همین تگ source اضافه کنید.
  5. اگر می خواهید تصاویری برای صفحه نمایش هایی با تراکم پیکسلی متفاوت را قرار بدهید کافی هست که نام تصاویر دیگر را هم به صفت srcset اضافه کنید. مثلا برای صفحه نمایش های رتینا
  6. مجددا تگ img رو هم اضافه کنید.

مثال در مورد تگ <pictureدر html

مثال ۱ : استفاده از تگ <picture> در زمانی که سایز صفحه نمایش کمتر از ۷۶۸px بود، تصویر کوچک تری را بارگذاری کند:

مثال ۲ : می توانید با تگ <picture> تصویر را با توجه به عمودی یا افقی بودن دستگاه ، با به کارگیری چند کوئری بارگذاری کنید:

 مثال ۳ : می توانید با تگ <picture> و استفاده از صفت srcset تصویری با یک رزولوشن دیگر را برای صفحه نمایش هایی با تراکم پیکسلی بالا ایجاد کنید:

بررسی تگ <picture> در HTML 4.01 و HTML5

تگ <picture> یک تگ جدید محسوب شده و تنها در نسخه HTML5 پشتیبانی می شود. تگ <picture> در HTML4.01 و نسخه های قدیمی تر پشتیبانی نمی شود.

ویژگی های عمومی تگ <picture> در HTML

تگ <picture> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

رویدادهای عمومی تگ <picture> در HTML

تگ <picture> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.

پشتیبانی از تگ <picture> در Android 2.3

اندروید ۲.۳ ، تگ های source داخل تگ <picture> را شناسایی نمی کند. ولی صفت srcset را وقتی برای تگ img استفاده میشود اندروید ۲.۳ میشناسد. به همین خاطر توصیه میشود همیشه تگ img را همراه با صفت srcset در اندروید ۲.۳ استفاده کنید.

پشتیبانی از تگ <picture> براساس نیاز به جاوا اسکریپت

هنگام استفاده از تگ <picture> ، مرورگرهایی که از تگ <picture> پشتیبانی نمیکنند و جاوا اسکریپت در این مرورگرها غیرفعال هست، کاربران فقط متن alt رو میبینند. لذا بهتر هست برای بارگذاری تصاویر در مرورگرهایی که جاوا اسکریپت را پشتیبانی نمی کنند، از تگ <img> استفاده کنید.

معرفی و کاربرد تگ picture در HTML

معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML | معرفی و کاربرد تگ picture در HTML

پشتیبانی از تگ <picture> براساس نیاز به media query

تگ <picture> با مرورگرهایی که از مدیاکوئری css3 پشتیبانی می شود، به خوبی کار میکند. اکثر مرورگر های جدید هم از مدیا کوئری ها پشتیبانی میکنند.

پشتیبانی از تگ <picture> براساس درخواست های http اضافه

در مرورگرهایی که از srcset پشتیبانی میکنند ولی هنوز از تگ <picture> پشتیبانی نمیکنند، این احتمال وجود دارد که قبل از تشخیص تصویر مناسب از تگ source ، تصویری که برای تگ img اختصاص داده شده را بارگذاری کنند.

پشتیبانی مرورگرها از تگ <picture> در سند HTML

در زیر مرورگرهای معتبر اینترنتی از اولین نسخه هایی که از تگ <picture> پشتیبانی می کنند، آمده است:

جهت دیدن تمام ردیف و ستون ها در حالت موبایلی جدول را به چپ و راست اسکرول کنید.

معرفی و کاربرد تگ picture در HTML – اختصاصی سایت آموزی