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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

یا علی