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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

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

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

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

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

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

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

تصویر Tim Square : دارای 8 Image Breakpointtimes-square

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

شماره Breakpoint Width Height File Size
1 320 213 25K
2 453 302 44K
3 579 386 65K
4 687 458 85K
5 786 524 104K
6 885 590 124K
7 975 650 142K
8 990 660 151K

تصویر Morning in Kettering : دارای 3 Image Breakpointkettering-sky

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

تعداد Breakpoint Width Height File Size
1 320 213 9.0K
2 731 487 29K
3 990 660 40K

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

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

تعداد Breakpoint Width Height File Size
1 990 660 13K

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

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

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

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

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram