عنصر تصویر در HTML

عنصر <picture> در HTML اجازه می دهد تصاویر مختلفی را برای دستگاه های مختلف یا اندازه صفحه نمایش دهیم.

عنصر <picture> در HTML

عنصر <picture> در HTML به توسعه دهندگان وب انعطاف پذیری بیشتری در مشخص کردن منابع تصویر می دهد.

عنصر <picture> شامل یک یا چند عنصر <source> است که هر کدام از طریق ویژگی srcset به تصاویر مختلف اشاره می کنند. به این ترتیب مرورگر می تواند تصویری را انتخاب کند که به بهترین وجه متناسب با دید فعلی یا دستگاه متناسب است.

هر عنصر <source> دارای ویژگی media است که زمان مناسب ترین تصویر را تعیین می کند.

<picture>

  <source media="(min-width: 650px)" srcset="HTML.jpg">

  <source media="(min-width: 465px)" srcset="maxdev.jpg">

  <img src="maxlogo.jpg">

</picture>
امتحان کنید

 

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

 

هنگام استفاده از عنصر تصویر:

دو هدف اصلی برای عنصر <picture> وجود دارد

1-  پهنای باند

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

 

2- پشتیبانی از فرمت

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

<picture>

  <source srcset="img_avatar.png">

  <source srcset="HTML-2.jpg">

  <img src="samplegif.gif" alt="Beatles" style="width:auto;">

</picture>
امتحان کنید

 

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

 

تگ های تصویر HTML

تگ

توضیح

<img> یک تصویر را تعریف می کند
<map> یک نقشه تصویر را تعریف می کند
<area> یک منطقه قابل کلیک روی نقشه تصویر را تعریف می کند
<picture> ظرفی را برای چندین منبع تصویر تعریف می کند