تگ Picture به شما اجازه می دهد تا تصاویر مختلفی را برای دستگاه های گوناگون با صفحه نمایش هایی در ابعاد متفاوت نمایش دهید. از این عنصر برای قرار دادن تصویر در صفحه HTML و تنظیم آن برای صفحات نمایش با سایزهای متفاوت مثل موبایل، تبلت، لپتاپ و ... استفاده می شود.
عنصر Picture در HTML
تگ Picture در HTML کار را برای توسعه دهندگان وب به جهت مشخص کردن منابع تصویری راحت تر می کند. تگ Picture شامل یک یا چند عنصر source است، که هر کدام با ویژگی srcset به تصاویر مختلفی اشاره می کنند. با این روش مرورگر می تواند بهترین تصویر را که با صفحه فعلی تنظیم می شود انتخاب کند. هر عنصر source یک ویژگی media دارد که وقتی تصویر در مناسب ترین حالت قرار دارد تعریف می شود. عنصر media تعیین می کند که مثلا هر زمان حداقل اندازه صفحه نمایش 650px شد، آن source اجرا شود. هنگامی که از تگ picture استفاده می کنیم، باید برای صفحه نمایش های متفاوت، source های متفاوتی در نظر بگیریم تا نسبت به اندازه صفحه نمایش، source مربوطه load شود.
در کد بالا، برای اندازه های کوچکتر از 650px تصویر img_food.jpg و برای اندازه های کوچکتر از 465px تصویر img_car.jpg استفاده می شود. نتیجه کد در عکس زیر قابل مشاهده است.
وقتی اندازه ی صفحه تغییر می کند، تصویر دیگری نمایش داده می شود:
چه زمانی از عنصر picture استفاده کنیم؟
دو کاربرد اصلی برای تگ Picture وجود دارد:
- پهنای باند
اگر یک صفحه نمایش کوچک در اختیار دارید، ضروری نیست که یک فایل تصویری بزرگ را بارگذاری کنید. مرورگر با تطبیق دادن مقادیر ویژگی از اولین عنصر source استفاده کرده و تمام عنصرهای بعدی را نادیده می گیرد.
- پشتیبانی از فرمت
ممکن است برخی از دستگاه ها یا مرورگرها از تمام فرمت های تصاویر پشتیبانی نکنند. با استفاده از تگ picture، می توانید تصاویر را با تمام فرمت ها اضافه کنید و مرورگر اولین فرمتی را که بشناسد استفاده می کند و تمام عناصر دیگر را نادیده می گیرد.
که نتیجه کد بالا به شکل زیر خواهد بود:
تگ های تصویر در HTML
