שימוש בתיאורי צפיפות

Katie Hempenius

הדגמה

• כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא).
• כדאי לטעון מחדש את הדף במכשירים שונים כדי לראות שהדפדפן טוען תמונות שונות.

אפשר להשתמש למטרה הזו במהנת המכשיר. אם אתם מחפשים דחיסות תצוגה ספציפית, תוכלו לנסות את המכשירים הבאים:

• כדאי לחפש ב-index.html את הקוד שמבצע את הפעולה הזו.

איך זה עובד?

רוב האנשים לא מכירים את המושג 'תיאורי צפיפות'. כדי להבין אותם טוב יותר, כדאי לקבל קצת רקע על האופן שבו הדפדפן עובד עם פיקסלים.

מהם פיקסלים

נתחיל מההתחלה ונגדיר מהו פיקסל. זה נשמע פשוט, אבל למילה 'פיקסל' יש למעשה הרבה משמעויות:

פיקסל במכשיר (נקרא גם 'פיקסל פיזי')

הנקודה הקטנה ביותר של צבע שאפשר להציג במכשיר.

פיקסל לוגי

מידע שמציין את הצבע במיקום מסוים ברשת. לסוג הפיקסל הזה אין גודל פיזי מובנה.

פיקסל של CSS

מפרט ה-CSS מגדיר פיקסל כיחידת מידה פיזית. פיקסל אחד = 1/96 אינץ'.

צפיפות פיקסלים

דחיסות הפיקסלים (שנקראת גם 'דחיסות המסך' או 'צפיפות המסך') מודדת את הצפיפות של הפיקסלים במכשיר באזור פיזי נתון. בדרך כלל המדד הזה נמדד באמצעות פיקסלים לאינץ' (PP).

במשך שנים רבות, צפיפות המסך של 96ppi הייתה נפוצה מאוד (לכן ב-CSS, פיקסל מוגדר כ-1/96 אינץ'). החל משנות ה-80, זו הייתה רזולוציית ברירת המחדל של Windows. בנוסף, זו הייתה הרזולוציה של מסכי CRT.

המצב הזה החל להשתנות ככל שצגי LED נעשו נפוצים בשנות ה-2000. במיוחד, Apple עוררה הדים רבים בשנת 2010 כשהשיקה את צגי Retina. הרזולוציה המינימלית של המסכים האלה הייתה 192ppi, פי שניים מהרזולוציה של מסכים 'רגילים' (192ppi/96ppi = 2).

window.devicePixelRatio

עם ההשקה של טכנולוגיות מסך חדשות, 'פיקסלים במכשיר' התחילו להשתנות בצורה ובגודל הפיזי, והם כבר לא היו באותו גודל כמו 'פיקסלים ב-CSS'. הצורך להגדיר את היחס בין הגודל של 'פיקסלים במכשיר' לבין 'פיקסלים ב-CSS' הוביל להצגת הערך devicePixelRatio (שנקרא לפעמים 'יחס פיקסלים ב-CSS').

devicePixelRatio מגדיר את היחס בין פיקסלים במכשיר לבין פיקסלים ב-CSS במכשיר מסוים. במכשיר עם 192 PPI יש devicePixelRatio של 2 (192 PP/96 PP = 2) כי "2 מהפיקסלים לתצוגה הם בגודל של פיקסל CSS אחד".

כיום, רוב המכשירים כוללים יחס פיקסלים של המכשיר (DPR) בין 1.0 ל-4.0.

• כדי לבדוק את צפיפות הפיקסלים של מכשיר, מקלידים window.devicePixelRatio במסוף.

• בטבלה הזו אפשר לראות את יחס הפיקסלים של מכשירים נפוצים. רוב הערכים נעים בין 1.0 ל-4.0.

אז איך משתמשים בפועל במידע הזה?

גודל התמונות לפי יחס הפיקסלים של המכשיר

כדי שהתמונות ייראו במיטבן במסכים עם רזולוציה גבוהה, יש לספק גרסאות שונות של התמונות ל-devicePixelRatios שונים.

כדאי לשים לב:

• מידות הפיקסלים שמופיעות בכלי לעריכת תמונות, בספריות קבצים ובמקומות אחרים הן מדידה של פיקסלים לוגיים.
• במסכים ברזולוציה גבוהה יותר ובמסכים גדולים יותר, צריך תמונות בגודל גדול יותר. הגדלת תמונות קטנות לא מביאה לתוצאות טובות כמו הצגת כמה גרסאות של תמונות. הדפדפן היה עושה זאת בכל מקרה אם לא הייתה מסופקת תמונה ברזולוציה גבוהה.

שימוש בתיאורי צפיפות כדי להציג כמה תמונות

אפשר להשתמש בתיאורי הצפיפות, בשילוב עם המאפיין srcset, כדי להציג תמונות שונות ל-devicePixelRatios שונים.

• בודקים את הקובץ 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.

איך משתמשים באפשרות הזו:

• כתיבת תיאורי צפיפות צריך להשתמש במכשירPixelRatio וביחידה x. לדוגמה, מתאר הצפיפות של מסכי Retina רבים (window.devicePixelRatio = 2) יהיה 2x.
• אם לא מציינים מאפיין צפיפות, ההנחה היא שהוא 1x.
• מומלץ לכלול תיאורים של צפיפות בשמות הקבצים (כדי לעזור לכם לעקוב אחרי הקבצים), אבל זה לא חובה. לכל קובץ יכול להיות כל קובץ.
• אין צורך לכלול מאפיין sizes. המאפיין sizes משמש רק עם מתארי רוחב.