تگ picture در HTML

آموزش تگ picture در HTML

تگ <picture> در HTML چه کاربردی دارد؟

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

تگ  <picture> تگی است مانند یک قالب یا یک محفظه برای نگهداری یک  یا چندین تصویر.

با استفاده از آن میتوان یک یا چندین تصویر را در حالت ها و سایز های مختلف در صفحه وب خود نمایش دهید.

یکی از استفاده‌های رایج تگ <picture> در جهت دیزاین وبسایت برای طراحی واکنش‌گرا است.

برای آشنایی بیشتر با تنظیم تصاویر در HTML میتوانید به آموزش زیر مراجعه کنید:

افزودن و تنظیم تصاویر با HTML

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

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

تگ <img> در انتهای تگ picture به عنوان آخرین تگ لازم است قرار داده شود. وظیفه تگ <img> پشتیبانی از مرورگر‌هایی است که قابلیت پشتیبانی از تگ picture را ندارند و یا هیچ تگ <source> تعیین (و یا همخوانی ندارد) نشده است.

صفت source

دو ویژگی srcset و media در داخل تگ source قرار دارند:

ویژگی  srcset:
 این خاصیت اجباری است و تعیین کننده آدرس (URL) تصویر برای نمایش.

ویژگی media:
 حاوی کوئری شما برای چیزهایی مثل ارتفاع ، عرض( هر نوع کوئری معتبری که در CSS تعریف شود ) است را به همین تگ source که ساختید اضافه کنید.

نمونه

<picture>
 <source media="(min-width: 650px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_food.jpg">
 <source media="(min-width: 465px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_car.jpg">
 <img src="https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg">
</picture>

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>لطفا این صفحه را تغییر اندازه دهید</h3>
<picture>
 <source media="(min-width: 650px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_food.jpg">
 <source media="(min-width: 465px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_car.jpg">
 <img src="https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg">
</picture>
</body>
</html>

نتیجه

1.در مثال زیر اندازه صفحه بر روی %100 تنظیم است که تصویر غذا را مشاهده می کنید.

 

در مثال زیر اندازه صفحه بر روی %110 تنظیم است که تصویر  ماشین را مشاهده می کنید.

 

زمان استفاده از تگ picture

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

1. پهنای باند

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

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

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

مثال

دستگاه از اولین فرمت تصویری(png،jpg،gifو...) که پشتیبانی می کند استفاده می کند و بقیه تصاویر را نادیده می گیرد.

<picture>
 <source srcset="img_avatar.png">
 <source srcset="img_girl.jpg">
 <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>