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

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



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

واکنشگرا کردن تصاویر (جلسه 5) : Srcset با width

0 329 ۹ فروردین ۹۵

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

در جلسه گذشته ما بر روی موضوع چگالی صفحه بحث کردیم و نتیجه گرفتیم که اون روش برای تصاویر با عرض یا width ثابت بسیار مناسب هست ولی برای تصاویر انعطاف پذیر و flexible خیلی مناسب نیست و دردسر داره.

روشی که برای تصاویر flexible باید بکار برد، روش srcset با width هست.

توصیف گر width

syntax مورد استفاده برای توصیف گر width مشابه syntax مورد استفاده برای توصیف گر display density هست. مقداری که برای ویژگی srcset قرار میگیره یک لیست هست که آیتمهای اون با استفاده از کاما از هم جدا شده اند و در هر قسمت یک آدرس تصویر و توصیف گر width قرار میگیره.srcset-width-descriptors

تفاوتی که با جلسه قبل داره اینه که بجای 1x و 2x و ... که بیانگر چگالی صفحه بودند از 160W یا 320w که بیانگر عرض یا width هستند استفاده شده است.

عرض یا width که در کنار هر آدرس تصویر قرار داده شده ممکنه کمی شما رو گیج کرده باشه. این عددی که قرار داده شده در واقع عرض اون تصویر مورد نظر رو مشخص میکنه و کاری به عرض مرورگر نداره.

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

آیا مرورگر بهترین عکس و منبع رو انتخاب میکنه؟

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

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

Browser pre-loader and speculative asset downloading

اگر شما به timeline مرورگر خودتون نگاه کنید و ببینید که مرورگر چطور صفحات وب رو رندر میکنه با نکات قابل توجهی مواجه میشید.aneventapart-timeline-full

همونطور که در بالا میبینید بطور خلاصه میشه گفت که بعد از اونکه مرورگر کدهای html رو دانلود کرد، برای دریافت فایلهای css و js درخواست میفرسته. اما قبل از اینکه فایلهای css و js لود بشن، مرورگر شروع به دانلود کردن تصاویر میکنه.

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

تنها چیزی که مرورگر میدونه سایز viewport هست. اگه به جلسه قبل برگردیم در display density همه چیز به سایز viewport بستگی داشت.

سایز viewport میتونه جانشین ضعیفی برای سایز اصلی و واقعی تصویر باشه. از یک سایت در سایز کوچک یک تصویر میگیریم:delivery-walmart-small-800

وقتی که viewport باریکه و عرضش کمه، سایز تصاویر با سایز viewport تقریبا برابر هستند. اگر عرض مرورگر رو کمی بیشتر کنیم و دوباره یک تصویر از اون بگیریم بصورت زیر خواهد بود:delivery-walmart-widescreen-800

در مثال دوم اندازه viewport برابر با 1540 پیکسل هست، اما تصاویر 254 پیکسل عرض دارند. اینکه مرورگر اندازه viewport رو بدونه برای اینکه تصویر درستی رو انتخاب بکنه اطلاعات کافی به حساب نمیاد.

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

برای اینکار باید از ویژگی sizes که در جلسه بعد خدمتتون میگم استفاده کنید.

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

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

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram