HTML <picture> Tag
تگ <picture> در HTML این امکان را فراهم می کند تا در عرض های مختلف مرورگر، از نسخه های متفاوتی از یک تصویر برای نمایش بهتر استفاده شود.
بیشترین مورد استفاده از تگ <picture> نمایش متناسب تصویر با توجه به دستگاه مورد استفاده کاربر (مانیتور، لپ تاپ، تبلت و موبایل) برای مشاهده صفحه می باشد تا ترکیب بندی کلی صفحه به لحاظ بصری (دیداری) حفظ شود.
مثال:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<picture>
<source srcset="https://my-project.ir/img/horse2.jpg" media="(min-width: 400px)"/>
<img src="https://my-project.ir/img/horse2.jpg" alt="تصویر اسب" />
</picture>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
مرورگر با توجه به مقادیر داده شده به صفت media در تگ <source> عرض آن را تطبیق داده و تصویر را تغییر می دهد.
کاربرد تگ <picture>:
- ارائه بهتر ترکیب بندی بصری تا ساختار صفحه در دستگاه های مختلف حفظ شود.
- ارائه تصاویر جایگزین در مواقعی که فرمت تصویر در مرورگر یا دستگاه های مختلف پشتیبانی نمی شود.
- کاهش مصرف پهنای باند و بهینه سازی زمان بارگذاری صفحه تا با توجه به دستگاه مورد استفاده کاربر(موبایل، تبلت،مانیتور)، نسخه متناسب با آن لود شود.
پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این تگ HTML پشتیبانی می کنند.
