عناصر در HTML

عنصر <picture> در HTML

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

عنصر <picture> در HTML

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

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

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

مثال

نمایش تصاویر مختلف برای اندازه‌های مختلف صفحه نمایش:

<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> بعدی رو نادیده می‌گیره.

تگ‌های تصویر HTML