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

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



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

واکنشگرا کردن تصاویر (جلسه 4) : srcset با چگالی صفحه

0 343 ۸ فروردین ۹۵

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

از زمانی که Apple نمایشگرهای Retina برای iPhone 4  قرار داد، طراحان وب به دنبال راه حلی برای مدیریت نمایشگرهای با چگالی بالا سوق پیدا کردند. در این زمان بود که srcset و توضیح چگالی صفحه ارائه شدند.

Resolution Switching با Srcset

به عنوان یک یادآدوری چگالی صفحه مربوط به مورد Resolution Switching که در جلسه های قبل توضیح دادیم میشه. زمانی که شما میخاید یک مورد Resolution Switching رو حل کنید میتونید از srcset استفاده کنید.

ما به این دلیل از srcset استفاده میکنیم که به مرورگر قدرت انتخاب میده. زمانی که ما از ویژگی media در المنت picture استفاده میکردیم، قدرت انتخاب و تصمیم گیری رو از مرورگر میگرفتیم و اونو مجبور میکردیم که در یک سایز مشخص، تصویر مشخصی رو لود کنه و نمایش بده. این روش برای مورد Art Direction خوبه و میشه ازش استفاده کرد.

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

توضیحاتی در مورد چگالی صفحه

Syntax برای استفاده از srcset بصورت زیر هست:srcset-display-density2

خصوصیت srcset به المنت img اضافه میشه. مقدار یا value که برای این ویژگی قرار میگیره شامل لیستی هست که با کاما از هم جدا شده اند.

هر آیتم که در این لیست قرار میگیره شامل دو جزء هست. جزء اول مسیری هست که تصویر رو مشخص میکنه و جزء دوم هم چگالی تصویر موجود در این آیتم رو مشخص میکنه. برای مثال 1x و 2x و ...

اگر چگالی صفحه مشخص نشده باشه، بصورت پیش فرض 1x در نظر گرفته میشه.

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

همونطور که قبلا توضیح داده شد سایز این تصویر 5144×1698 پیکسل و حجم اون 398k هست. این تصویر برای 2x مورد استفاده قرار میگیره و همچنین یک نسخه 1x از اون وجود داره. حالا میخایم مقایسه ای بر روی سایز و ... تصاویر بر روی یک چگالی صفحه ثابت Blackberry Curve 9310 انجام بدیم.

 

Image Width Height File Size
2x large 5144 1698 398K
1x large 2572 849 256K
320px, Single Density 320 106 8K

اطلاعاتی که در ردیف آخر جدول قرار داده شده مربوط به اینه که خودمون عکس رو به سایز 320 تبدیل کردیم و اونو با فرمت jpeg ذخیره کردیم تا بدونیم که تقریبا سایزش بر روی این دستگاه چقدر میشه.

اونجور که بنظر میرسه داشتن 1x و 2x کافی بنظر نمیرسه. پس میتونیم سایز 320 رو برابر با 1x در نظر بگیریم و همینطور اونو زیاد کنیم تا بر روی همه بخوبی نمایش داده بشه. خروجی چیزی شبیه به زیر خواهد شد:

با استفاده از این کار از 320 تا 5144 رو پوشش دادیم ولی این کار از نظر من احمقانه بنظر میرسه.

این کد بالا نشون میده که این روش نسبت به روشهای دیگه کاربرد کمتری داره و نمیشه برای هر display density یک تصویر رو آماده کرد و اونو قرار داد.

این روش برای تصاویری که width اونا ثابت هست کاربرد داره و برای تصاویر flexible خیلی کاربرد نداره. بجای این روش میتونین از روش srcset width description که در جلسه بعد توضیح میدیم استفاده کنید.

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram