ریسپانسیو در css برای تصاویر در طراحی وب همیشه مسئله چالش بر انگیزی بوده پس همراه من باشید تا در این مقاله به شما آموزش ریسپانسیو کردن را آموزش دهم . میدونید که تصاویر همیشه یکی از بحث‌های چالش برانگیز در طراحی سایت‌های ریسپانسیو هستند پس در این مطلب میخوایم تگ <picture> که یه راه حل برای حل این مشکل تصاویر ریسپانسیو هست رو بررسی کنیم.

رایج‌ترین راه حل

معمولا هر سایت ریسپانسیوی رو که باز کنید، داخل کدهای css اون سایت، چنین چیزی رو میبینید:

img {
    max-width: 100%;
    height: auto;
}

این کد از max-width: 100% استفاده میکنه تا نذاره اندازه عرض تصویر بیشتر از عرض والدش بشه. اگر عرض والد کمتر از عرض تصویر بشه، عرض تصویر هم به همون نسبت کم میشه. height: auto هم باعث میشه تا متناسب با کم شدن اندازه عرض تصویر، ارتفاع تصویر هم کم بشه.

این راه حل، مشکل رو فقط از یک جنبه حل میکنه و اجازه میده تا تحت شرایط متفاوت، یک تصویر رو نمایش بدیم. ولی اگر بخوایم تحت شرایط متفاوت، تصاویر متفاوتی رو نشون بدیم چی؟

آموزش ریسپانسیو در css

<picture> یکی از عناصر جدید html5 هست که به شما این امکان رو میده چند تگ source (که هر کدوم از این تگ‌ها شامل محل تصویر و شرطی که تحت اون شرط باید تصاویر بارگذاری بشه) رو برای picture قرار بدید.

با این روش میتونید یک تصویر کاملا متفاوت رو با توجه به دو حالت زیر بارگذاری کنید:

• نتایج مدیاکوئری مثلا ارتفاع، عرض یا orientation دستگاه

• تراکم پیکسلی

یعنی شما میتونید:

• تصاویر با سایز مناسب، که باعث استفاده بهتر از پهنای باند میشه رو بارگذاری کنید
• تصاویر مختلف بریده شده با ابعاد مختلف رو با توجه به تغییرات layout در عرض‌های مختلف بارگذاری کنید
• تصاویر با رزولوشن بالاتر رو برای صفحه نمایش هایی با تراکم پیکسلی بالاتر بارگذاری کنید

<picture> چگونه کار میکند؟

مراحل اساسی کار با <picture> :

1. تگهای باز و بسته ی <picture></picture> رو بسازید.
2. داخل این تگها، یه تگ <source> به ازای هر کوئری که میخواید اجرا بشه بسازید.
3. صفت media که حاوی کوئریتون برای چیزهایی مثل ارتفاع، عرض یا orientation دستگاه هست رو به همین تگ source که ساختید اضافه کنید.
4. صفت srcset حاوی نام تصویر مربوطه برای بارگذاری رو به همین تگ source اضافه کنید.
5. اگر میخواید تصاویری رو برای صفحه نمایش هایی با تراکم پیکسلی متفاوت قرار بدید کافیه نام تصاویر دیگه رو هم به صفت srcset اضافه کنید. مثلا برای صفحه نمایش‌های رتینا
6. مجددا تگ <img> رو هم اضافه کنید.

این مثال یه مثال ساده هست که اگر سایز صفحه نمایش کمتر از 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> در مرورگرهای کروم، فایرفاکس و اپرا پشتیبانی میشه. احتمالش هست در آینده، بقیه مرورگرها هم از <picture> پشتیبانی کنند، ولی این دلیل نمیشه که منتظر پشتیبانی کامل باشید. میتونید از Picturefill 2.0 استفاده کنید.

بعد از دانلود picturefill.js میتونید خیلی راحت با استفاده از کد زیر، به پروژتون اضافش کنید:

<script src="picturefill.js"></script>

البته یه روش دیگه برای بارگذاری این اسکرپت هست که بازدهی بیشتری هم داره؛ درموردش داخل مستندات خود picturefill توضیح داده شده میتونید خودتون بخونید.

با استفاده از این اسکریپت، <picture> همونطور که توضیح داده شد کار میکنه البته با کمی محدودیت که راجع بهش توضیح میدیم:

IE9

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>

Android 2.3

اندروید 2.3 هم مثل اینترنت اکسپلورر 9 عنصرهای source داخل picture رو نمیشناسه. ولی صفت srcset رو وقتی برای تگ img استفاده میشه میشناسه. به همین خاطر توصیه میشه همیشه عنصر img رو همراه با صفت srcset استفاده کنید. ممکنه بعضی از مرورگرهای دیگه هم چنین مشکلی رو داشته باشند که با این روش حل بشه.

نیاز به جاوااسکریپت

هنگام استفاده از <picture> ، مرورگرهایی که از <picture> پشتیبانی نمیکنند و جاوااسکریپت در این مرورگرها غیرفعال هست، کاربران فقط متن alt رو میبینن. در واقع Picturefill 2.0 برای این نوع مرورگها که از <picture> پشتیبانی نمیکنند و جاوااسکریپتشون هم غیرفعاله، راه حلی ارائه نکرده چون اگر این کار رو میکرد، در مرورگرهایی که از <picture> پشتیبانی میکنند چندین تصویر نشون داده میشد. اگر هم میخواهید تصاویر زمانی که جاوااسکریپت غیرفعاله نشون داده بشه Picturefill 1.2 گزینه خوبیه.

پشتیبانی از media query

عنصر <picture> با مرورگرهایی که از مدیاکوئری css3 پشتیبانی میکنه به خوبی کار میکنه. خیلی از مرورگر‌های جدید هم از مدیا کوئری‌ها پشتیبانی میکنن. مرورگرهاییم که پشتیبانی نمیکنن مهم نیس :) انقدر درصد کاربرانشون کمه که میشه نادیده گرفت.

درخواست‌های http اضافه

در مرورگرهایی که از srcset پشتیبانی میکنن ولی هنوز از picture پشتیبانی نمیکنن، این احتمال هست قبل از تشخیص تصویر مناسب از عنصر source ، تصویری که برای عنصر img اختصاص داده شده بارگذاری بشه.

البته این فقط یه مشکل موقتی هست و وقتی picture پیاده سازی بشه این مشکل هم حل میشه.

• برای اطلاعات بیشتر راجع به picturefill 2.0 میتونید اینجا رو بخونید.
• برای اطلاعات کامل راجع به تگ <picture> هم میتونید به سایت responsiveimages.org سر بزنید.