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

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

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

Resolution Switching با Srcset

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

یا علی

Source

سون لرن • آموزش...