آموزش تگ Picture

نویسنده پوریا ستایش پوریا ستایش
1399/05/06
0
103
زمان مطالعه 3 دقیقه
آموزش تگ Picture

در این مقاله به آموزش تگ Picture در Html و آموزش تگ Source در Html می‌پردازیم. همچنین در مورد فواید استفاده از  تگ Picture و ارتباط آن با تگ img آموزش می دهیم.

در قسمت های قبل با HTML و به خصوص تگ img آشنا شدید. شاید در تمرین هایی که انجام داد با یک مشکل برخورده باشید یا یک سوال برایتان به وجود آمده باشد.

آیا راهی هست که تصاویر بزرگ را در مرورگر به شکل صحیح نمایش دهیم؟ یا چگونه نحوه نمایش یک تصویر، در دستگاه های مختلف مثل موبایل و تبلت را کنترل کنیم؟

دلایل استفاده از تگ Picture چیست؟

باید گفت در طراحی وب مبحثی به اسم طراحی وانگش‌گرا یا به انگلیسی «Responsive Design» وجود دارد. در این نوع طراحی تمامی شرایط مربوط به رزولوشن صفحات در نظر گرفته می‌شود تا عناصر صفحه به شکل صحیح در دستگاه‌های مختلف نمایش داده شوند. مبحث واکنشگرایی یک مبحث مهم است که به منظور کسب تجربه لذت بخش توسط کاربران باید انجام شود. چون همه کاربران با رایانه وارد سایت شما نمی‌شوند در نتیجه در صورت رعایت نکردن این نکات کاربران خود را از دست می‌دهید. همچنین توسط گوگل، وکنشگرایی صفحات سایت شما بررسی می شود و در صورت وجود مشکل، نمره منفی برای سایت شما در نظر گرفته می‌شود.

در زبان CSS به راحتی قادر به کنترل عناصر در صفحه هستیم ولی آیا راهی برای کنترل تصاویر در دستگاه های مختلف توسط HTML وجود دارد؟ بله، حتما. به وسیله تگ picture می توانیم این کار را انجام دهیم.قبل از بررسی تگ picture باید با تگ source آشنا شویم.

آموزش تگ Source در HTML

قبلا در مورد تگ‌های «Self-Closing» صحبت کردیم. تگ Source به تگ پایان نیازی ندارد و خود بسته شونده است. به طور خلاصه تگ Source برای مشخص کردن منبع یک فایل استفاده می شود. درتگ ها audio و picture و video کاربرد دارد. تگ source به ما این امکان را می‌دهد که تصویر یا ویدئو مناسب با عرض صفحه نمایش کاربر را نمایش دهیم. تگ Source دو ویژگی مهم دارد که عبارت اند از:

  • ویژگی media
  • ویژگی srcset

ساختار کلی تگ source به شکل زیر است:

<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">

ویژگی media در تگ Source

برای تنظیم شرط از این ویژگی استفاده می‌شود. به عنوان مثال می‌توانید بگویید در دستگاه‌هایی که عرض بیشتری از ۶۵۰ پیکسل دارند، تصویر مورد نظر نمایش داده شود.

ویژگی srcset در تگ Source

در این ویژگی آدرس تصویر مورد نظری که قرار است در شرط خاصی نمایش داده شود را درج می‌کنیم.

تگ Picture در HTML

تگ Picture برای طراحی واکنشگرا استفاده می‌شود که میتوانید در آن مشخص کنید چه تصویری در چه سایز صفحه‌ای نمایش داده شود. تگ Picture دارای حداقل یک تگ source است. تگ Picture حتما دارای یک تگ img نیز هست. مروگر به شرط نوشته شده در media تگ source توجه می‌کند و تصویر مورد نظر را برای کاربران نمایش می‌دهد.

به مثال زیر توجه بفرمایید:

<picture>
    <source media="(min-width:650px)" srcset="img_pink_flowers.jpg" />
    <source media="(min-width:465px)" srcset="img_white_flower.jpg" />
    <img src="img_orange_flowers.jpg" alt="Flowers">
</picture>

در این مثال به مرورگر دستور داده شده است که در مانیتورهایی که عرض آن‌ها بیشتر از ۶۵۰ پیکسل است تصویر با اسم img_pink_flowers.jpg نمایش داده شود. در مرورگرهایی که عرض آن بیشتر از ۴۶۵ پیکسل و کمتر از ۶۵۰ پیکسل است تصویر با نام img_white_flower.jpg نمایش داده شود. همچنین اگر کمتر از ۴۶۵ پیکسل بود تصویر با نام img_orange_flowers.jpg نمایش داده شود.

نکته: توجه داشته باشید نوشتن alt ضروری است حتی در تگ picture.

دستوری که داخل ویژگی media و داخل پرانتز نوشته شده است، دستور نحوی CSS است.  شما می‌توانید از دستور max-width به  معنی حداکثر عرض صفحه استفاده نمایید.

پشتیبانی مرورگرها از تگ Picture چگونه است؟

توجه داشته باشد که تگ picture در مرورگر edge از نسخه ۱۳ به بعد و در مرورگر chrome از نسخه ۳۸ به بعد و در مرورگر فایرفاکس از نسخه ۳۸ به بعد پشتیبانی می‌شود. همچنین مروگر Internet Expelorer از این تگ پشتیبانی نمی‌کند. برای مرورگر هایی که از تگ picture پشتیبانی نمی‌کنند شما می‌بایست از تگ img داخل تگ picture استفاده نمایید.