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

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



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

واکنشگرا کردن تصاویر (جلسه 1) : تعاریف - قسمت اول

3 472 ۳ فروردین ۹۵

در این سری آموزشی میخام نحوه و اصول واکنشگرا کردن تصاویر رو بهتون آموزش بدم و با مطالعه این مطالب میتونین دید بهتری از این مبحث مهم داشته باشید.Responsive-Designهم اکنون اکثر سایتا واکنشگرا هستن و خیلی از قواعد مربوط به اون رو انجام میدن. من در این سری آموزشی سعی میکنم شما رو با پایه و اساس واکنشگرا کردن تصاویر آشنا کنم.

تصاویر واکنشگرا چی هستن؟

فرض کنید که یک تصویر بزرگ دارید و نمیخاید اونو واکنشگرا کنید. مثلا تصویر زیر رو در نظر بگیرید:

hero_ygold_edition_800

نسخه بزرگ این تصویر برای مانیتورهای بزرگ و با کیفیت iMac تهیه شده هست و ابعاد اون 5144*1698 پیکسل هست. حجم این تصویر بزرگ 398 کیلو بایت هست.

حالا فرض کنید یه موبایل مثل Blackberry Curve 9310 بخواد این تصویرو درون خودش نمایش بده. ابعاد این موبایل 320*240 پیکسل هست. این تصویر بزرگ آنقدر کوچک میشه که درون گوشی جا بشه. یعنی باید بیشتر از 10 برابر طولشو کمتر کنیم تا بتونه در این موبایل بدرستی نمایش داده شود!! پس باید بفکر یه راه حل باشیم و کاری کنیم که برای این دستگاه تصویری متناسب با خودش لود و نمایش داده بشه.

بنابراین هرگاه که ما در مورد تصاویر واکنشگرا صحبت میکنیم، منظورمون چی هست:

یادآوری : روشی هست که که چند آدرس و source تصویر رو در اختیار مرورگر قرار میده و مرورگر با توجه به چگالی صفحه، تعداد پیکسل و دیگر فاکتورهای مورد نظر، تصویر مورد نظر رو انتخاب میکنه و نمایش میده.

در بیشتر مواقع، زمانی که افراد در مورد تصاویر واکنشگرا صحبت میکنن، اونا دنبال راه حلی برای تگ img میگردن و فکر میکنن که این تنها راه حله. تگ img ساده زیر رو در نظر بگیرید:

بزرگترین مشکل کد بالا اینه که فقط یک آدرس تصویر رو در اختیار مرورگر قرار میده و باید راه حلی برای این قضیه پیدا کرد. مبحث تصاویر واکنشگرا فقط به کدهای HTML محدود نمیشه و با استفاده از تکنیکهای CSS و JS هم میشه این قضیه رو انجام داد. در جلسات بعدی در مورد این تکنیکها بیشتر صحبت میکنیم.

فهمیدن موارد استفاده از تصاویر واکنشگرا

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

گروه مربوط به تصاویر واکنشگرا ((Responsive Images Community Group (RICG) چند تا از موارد استفاده رو برای شما قرار داده. پیشنهاد میشه که این لیست رو بطور کامل و با حوصله مطالعه کنید تا با اونا آشنا بشید. با توجه به هدف این سری آموزشی ما دو تا از این مواردی که گستردگی بیشتری دارن رو براتون توضیح میدیم. این موارد شامل:

  • Resolution Switching : تغییر دادن وضوح یا Resolution
  • Art direction

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

Source

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

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

  • ‏‏

    مطالب شما بسیار زیبا و کارا است . مثل همیشه عالی

    سپاسگزارم

  • ‏‏

    سلام
    واکنشگرا کردن تصاویر با استفاده از کلاس بوت استرپی img-responsive کافی نیست؟
    ممنون

    • ‏‏
      محمد اسفندیاری(۲۳ اردیبهشت ۱۳۹۵)

      اون روشی که Bootstrap استفاده کرده یکی از روشهای واکنشگرا کردن تصاویر هست و مربوط به CSS میشه ولی روشهای دیگه ای هم برای اینکار وجود دارن که هر کدوم معایب و مزایایی رو داره

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram