عنصر <picture> شامل دو تگ داخلی می باشد: یک یا چند تگ <source> و یک تگ <img>
مرورگر اولین عنصر <source> را در تگ <picture> بررسی می کند و در صورت تطابق سایز تصویر را اعمال میکند.
تگ <img> در انتهای تگ picture به عنوان آخرین تگ لازم است قرار داده شود. وظیفه تگ <img> پشتیبانی از مرورگرهایی است که قابلیت پشتیبانی از تگ picture را ندارند و یا هیچ تگ <source> تعیین (و یا همخوانی ندارد) نشده است.
صفت source
دو ویژگی srcset و media در داخل تگ source قرار دارند:
ویژگی srcset: این خاصیت اجباری است و تعیین کننده آدرس (URL) تصویر برای نمایش.
ویژگی media: حاوی کوئری شما برای چیزهایی مثل ارتفاع ، عرض( هر نوع کوئری معتبری که در CSS تعریف شود ) است
1.در مثال زیر اندازه صفحه بر روی %100 تنظیم است که تصویر غذا را مشاهده می کنید.
در مثال زیر اندازه صفحه بر روی %110 تنظیم است که تصویر ماشین را مشاهده می کنید.
زمان استفاده از تگ picture
دو هدف اصلی برای عنصر <picture> وجود دارد:
1. پهنای باند
اگر صفحه یا دستگاه کوچکی دارید ، نیازی به بارگذاری یک فایل تصویری بزرگ نیست. مرورگر از اولین عنصر source> برای مطابقت با ویژگی استفاده می کند و بقیه تصاویر را نادیده می گیرد.
2. پشتیبانی از فرمت
برخی از مرورگرها یا دستگاه ها ممکن است از همه فرمت های تصویر پشتیبانی نکنند. با استفاده از عنصر <picture> ، می توانید تصاویری از همه فرمت ها را اضافه کنید و مرورگر از اولین فرمت مورد استفاده خود استفاده می کند و بقیه تصاویر را نادیده می گیرد.
مثال:
دستگاه از اولین فرمت تصویری(png،jpg،gifو…) که پشتیبانی می کند استفاده می کند و بقیه تصاویر را نادیده می گیرد.