استفاده از عنصر picture در HTML

عنصر picture به ما امکان می دهد تا تصاویر مختلف را برای دستگاه ها یا سایزهای مختلف نمایش دهیم.

عنصر <picture> در HTML

 HTML5 ، عنصر <picture> را معرفی کرده است تا وقتی که داریم منبع تصویر را مشخص می کنیم انعطاف پذیری بیشتری را به آن بدهیم. به این طریق، مرورگر می تواند تصویری که بهتر در ویو(view) یا دستگاه جا می شود را انتخاب کند. هر عنصر <source> خصوصیت هایی دارد که توضیح می دهند که چه موقع تصویر آنها در مناسب ترین حالت قرار دارد.

<picture>
  <source media="(min-width: 650px)" srcset="/other/img_the_scream.jpg">
  <source media="(min-width: 465px)" srcset="/other/pic_bulboff.gif">
  <img src="/other/img_girl.jpg">
</picture>

نکته: همواره سعی کنید یک عنصر <img> را بعنوان آخرین عنصر از <picture> مشخص کنید. از عنصر <img> توسط مرورگرهایی که از عنصر <picture> پشتیبانی نمی کنند، استفاده می شود. یا اگر هیچ یک از تگ های <source> مورد تطابق قرار نگیرند، از آن استفاده می شود.

چه زمانی باید از عنصر picture استفاده کنیم؟

برای استفاده از عنصر <picture> دو هذف اصلی وجود دارد:

1. پهنای باند: اگر یک صفحه نمایش کوچک داشته باشیم، ضروری نیست که یک فایل تصویر بزرگ را بارگذاری کنیم. مرورگر از اولین عنصر <source> استفاده می کند و مقادیر خصوصیت ها را تطبیق می دهد و هریک از تصاویر بعد از آن را نادیده می گیرد.

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

<picture>
  <source srcset="/other/img_chania.jpg">
  <source srcset="/other/img_girl.jpg">
  <img src="/other/img_the_scream.jpg" alt="Beatles" style="width:auto;">
</picture>

 نکته: مرورگر از اولین عنصر <source> با تطابق دادن مقادیر خصوصیت ها استفاده می کند و دیگر عناصر <source> را نادیده می گیرد.