ریسپانسیو در css برای تصاویر در طراحی وب همیشه مسئله چالش بر انگیزی بوده پس همراه من باشید تا در این مقاله به شما آموزش ریسپانسیو کردن را آموزش دهم . میدونید که تصاویر همیشه یکی از بحثهای چالش برانگیز در طراحی سایتهای ریسپانسیو هستند پس در این مطلب میخوایم تگ <picture> که یه راه حل برای حل این مشکل تصاویر ریسپانسیو هست رو بررسی کنیم.
معمولا هر سایت ریسپانسیوی رو که باز کنید، داخل کدهای css اون سایت، چنین چیزی رو میبینید:
img { max-width: 100%; height: auto; }
این کد از max-width: 100% استفاده میکنه تا نذاره اندازه عرض تصویر بیشتر از عرض والدش بشه. اگر عرض والد کمتر از عرض تصویر بشه، عرض تصویر هم به همون نسبت کم میشه. height: auto هم باعث میشه تا متناسب با کم شدن اندازه عرض تصویر، ارتفاع تصویر هم کم بشه.
این راه حل، مشکل رو فقط از یک جنبه حل میکنه و اجازه میده تا تحت شرایط متفاوت، یک تصویر رو نمایش بدیم. ولی اگر بخوایم تحت شرایط متفاوت، تصاویر متفاوتی رو نشون بدیم چی؟
<picture> یکی از عناصر جدید html5 هست که به شما این امکان رو میده چند تگ source (که هر کدوم از این تگها شامل محل تصویر و شرطی که تحت اون شرط باید تصاویر بارگذاری بشه) رو برای picture قرار بدید.
با این روش میتونید یک تصویر کاملا متفاوت رو با توجه به دو حالت زیر بارگذاری کنید:
نتایج مدیاکوئری مثلا ارتفاع، عرض یا orientation دستگاه
تراکم پیکسلی
یعنی شما میتونید:
مراحل اساسی کار با <picture> :
این مثال یه مثال ساده هست که اگر سایز صفحه نمایش کمتر از 768px بود، تصویر کوچکتر رو بارگذاری میکنه:
<picture> <source srcset="smaller.jpg" media="(max-width: 768px)"> <source srcset="default.jpg"> <img srcset="default.jpg" alt="My default image"> </picture>
دقت کنید که سینتکس استفاده شده در صفت media دقیقا شبیه همون چیزی هست که ممکنه تاحالا در cssهاتون برای ساخت مدیاکوئری استفاده کرده باشید. میتونید دقیقا همون کوئریها رو هم اینجا استفاده کنید، یعنی میتونید از max-width، min-width، max-height، min-height، orientation و … استفاده کنید.
میتونید کوئری ای بنویسید که مثلا یه تصویر رو با توجه به عمودی یا افقی بودن دستگاه، بارگذاری کنید. خوبیش اینه که میتونید چند کوئری رو همزمان بنویسید. به مثال زیر توجه کنید:
<picture> <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)"> <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)"> <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)"> <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)"> <img srcset="default_landscape.jpg" alt="My default image"> </picture>
کد بالا برای دستگاه هایی با سایز صفحه نمایش کمتر از 40em و در حالت افقی، تصویر smaller_landscape.jpg رو بارگذاری میکنه و برای دستگاه هایی با سایز بیشتر از 40em و در حالت افقی، تصویر default_landscape.jpg رو بارگذاری میکنه. همینطور برای سایزهای کمتر از 40em و در حالت عمودی تصویر smaller_portrait.jpg و برای سایزهای بیشتر از 40em و در حالت عمودی تصویر default_portrait.jpg رو بارگذاری میکنه.
اگر میخواید تصویری با یه رزولوشن دیگه رو برای صفحه نمایش هایی با تراکم پیکسلی بالا قرار بدید، میتونید این کار رو با اضافه کردن اسم تصویر دیگه به صفت srcset انجام بدید. مثلا کد زیر رو ببینید:
<picture> <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)"> <source srcset="default.jpg, default_retina.jpg 2x"> <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image"> </picture>
مدیا کوئری قبل از هر چیزی بررسی میشه پس میتونید تصویری که قراره برای سایزهای مختلف صفحه نمایش بارگذاری بشه رو کنترل کنید. بعد نوبت تصویری هست که باید نشون داده بشه. در این کد، علاوه بر تصویر smaller.jpg، یه تصویر دیگه که سایزش دو برابر همین تصویر smaller.jpg هست یعنی smaller_retina.jpg رو برای صفحه نمایشهای رتینا اضافه کردیم. بنابراین اگر صفحه نمایش از نوع رتینا باشه تصویر smaller_retina.jpg برای کاربر نشون داده میشه.
در حال حاضر <picture> در مرورگرهای کروم، فایرفاکس و اپرا پشتیبانی میشه. احتمالش هست در آینده، بقیه مرورگرها هم از <picture> پشتیبانی کنند، ولی این دلیل نمیشه که منتظر پشتیبانی کامل باشید. میتونید از Picturefill 2.0 استفاده کنید.
بعد از دانلود picturefill.js میتونید خیلی راحت با استفاده از کد زیر، به پروژتون اضافش کنید:
<script src="picturefill.js"></script>
البته یه روش دیگه برای بارگذاری این اسکرپت هست که بازدهی بیشتری هم داره؛ درموردش داخل مستندات خود picturefill توضیح داده شده میتونید خودتون بخونید.
با استفاده از این اسکریپت، <picture> همونطور که توضیح داده شد کار میکنه البته با کمی محدودیت که راجع بهش توضیح میدیم:
Picturefill با بیشتر ورژنهای اینترنت اکسپلورر سازگاره (حتی اون قدیمیاش) ولی با IE9 مشکل داره 🙂 در واقع عنصرهای source که داخل تگ picture هستند رو نمیشناسه. برای حل این مشکل باید عناصر source رو داخل تگ video قرار بدید تا IE9 بتونه نشونشون بده. مثلا:
<picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="smaller.jpg" media="(max-width: 768px)"> <source srcset="default.jpg"> <!--[if IE 9]></video><![endif]--> <img srcset="default.jpg" alt="My default image"> </picture>
اندروید 2.3 هم مثل اینترنت اکسپلورر 9 عنصرهای source داخل picture رو نمیشناسه. ولی صفت srcset رو وقتی برای تگ img استفاده میشه میشناسه. به همین خاطر توصیه میشه همیشه عنصر img رو همراه با صفت srcset استفاده کنید. ممکنه بعضی از مرورگرهای دیگه هم چنین مشکلی رو داشته باشند که با این روش حل بشه.
هنگام استفاده از <picture> ، مرورگرهایی که از <picture> پشتیبانی نمیکنند و جاوااسکریپت در این مرورگرها غیرفعال هست، کاربران فقط متن alt رو میبینن. در واقع Picturefill 2.0 برای این نوع مرورگها که از <picture> پشتیبانی نمیکنند و جاوااسکریپتشون هم غیرفعاله، راه حلی ارائه نکرده چون اگر این کار رو میکرد، در مرورگرهایی که از <picture> پشتیبانی میکنند چندین تصویر نشون داده میشد. اگر هم میخواهید تصاویر زمانی که جاوااسکریپت غیرفعاله نشون داده بشه Picturefill 1.2 گزینه خوبیه.
عنصر <picture> با مرورگرهایی که از مدیاکوئری css3 پشتیبانی میکنه به خوبی کار میکنه. خیلی از مرورگرهای جدید هم از مدیا کوئریها پشتیبانی میکنن. مرورگرهاییم که پشتیبانی نمیکنن مهم نیس 🙂 انقدر درصد کاربرانشون کمه که میشه نادیده گرفت.
در مرورگرهایی که از srcset پشتیبانی میکنن ولی هنوز از picture پشتیبانی نمیکنن، این احتمال هست قبل از تشخیص تصویر مناسب از عنصر source ، تصویری که برای عنصر img اختصاص داده شده بارگذاری بشه.
البته این فقط یه مشکل موقتی هست و وقتی picture پیاده سازی بشه این مشکل هم حل میشه.
موفق باشید
مثلا ابعاد نمایشی عکس در موبایل 160*160 هستش ولی وقتی دانلودش میکنم با ابعاد 1200*1200 که ابعاد عکس اصلی هست دانلود میشه (فقط روی موبایل). در ادامه کدش رو هم قرار دادم.
این مسئله که تصاویر برای موبایل بهینه شده اند یا نه، بسته به نوع قالب متفاوت است. بعضی از قالبها به طور خاص برای موبایل هم بهینه میشوند و در توضیحات هر قالبی معمولا این موارد مشخص میشه.
بخاطر مسائل امنیتی کدتون برای ما حذف میشه و من نمیتونم ببینم، اما شما باید کد رو برای اندازه های مختلف نمایشگر با @media بازنویسی کنید تا روی همه دستگاه ها اعمال بشه.