• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

استفاده از تگ picture برای ریسپانسیو کردن تصاویر

8 8475 ۲ تیر ۹۳

سلام به سون لرنی های عزیز

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

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

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

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

rwd-image-1

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

راه حل جدید

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

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

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

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

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

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

rwd-image-2

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

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

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

این مثال یه مثال ساده هست که اگر سایز صفحه نمایش کمتر از 768px بود، تصویر کوچک تر رو بارگذاری میکنه:

دقت کنید که سینتکس استفاده شده در صفت media دقیقا شبیه همون چیزی هست که ممکنه تاحالا در cssهاتون برای ساخت مدیاکوئری استفاده کرده باشید. میتونید دقیقا همون کوئری ها رو هم اینجا استفاده کنید، یعنی میتونید از max-width، min-width، max-height، min-height، orientation و ... استفاده کنید.

میتونید کوئری ای بنویسید که مثلا یه تصویر رو با توجه به عمودی یا افقی بودن دستگاه، بارگذاری کنید. خوبیش اینه که میتونید چند کوئری رو همزمان بنویسید. به مثال زیر توجه کنید:

کد بالا برای دستگاه هایی با سایز صفحه نمایش کمتر از 40em و در حالت افقی، تصویر smaller_landscape.jpg رو بارگذاری میکنه و برای دستگاه هایی با سایز بیشتر از 40em و در حالت افقی، تصویر default_landscape.jpg رو بارگذاری میکنه. همینطور برای سایز های کمتر از 40em و در حالت عمودی تصویر smaller_portrait.jpg و برای سایز های بیشتر از 40em و در حالت عمودی تصویر default_portrait.jpg رو بارگذاری میکنه.

اگر میخواید تصویری با یه رزولوشن دیگه رو برای صفحه نمایش هایی با تراکم پیکسلی بالا قرار بدید، میتونید این کار رو با اضافه کردن اسم تصویر دیگه به صفت srcset انجام بدید. مثلا کد زیر رو ببینید:

مدیا کوئری قبل از هر چیزی بررسی میشه پس میتونید تصویری که قراره برای سایز های مختلف صفحه نمایش بارگذاری بشه رو کنترل کنید. بعد نوبت تصویری هست که باید نشون داده بشه. در این کد، علاوه بر تصویر smaller.jpg، یه تصویر دیگه که سایزش دو برابر همین تصویر smaller.jpg هست یعنی smaller_retina.jpg رو برای صفحه نمایش های رتینا اضافه کردیم. بنابراین اگر صفحه نمایش از نوع رتینا باشه تصویر smaller_retina.jpg برای کاربر نشون داده میشه.

همین حالا از <picture> استفاده کنید

در حال حاضر <picture> در مرورگرهای کروم، فایرفاکس و اپرا پشتیبانی میشه. احتمالش هست در آینده، بقیه مرورگرها هم از <picture> پشتیبانی کنند، ولی این دلیل نمیشه که منتظر پشتیبانی کامل باشید. میتونید از Picturefill 2.0 استفاده کنید.

rwd-image-3

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

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

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

IE9

Picturefill با بیشتر ورژن های اینترنت اکسپلورر سازگاره (حتی اون قدیمیاش) ولی با IE9 مشکل داره :) در واقع عنصرهای source که داخل تگ picture هستند رو نمیشناسه. برای حل این مشکل باید عناصر source رو داخل تگ video قرار بدید تا IE9 بتونه نشونشون بده. مثلا:

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

موفق باشید

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    مهدی اکرمی(۲ تیر ۱۳۹۳)

    مطلب بسیار مفیدی بود .
    خیلی ممنون از آموزش هاتون 😀

  • ‏‏

    مرسی ♥ ♥ ♥ ♥ عالی بود ♥♥♥

  • ‏‏
    m.yousefikia(۳ تیر ۱۳۹۳)

    ممنون. مثل همیشه عالی و مفید

  • ‏‏
    سجاد دریس(۳ تیر ۱۳۹۳)

    خیلی عالی بود.

  • ‏‏
    Irandroid gigfa com(۳ تیر ۱۳۹۳)

    خیلی خوب بود ممنون از آموزشهاتون

  • ‏‏
    محمد بابازاده(۸ تیر ۱۳۹۳)

    ممنونم

  • ‏‏

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

  • ‏‏

    ممنونم
    کاش یکم مبتدی تر توضیح میدادید تا کاملا مطلب رومتوجه بشیم با این حال 70 % قابل فهم بود
    خیلی متشکر :smile:

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram