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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 181 ۲۸ اردیبهشت ۹۵

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

به چه دلیل سایز دقیق تصویر رو محیا نمیکنیم؟

در این لحظه شاید به نظرتون برسه و با خودتون بگید که چرا از همون سایزی که قرار هست در صفحه نمایش داده بشه استفاده نمیکنیم و خودمون رو راحت کنیم؟!

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

به همین دلیل بیشتر سایتها سایتهای بزرگ تصاویر خودشون رو بصورت Content Delivery Network یا CDN قرار میدن و اونا رو Cache میکنن. این کار میتونه در مقیاس خیلی بزرگ هزینه ی زیادی داشته باشه و برای هر کسی پیشنهاد نمیشه.

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

روشهای موجود برای انتخاب Breakpoint های تصاویر

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

 تطابق با breakpoint های قالب و صفحتون

یک نفر در تیمتون میگه: "شما فکر میکنید چه تعداد منبع تصویر برای این محصول و سایت مورد نیاز هست؟"

شما لحظه ای فکر میکنید و جواب میدید: "سه عدد چطوره؟ کوچک، متوسط و بزرگ.

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

شاید سازمان شما هنوز هم در مورد موبایل و تبلت و Desktop فکر میکنه و نظر داره که برای اونا تصاویر Small و medium و Large رو لود کنه و قرار بده. این راه خوبی هست و میتونه شما رو از اینکه بخاید برای بیشتر سایزهای معروف viewport یک تصویر جداگونه قرار بدین، خلاص کنه.

اما باید علاوه بر این فکرها، اصولی هم پشت قضیه و کارمون باشه.

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

ما میتونیم کل سایت و استایلهای تصاویر اون رو مطالعه کنیم و اطلاعات اون رو در بیاریم و بفهمیم که چه Breakpoint هایی نیاز هست. سخت ترین کار اینه که همون نماینده و نمونه رو از سایت پیدا کنید و با توجه به اون تصمیم گیری کنید. اگر سایت مورد نظر استایلهای متفاوتی برای هر تصویر مجزا در نظر نگرفته باشه و همه اونا به یک شکل باشن، میشه بصورت ساده نمونه گیری کرد و برای اون Breakpont مشخص کرد. اما اگر استایلهای متفاوتی وجود داشته باشه در بعضی از مواقع فرآیند نمونه گیری غیر ممکن خواهد بود.

استفاده Memory بر توزیع Breakpoint ها تاثیر دارد

چندی پیش Tim Kadlec فرآیند نمایش تصاویر در موبایلها رو مورد بررسی قرار داد و یک Presentation ارائه کرد. در بررسی که منتشر کرد او استفاده از Memory تصاویر انعطاف پذیر در طراحی واکنشگرا رو مورد آزمایش قرار داد.

چیزی که این شخص به اون پی برد این بود که هر چه تصویر بزرگتر میشه، مقداری که باید کاهش داده بشه بیشتر و بزرگتر هست.memory-usage

در مثال بالا، کاهش دادن سایز تصویر 600*600 پیکسل در هر دو جهت افقی و عمودی به اندازه 50 پیکسل باعث بوجود اومدن 230 هزار بایت حجم اضافی میشه و الکی اونا رو دانلود کردیم. اگر همین کار رو برای تصویر 200*200 پیکسل در نظر بگیریم و اون هم در هر جهت 50 پیکسل کاهش داده بشه، 70 هزار بایت فضای باطل و بیهوده رو لود میکنه.

دانستن این موضوع به ما بهتر میفهمونه که Breakpoint هامون رو چطوری انتخاب کنیم. ما باید هر چه تصویر بزرگتر میشه Breakpoint های بیشتری رو قرار بدیم تا بایتهای بیهوده دانلود نشن.more-breakpoints-at-large-sizes1

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

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

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

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram