ریسپانسیو در css : آموزش ریسپانسیو کردن تصاویر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 استفاده کنید.

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

بعد از دانلود 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 سر بزنید.

موفق باشید

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۱۲ دیدگاه
لیلا ۱۳ آبان ۱۳۹۹، ۱۲:۰۰
چندتا سایت وردپرسی و ووکامرسی رو تست کردم، در همه ی موارد روی موبایل وقتی عکسی رو دانلود میکنم به جای اون ابعادی که تعریف شده، عکس رو در ابعاد اصلی که آپلود شده دانلود میکنه، میخوام بدونم که آیا موقع لود سایت برای بازدید کننده هم همون ابعاد اصلی آپلود میشه؟ و چرا عکس با ابعاد اصلیش دانلود میشه؟ روی دسک تاپ اما اینطور نیست و وقتی عکس رو دانلود کنی با همون ابعادی که تعریف کردیم و بهش دادیم دانلود میشه.
مثلا ابعاد نمایشی عکس در موبایل 160*160 هستش ولی وقتی دانلودش میکنم با ابعاد 1200*1200 که ابعاد عکس اصلی هست دانلود میشه (فقط روی موبایل). در ادامه کدش رو هم قرار دادم.
نازنین کریمی مقدم ۱۳ آبان ۱۳۹۹، ۱۷:۰۹
درود.
این مسئله که تصاویر برای موبایل بهینه شده اند یا نه، بسته به نوع قالب متفاوت است. بعضی از قالبها به طور خاص برای موبایل هم بهینه میشوند و در توضیحات هر قالبی معمولا این موارد مشخص میشه.
بخاطر مسائل امنیتی کدتون برای ما حذف میشه و من نمیتونم ببینم، اما شما باید کد رو برای اندازه های مختلف نمایشگر با @media بازنویسی کنید تا روی همه دستگاه ها اعمال بشه.
amin hazeghi ۱۵ آبان ۱۳۹۸، ۲۳:۰۸
من با asp ساتمو ساختم.ولی این تگ را اصلا نمی شناسه.فایل را دانلود کردم و طبق توضیحات فایل جاوا را با لینک به صفحه اضافه کردم.اما هر کار میکنم زیر تگ خط قرمز به معنی عدم شناخت تگ میکشه
لطفا راهنمایی کنید
omid hojaty ۱۰ بهمن ۱۳۹۷، ۲۰:۳۰
سلام ببخشید من یک اسلایدر دارم .من میخوام وقتی اندازه صفحه رو کوچک میکنم اسلایدرم هم کوچیک بشه ( رسپانسیو ) . میشه راهنمایی کنید .
sajjad ۲۹ مهر ۱۳۹۴، ۰۴:۲۲
ممنونم
کاش یکم مبتدی تر توضیح میدادید تا کاملا مطلب رومتوجه بشیم با این حال 70 % قابل فهم بود
خیلی متشکر :smile:
ساغر ۰۷ مرداد ۱۳۹۳، ۰۰:۰۲
من میخوام برای یک اسلاید شو ک تصاویر رو از داخل دیتابیس دریافت میکنه این خاصیت رو استفاده کنم ..همچنین ریسپانسیو را برای سه دستگاه تنظیم کرده ام...موبایل و تبلت و دستکتاپ
ممنون میشم راهنماییم کنید ک سایز تصاویر چطوری متناسب با کادر هر دستگاه تنظیم بشه
بابت مطالب مفیدتون هم کمال تشکر دارم
محمد بابازاده ۰۸ تیر ۱۳۹۳، ۰۱:۰۳
ممنونم
Irandroid gigfa com ۰۳ تیر ۱۳۹۳، ۱۲:۵۵
خیلی خوب بود ممنون از آموزشهاتون
سجاد دریس ۰۳ تیر ۱۳۹۳، ۰۳:۲۴
خیلی عالی بود.
m.yousefikia ۰۳ تیر ۱۳۹۳، ۰۰:۴۶
ممنون. مثل همیشه عالی و مفید
mm021 ۰۲ تیر ۱۳۹۳، ۲۳:۱۷
مرسی ♥ ♥ ♥ ♥ عالی بود ♥♥♥
مهدی اکرمی ۰۲ تیر ۱۳۹۳، ۲۲:۲۰
مطلب بسیار مفیدی بود .
خیلی ممنون از آموزش هاتون :grin: