לצפייה בהדגמה הזו
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על
Fullscreen
. - טוענים מחדש את הדף באמצעות מכשירים שונים, כדי לראות שהדפדפן טוען תמונות שונות.
לשם כך אפשר להשתמש באמולטור המכשיר. אם אתם מחפשים דחיסות תצוגה ספציפית, תוכלו לנסות את המכשירים הבאים:
| צפיפות של 1x | Playbook של BlackBerry, צגים חיצוניים רבים |
| צפיפות פי 2 | iPad או IPhone 5/6 |
| צפיפות פי 3 | Galaxy S5 או iPhone X |
- קוד הפעולה הזה לביצוע הפעולה הזו יכול להופיע ב-
index.html.
איך זה עובד?
סביר להניח שרוב האנשים לא מכירים את המושג 'תיאורי צפיפות'. כדי להבין אותן טוב יותר, כדאי לתת קצת רקע על האופן שבו הדפדפן עובד עם פיקסלים.
מהם פיקסלים
נתחיל מהתחלה ונגדיר מהו פיקסל. זה נשמע פשוט, אבל למילה 'פיקסל' יש הרבה משמעויות:
- הפיקסל של המכשיר (נקרא גם 'פיקסל פיזי')
- נקודת הצבע הקטנה ביותר שניתן להציג במכשיר.
- פיקסל לוגי
- מידע שמציין את הצבע במיקום מסוים ברשת. לפיקסלים האלה אין גודל פיזי מובנה.
- פיקסל של CSS
- במפרט ה-CSS מוגדר פיקסל כיחידה של מדידה פיזית. פיקסל אחד = 1/96 אינץ'.
צפיפות פיקסלים
צפיפות פיקסלים (שנקראת גם 'צפיפות מסך' או 'צפיפות תצוגה') מודדת את הצפיפות של הפיקסלים של המכשיר באזור פיזי נתון. בדרך כלל אפשר למדוד את המדד הזה באמצעות פיקסלים לאינץ' (ppi).
במשך שנים רבות, צפיפות התצוגה של 96 PPI הייתה נפוצה מאוד (ולכן CSS מגדיר פיקסל כ-1/96 אינץ'). משנות ה-80 של המאה ה-20 זו הייתה רזולוציית ברירת המחדל של Windows. בנוסף, זו הייתה הרזולוציה של צגי CRT.
הסגנון הזה החל להשתנות ככל שמסכי ה-LED הפכו להיות נפוצים בשנות ה-2000. בשנת 2010, Apple השיקה שיאים גדולים בשנת 2010, כשהשיקה את צגי Retina. לצגים האלה הייתה רזולוציה מינימלית של 192 PPI, שהרזולוציה שלה הייתה כפולה מזו של מסכים 'רגילים' ( 192 ppi/96 ppi = 2).
window.devicePixelRatio
עם השקת טכנולוגיית התצוגה החדשה, ה"פיקסלים במכשיר" החלו להשתנות בגודלם הפיזי ובצורה שלהם, והם כבר לא היו באותו גודל כמו "פיקסלים ב-CSS". הצורך להגדיר את הקשר בין הגודל של הפיקסלים במכשיר לבין הגודל "פיקסלים ב-CSS" הוא זה שהוביל להצגת devicePixelRatio (שלפעמים נקרא "יחס פיקסלים ב-CSS").
devicePixelRatio מגדיר את הקשר בין הפיקסלים במכשיר לבין הפיקסלים ב-CSS עבור מכשיר מסוים. למכשיר עם 192 PPI יש devicePixelRatio של 2 (192
PPI/96 PP = 2) כי "2 מהפיקסלים לתצוגה שלו הם בגודל של פיקסל CSS אחד".
כיום, לרוב המכשירים יש יחס פיקסלים בין 1.0 ל-4.0.
כדי לקבוע את דחיסות הפיקסלים של מכשיר צריך להקליד
window.devicePixelRatioבמסוף.בטבלה הזו ניתן לראות את יחסי הפיקסלים של מכשירים נפוצים. רוב הגרסאות נעות בין 1.0 ל-4.0.
אז איך אתם מיישמים את המידע הזה בפועל?
גודל התמונות בהתאם ליחסי הפיקסלים במכשיר
כדי שהתמונות ייראו הכי טוב במסכים עם רזולוציה גבוהה, צריך לספק גרסאות תמונה שונות ל-devicePixelRatios שונים.
| יחס הפיקסלים במכשיר | מציין ש: | במכשיר הזה, תג <img> ברוחב CSS של 250 פיקסלים, ייראה בצורה הטובה ביותר כשתמונת המקור היא... |
|---|---|---|
| 1 | פיקסל אחד במכשיר = פיקסל אחד ב-CSS | רוחב של 250 פיקסלים |
| 2 | 2 פיקסלים של מכשיר = פיקסל אחד של CSS | רוחב של 500 פיקסלים |
| 3 | 3 פיקסלים של מכשיר = פיקסל אחד של 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.
איך משתמשים בזה:
- כדי לכתוב מתארי צפיפות צריך להשתמש ב-PixelRatio וביחידה
xבמכשיר. לדוגמה, מתאר הצפיפות של מסכי רטינה רבים (window.devicePixelRatio = 2) ייכתב כך:2x. - אם לא תספקו תיאור צפיפות, ההנחה היא שהוא
1x. - השימוש בתיאורי צפיפות בשמות קבצים הוא מוסכמה מקובלת (ויעזור לכם לעקוב אחרי קבצים), אבל לא חובה. לתמונות יכול להיות כל שם קובץ.
- אין צורך לכלול את המאפיין
sizes. המאפייןsizesמשמש רק עם מתארי רוחב.