رفع مشکل اندازه سایز تصاویر در طراحی ریسپانسیو

یکی از اساسی ترین مشکل طراحان وب سایت برای ایجاد یک قالب واکنش گرا Responsive ، اندازه و سایز تصاویر استفاده شده در صفحات وب سایت می باشد.اگر طراحی به صورت اختصاصی باشد خوده طراح با توجه به تناسبی که از سایز صفحه نمایش می گیرد می تواند بهترین خروجی را در بیاورد اما اگر قرار باشد یک سایت داینامیک را داشته باشیم و مثلا طراحی قالب وردپرس باشد مشکل اینجاست که عکس هایی که در محتوای هر پست قرار می گیرد آن ویژگی را دارا نمی تواند باشد چون اپراتور ها و وبمستر هایی که روزانه مطالبی در سایت ایجاد می کنند دانش کافی در مورد مباحث طراحی ریسپانسیو سایت ندارند.
در حال حاضر بسیاری از طراحان وب برای حل این مشکل از ترفند Css3 استفاده می کنند بدین شکل که میزان ارتفاع تصاویر را به صورت auto در میاورند و برای مقدار طول یا همان width تصاویر نیز بصورت درصد در می آورند یعنی :

 توسط دستور بالا ما توانسته ایم تمامی تصاویر در داخل صفحات سایت که با تگ img در زبان html تعریف می شوند را با تغییر عرض صفحه به شکل واکنش گرا در بیاوریم البته این راه حل زیاد جالب نیست چون با کم کردن طول صفحه از Quality و کیفیت تصاویر کم شده و تصاویر دیگر شفافیت و قابل رویت ۱۰۰% را ندارند.

در زبان Html5 دو راه حل زیبا برای این امر معرفی شده است که قصد داریم در ادامه به آن بپردازیم بدین شکل که ما می توانیم به مرورگر دستور بدهیم که با توجه به اندازه ی سایز صفحه نمایش عکس مورد نظر ما را به نمایش در بیاورید یه جورایی حالت شرطی IF ایجاد کردیم پس با ما همراه باشید.

تگ <picture> برای تصاویر ریسپانسیو

توسط تگ Picture که در زبان Html5 وجود دارد ما قادر خواهیم بود برای یک عکس ابتدا سایز های مختلف را در هاست خود داشته باشیم سپس با توجه به اندازه سایز صفحه نمایش مرورگر به مرورگر دستور دهیم که عکس را مرتبط با سایز صفحه نمایش کاربر نشان دهد به مثال زیر توجه کنید تا فرم کلی تگ Picture را درک کنید :

 در قسمتی از سایت می خواهیم عکسی را قرار دهیم ابتدا آن را در ۳ سایز مختلف در هاست خود آپلود کرده ایم سپس با توجه به عنصر source و دستور Media مشخص می کنیم که مثلا اگر صفحه نمایش کاربر از ۶۴em بیشتر نبود عکس high-res.jpg را لود کن و به همین ترتیب اولویت بندی می شود توجه داشته باشید که یک تگ img در فرم picture بالا وجود دارد که به معنای آن است که اگر مرورگر از تگ Picture ساپورت نکرد به صورت پیشفرض عکس fallback.jpg را به نمایش در بیاورد.

ویژگی Srcset برای تگ img

 استفاده از ویژگی Srcset یکی دیگر از ترفند های استفاده از تصاویر واکنش گرا در سایت هست که میتوانید استفاده کنید با این تفاوت که این ویژگی به نسبت به تگ Picture هنوز در خیلی از مرورگرها پشتیبانی نمی شود اما یادگیری آن خالی از لطف نیست همچنان که بسیار دستور Html آن خلاصه تر و گویا تر از از تگ Picture نیز می باشد مثال زیر را ببینید :

 ما ابتدا عکس اصلی خودمان را که بصورت پیشفرض است توسط تگ img در صفحه ایجاد می کنیم حال در درون ویژگی Srcset مشخص می کنیم که اگر مثلا سایز صفحه نمایش ۷۲۰w بود عکس pear-mobile.jpeg را لود کند و …. البته توجه کنید برای ساختار های مختلف ابتدا باید آنها را با یک کاما , جدا کنید.

تا زمانی که مرورگرها به یک استاندارد کلی برای تغییر سایز تصاویر نرسند و برای طراحی واکنش گرا سایز های استاندارد معرفی نشود که در درون تمامی تبلت ها و موبایل ها پاسخ گو باشد استفاده از کد ها و اسکریپ بالا جواب گوی هر سایتی می باشد.اگر چه هنوزم خیلی از مشتریان سایت ها هنوز با طراحی FLAT مشکل دارند چه برسد به ریسپانسیو و چه برسد به این غلط کاری ها…..

پایان