معرفی و کاربرد تگ 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در اچ تی ام ال

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

[html]<picture>
<source srcset=”smaller.jpg” media=”(max-width: 768px)”>
<source srcset=”default.jpg”>
<img srcset=”default.jpg” alt=”My default image”>
</picture>[/html]

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

[html]<picture>
<source srcset=”smaller_landscape.jpg” media=”(max-width: 40em) and (orientation: landscape)”>
<source srcset=”smaller_portrait.jpg” media=”(max-width: 40em) and (orientation: portrait)”>
<source srcset=”default_landscape.jpg” media=”(min-width: 40em) and (orientation: landscape)”>
<source srcset=”default_portrait.jpg” media=”(min-width: 40em) and (orientation: portrait)”>
<img srcset=”default_landscape.jpg” alt=”My default image”>
</picture>[/html]

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

[html]<picture>
<source srcset=”smaller.jpg, smaller_retina.jpg 2x” media=”(max-width: 768px)”>
<source srcset=”default.jpg, default_retina.jpg 2x”>
<img srcset=”default.jpg, default_retina.jpg 2x” alt=”My default image”>
</picture>[/html]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور

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

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

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

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

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