از توصیفگرهای چگالی استفاده کنید

کیتی همپنیوس
Katie Hempenius
X

این نسخه ی نمایشی را کاوش کنید

  • برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  • صفحه را با استفاده از دستگاه های مختلف بارگیری مجدد کنید تا مشاهده کنید مرورگر تصاویر مختلف را بارگذاری می کند.

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

تراکم 1 برابر Blackberry Playbook، بسیاری از مانیتورهای خارجی
2 برابر چگالی iPad یا iPhone 5/6
چگالی 3 برابر گلکسی اس 5 یا آیفون ایکس
  • برای کدی که این کار را انجام می دهد، index.html بررسی کنید.

چگونه کار می کند؟

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

پیکسل چیست؟

بیایید از همان ابتدا با تعریف پیکسل شروع کنیم. این ساده به نظر می رسد، اما "پیکسل" در واقع می تواند معانی زیادی داشته باشد:

پیکسل دستگاه (معروف به "پیکسل فیزیکی")
کوچکترین نقطه رنگی که می توان روی یک دستگاه نمایش داد.
پیکسل منطقی
اطلاعاتی که رنگ را در یک مکان خاص در یک شبکه مشخص می کند. این نوع پیکسل اندازه فیزیکی ذاتی ندارد.
پیکسل CSS
مشخصات CSS پیکسل را به عنوان واحد اندازه گیری فیزیکی تعریف می کند. 1 پیکسل = 1/96 اینچ.

تراکم پیکسلی

تراکم پیکسلی (همچنین به عنوان «تراکم صفحه» یا «تراکم نمایشگر» نیز شناخته می‌شود) چگالی پیکسل‌های دستگاه را در یک ناحیه فیزیکی مشخص می‌سنجد. این معمولاً با استفاده از پیکسل در هر اینچ (ppi) اندازه گیری می شود.

برای سال‌های متمادی، 96 ppi تراکم نمایشگر بسیار رایج بود (از این رو CSS پیکسل را 1/96 اینچ تعریف می‌کرد). از دهه 1980، وضوح پیش فرض ویندوز بود. علاوه بر این، وضوح مانیتورهای CRT بود.

این امر با رایج شدن نمایشگرهای LED در دهه 2000 شروع به تغییر کرد. به ویژه، اپل در سال 2010 با معرفی نمایشگرهای رتینا سر و صدای زیادی به پا کرد. این نمایشگرها حداقل وضوح 192 ppi داشتند که دو برابر وضوح نمایشگرهای "عادی" بود (192 ppi/96 ppi = 2).

window.devicePixelRatio

با معرفی فناوری نمایشگر جدیدتر، "پیکسل های دستگاه" از نظر اندازه و شکل فیزیکی شروع به تغییر کردند و دیگر اندازه "پیکسل های CSS" نیستند. نیاز به تعریف رابطه بین اندازه "پیکسل های دستگاه" و "پیکسل های CSS" چیزی است که منجر به معرفی devicePixelRatio (که گاهی اوقات "CSS Pixel Ratio" نامیده می شود) شد.

devicePixelRatio رابطه بین پیکسل های دستگاه و پیکسل های CSS را برای یک دستگاه خاص تعریف می کند. یک دستگاه 192ppi دارای یک devicePixelRatio 2 (192ppi/96ppi = 2) است زیرا "2 پیکسل نمایشگر آن به اندازه 1 پیکسل CSS هستند".

این روزها بیشتر دستگاه ها دارای نسبت پیکسل دستگاه بین 1.0 تا 4.0 هستند.

  • با تایپ window.devicePixelRatio در کنسول، تراکم پیکسلی دستگاه را تعیین کنید.

  • برای مشاهده نسبت پیکسل دستگاه های رایج، این جدول را مشاهده کنید. اکثر آنها بین 1.0 و 4.0 هستند.

بنابراین چگونه این اطلاعات را در واقع اعمال می کنید؟

اندازه تصاویر بر اساس نسبت دستگاه به پیکسل

برای اینکه تصاویر در نمایشگرهای با وضوح بالا به بهترین شکل به نظر برسند، لازم است نسخه‌های تصویری متفاوتی برای devicePixelRatios مختلفPixelRatios ارائه کنید.

نسبت پیکسل دستگاه نشان می دهد که: در این دستگاه، یک تگ <img> با عرض CSS 250 پیکسل، زمانی که تصویر منبع ...
1 1 پیکسل دستگاه = 1 پیکسل CSS عرض 250 پیکسل
2 2 پیکسل دستگاه = 1 پیکسل CSS عرض 500 پیکسل
3 3 پیکسل دستگاه = 1 پیکسل CSS عرض 750 پیکسل

موارد قابل توجه:

  • ابعاد پیکسلی که در ویرایشگرهای تصویر، فهرست فایل‌ها و مکان‌های دیگر فهرست شده‌اند، اندازه‌گیری پیکسل‌های منطقی هستند.
  • برای نمایشگرهایی با وضوح بالاتر و نمایشگرهای بزرگتر به تصاویری با ابعاد بزرگتر نیاز دارید. صرفاً بزرگ‌نمایی تصاویر کوچک‌تر، هدف ارائه نسخه‌های تصویری متعدد را از بین می‌برد. اگر تصویری با وضوح بالا ارائه نمی شد، مرورگر این کار را به هر حال انجام می داد.

از توصیفگرهای چگالی برای ارائه چندین مورد استفاده کنید
تصاویر

توصیفگرهای چگالی، در ارتباط با ویژگی "srcset"، می توانند برای ارائه تصاویر مختلف به دستگاه های مختلف PixelRatios استفاده شوند.

  • به فایل index.html نگاهی بیندازید و عنصر <img> را یادداشت کنید. 
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

این مثال با کلمات بیان می شود:

  • 1x ، 2x و 3x همگی توصیفگرهای چگالی هستند که به مرورگر می‌گویند تراکم پیکسلی که یک تصویر برای آن در نظر گرفته شده است. این کار مرورگر را از نیاز به دانلود تصویر برای تعیین این اطلاعات نجات می دهد.
  • مرورگر می‌تواند بین سه تصویر یکی را انتخاب کند: flower-1x.jpg (برای مرورگرهای با تراکم پیکسل 1.0 )، flower-2x.jpg (برای مرورگرهایی با تراکم پیکسل 2.0 ) و flower-3x.jpg (برای مرورگرها در نظر گرفته شده است). با تراکم 3.0 پیکسل).
  • flower.jpg تصویر بازگشتی برای مرورگرهایی است که از srcset پشتیبانی نمی کنند.

نحوه استفاده از این:

  • برای نوشتن توصیفگرهای چگالی از یک devicePixelRatio و واحد x استفاده کنید. برای مثال، توصیفگر چگالی برای بسیاری از صفحه‌های رتینا ( window.devicePixelRatio = 2 ) به صورت 2x نوشته می‌شود.
  • اگر توصیفگر چگالی ارائه نشده باشد، 1x در نظر گرفته می شود.
  • گنجاندن توصیفگرهای چگالی در نام فایل ها یک قرارداد رایج است (و به شما کمک می کند تا فایل ها را پیگیری کنید) اما ضروری نیست. تصاویر می توانند هر نام فایلی داشته باشند.
  • نیازی به اضافه کردن ویژگی sizes نیست. ویژگی sizes فقط با توصیف کننده های عرض استفاده می شود.