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

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



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

واکنشگرا کردن تصاویر (جلسه 14) : Image Breakpoint - قسمت دوم

0 163 ۱۹ اردیبهشت ۹۵

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

Breakpoint ها در موارد Resolution Switching

اینجا جایی هست که باید از ترفندهای موجود استفاده کنیم. حداقل در موارد Art Direction بهمون کمک میکنه که بدونیم چه تعداد منبع تصویر نیاز داریم و باید از اونا استفاده کنیم.

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

بیاید با هم یک مثال از resolution switcching رو با هم بررسی کنیم:michelle-obama-800px-example

همونطور که در تصویر بالا میبینید چند سایز متفاوت وجود داره که سایز و حجم اونا رو قرار دادیم. اون تصویری که در سایز کنونی Viewport نمایش داده میشه، تصویر سمت چپی با سایز 602*400 هست. بزرگترین سایز تصویری که نمایش داده میشه 3010*2000 هست و حجم اون 250 کیلوبایت هست. ما میتونیم به سادگی تصویر با عرض 2000 رو قرار بدیم و با استفاده از CSS و ... سایز اون رو به 400 برسونیم، ولی حجم اضافی و بیهوده زیادی رو باید لود کنیم. اگر سایز کوچکتری رو محیا کنیم میتونه خیلی بهتر باشه. برای مثال میتونیم یک نسخه 1204*800 رو از اون بسازیم و تنها 73 کیلوبایت حجم داشته باشه.

همه ما موافقیم که زمانی که تصویری که قرار در صفحه نمایش داده بشه، سایزش 602*400 پیکسل هست، بهتر اینه که کاربران بجای دانلود تصویر با سایز بیهوده و بزرگتر، تصویری با سایز 1204*800 رو دانلود کنن و ببینن.

اما چرا ما روی سایز 1204*800 توقف کردیم؟michelle-obama-600px-example

اگر ما تصویر دیگری با سایز 903*600 تهیه میکردیم، حجم اون تنها 42 کیلوبایت هست و این یعنی 42 درصد کاهش حجم نسبت به تصویر با سایز 1204*800.

کاهش حجم به اندازه 42 درصد بسیار خوب و مطلوب است، میتونیم این کار رو ادامه بدیم و تصاویری با عرض کوچکتر تهیه کنیم. مثلا 500 یا 450 پیکسل و ...michelle-obama-450px-example

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

الان سوالی که ممکنه برای شما پیش اومده باشه و شما رو اذیت کنه، در مورد Breakpoint ها هست. چطور بدونیم که چه زمانی منبع تصویر مورد نظر برای نمایش در صفحه بسیار بزرگ هست؟

پاسخ به این سوال اینه که تا زمانی که تصویر مورد نظر ار سایز دقیقی که قراره در سایت نمایش داده بشه، بزرگتر باشه، اون منبع تصویر بسیار بزرگ هست و هنوز امکانش هست که اون رو کوچکتر و بهینه تر کرد.

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

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

یا علی

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram