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

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

انتخاب Breakpoint بر اساس بودجه Performance و کارایی

چی میشه اگه ما ایده بودجه Performance رو در واکنشگرا کردن تصاویر مورد استفاده قرار بدیم؟ چطوری میشه اون رو تفسیر کرد؟

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

زمانی که ما اینکار رو انجام دادیم، ما تعداد تغییرات Image Breakpoint ها رو بر پایه تنوع و گوناگونی نمایشی پیدا میکنیم. بیاید تعدادی مثال رو با هم بررسی کنیم.

تصویر Tim Square : دارای 8 Image Breakpoint

این تصویر پیچیده هست و تنوع نمایشی زیادی داره. این تنوع و گوناگونی رنگها و الگوها به ما میفهمونه که فشرده کردن این تصویر JPEG باعث افت کیفیت تصویر میشه و به زیبایی اون صدمه میزنه. به این دلیل از 8 Image Breakpoint برای این تصویر استفاده میکنیم که دامنه تغییر حجم اونا تقریبا 20 کیلوبایت هست. جدولی از سایز و حجم اونا رو در زیر ببینید:

تصویر Moing in Kettering : دارای 3 Image Breakpoint

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

تصویر لوگوی Microsoft : دارای 1 Image Breakpoint

این تصویر یک تصویر PNG ساده هست. در سایز بزرگ یا 660*990، این تصویر فقط 13 کیلوبایت حجم داره بهمین دلیل که برای بودجمون هم صدق میکنه، نیازی به Breakpoint های بیشتری نیس و یکی کفایت میکنه.

میتونین برای دیدن مثالهای بیشتر به اینجا برید. با دیدن این تصاویر بیشتر با این موضوع و عنوان آشنا میشید.

باید اینو بگیم که پیشنهاد نمیشه که برای تک تک تصاویری که وجود داره این کار رو بصورت دستی انجام بدین. شاید در آینده راهی به وجود بیاد که با وارد کردن بودجه در سرور، خود سرور بیاد و متناسب با تصویر تعداد Image Breakpoint ها رو مشخص کنه و اونا رو تهیه کنه و برای مرورگر بفرسته. در این لینک میتونین بیشتر در مورد بودجه کارایی بخونید.

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

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

یا علی