آموزش تگ Picture در HTML

در این مقاله به آموزش تگ Picture در HTML می پردازیم.

آموزش تگ Picture در HTML

تگ Picture به شما اجازه می دهد تا تصاویر مختلفی را برای دستگاه های گوناگون با صفحه نمایش هایی در ابعاد متفاوت نمایش دهید. از این عنصر برای قرار دادن تصویر در صفحه HTML و تنظیم آن برای صفحات نمایش با سایزهای متفاوت مثل موبایل، تبلت، لپتاپ و ... استفاده می شود.

 آموزش 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 استفاده می شود. نتیجه کد در عکس زیر قابل مشاهده است.

آموزش تگ Pictures در HTML

وقتی اندازه ی صفحه تغییر می کند، تصویر دیگری نمایش داده می شود:

 آموزش طراحی سایت

چه زمانی از عنصر picture استفاده کنیم؟

دو کاربرد اصلی برای تگ Picture وجود دارد:

  1. پهنای باند

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

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

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

آموزش HTML

که نتیجه کد بالا به شکل زیر خواهد بود:

آموزش طراحی سایت

 

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

آموزش تگ Pictures در HTML

آموزش طراحی سایت دوره آموزش طراحی سایت آموزش HTML آموزش تگ Picture در HTML