عنصر Picture
عنصر picture امکان نمایش تصاویر در دستگاه‌های مختلف یا با اندازه‌های متفاوت را برای ما فراهم می‌کند.[۱]
عنصر <picture> در HTML
HTML5 عنصر <picture> را برای ایجاد انعطاف بیشتر هنگام تخصیص منابع تصویر معرفی کرد.
عنصر <picture> دارای تعدادی عنصر <source> است، که هریک به منبع‌های تصویر متفاوتی اشاره می‌کنند. با این روش مرورگر می‌تواند مناسب‌ترین تصویر را برای چشم‌انداز و/یا دستگاه کنونی انتخاب کند.
هر عنصر <source> ویژگی‌هایی دارد که مشخص می‌کنند چه زمانی تصویر آنها مناسب‌ترین تصویر است.
مثال
تصاویر مختلف را در صفحه نمایش‌های با سایز متفاوت نمایش می‌دهد:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
نکته: همیشه یک عنصر <img> را بعنوان آخرین عنصر فرزند عنصر <picture> تعیین کنید. عنصر <img> توسط مرورگرهایی استفاده می‌شود که از عنصر <picture> پشتیبانی نمی‌کنند یا زمانیکه هیچ‌یک از تگ‌های <source> مطابقت ندارند.
چه زمانی از عنصر Picture استفاده شود
دو هدف اصلی برای عنصر <picture> وجود دارد:
۱. پهنای باند
- اگر یک صفحه نمایش یا دستگاه کوچک دارید، لازم نیست فایل تصویری بزرگی بارگذاری شود. مرورگر اولین عنصر
<source>را با مقادیر ویژگی مطابق استفاده می‌کند، و هر یک از عناصر بعدی را نادیده می‌گیرد.
۲. پشتیبانی از قالب بندی
- برخی از مرورگرها یا دستگاه‌ها ممکن است از تمام قالب بندی‌های تصویر پشتیبانی نکنند. با استفاده از عنصر
<picture>می‌توان تصاویری از همه قالب بندی‌ها اضافه کرد و مرورگر از اولین فرمی که به می‌شناسد استفاده می‌کند و هر یک از موارد بعدی را نادیده می‌گیرد.
مثال
مرورگر از اولین قالب بندی تصویر که می‌شناسد استفاده می‌کند:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
توجه: مرورگر از اولین عنصر <source> با مقادیر ویژگی مطابق استفاده می‌کند، و عناصر <source> بعدی را نادیده می‌گیرد.
منابع آموزشی