מאת: יריב בן אליעזר

אז מה ההבדל בין PPI ל-DPI? מה זה בדיוק רזולוציה של מסך? מה ההבדל בין רזולוציה ל-Pixel Density? או בקיצור – איך אני מכין תמונות עבור המפתח?

שיתוף הפעולה בין מתכנתים למעצבים טומן בחובו לא מעט קשיים. רבים מהם נובעים מעניינים טרמינולוגיים פשוטים, וכשהמילה “רזולוציה” עולה לחלל האוויר, העניינים בכלל מתחממים.

אז קודם כל בואו ונעשה סדר בטרמינולוגיה ונכיר כמה מושגי יסוד:

LPI – Lines Per Inch – מספר קווים לאינץ’. מושג שהגיע מעולם הדפוס והוא מתאר רשת הדפסה. צפיפות רשת ההדפסה היא אחד הפרמטרים העיקריים שקובעים את רזולוציית התמונה הרצויה.

DPI – Dots Per Inch – מספר נקודות לאינץ’. מדובר ברזולוציה אופטית שנועדה למדוד צפיפות נקודות במוצרים אופטיים כמו: מסכים, מקרנים, סורקים ומצלמות ורבים נוטים לבלבל בינה לבין רזולוציית התמונה.

PPI – Pixel Per Inch – מספר הפיקסלים באינץ’ קווי. הרזולוציה שבה נוהגים לתאר תמונות. רבים מבלבלים בין רזולוציית תמונה לגודל התמונה. אם מישהו יאמר לכם שרזולוציית התמונה שלו היא, למשל, 1500X2000 פיקסלים, אתם מוזמנים לתקן אותו – זו אינה רזולוציה, אלו מידות התמונה.

גודל מסך – גודלו הפיזי של המסך. בדרך כלל נמדד באינצ’ים. למשל, מסך של 24 אינץ’. שני נתונים חשובים נוספים הם מספר הפיקסלים לאורכו ולרוחבו של מסך (ככל שמספר הפיקסלים הוא גבוה יותר, רוב הסיכויים שהתמונות יוצגו בצורה איכותית יותר) ורזולוציית המסך האופטית, למשל PPI96.

Pixel – יחידת התמונה הדיגיטלית הקטנה ביותר. תמונה דיגיטלית יכולה להיות מורכבת ממספר פיקסלים בודדים, עד למיליוני פיקסלים.
הערך שמתאר את כמות הפיקסלים בתמונה הוא (MP (Mega Pixel. למשל, תמונה של 21MP היא תמונה שמכילה כ-21 מליון פיקסלים.

Pixel Densityכמות הפיקסלים באינץ’ קווי שנועדה לתאר רזולוציית מסך לפי כמות פיקסלים ולא נקודות – זהו בעצם ה-PPI שהזכרתי קודם לכן.

כדי להבין זאת טוב יותר: נאמר ויש ברשותנו מסך ברוחב 3 אינץ’ ובגובה של 6 אינץ’ עם Pixel Density של 450, אז במקרה הזה קיבלנו:

450 (PPI) x 3 inch (width) = 1350 ו-450 (PPI) x 6 inch (height) = 2700
כלומר קיבלנו את כמות הפיקסלים של המסך שהיא 2700 על 1350,

(Points (iOS – יחידת מידה של מכשירי Apple שמתייחסת לגודל פיזי של אלמנט על המסך, בלי קשר למספר הפיקסלים שמהם הוא בנוי, בהתאמות לצפיפויות פיקסלים שונות (הסבר בהמשך).

DP / DIP) density independent pixels – Android) – יחידת מידה של מכשירי Android שמתייחסת לגודל פיזי של אלמנט על המסך, בלי קשר למספר הפיקסלים שממנו הוא בנוי בהתאמות לצפיפויות פיקסלים שונות (הסבר בהמשך).

רק התחלנו…

בואו נדבר תכל’ס…

Desktop & Mobile view (צפייה בדפדפנים ב-Desktop וב-Mobile)

אתחיל דווקא מהסוף – מה שחשוב בסופו של דבר, השורה התחתונה היא שכשמכינים קובץ תמונה למסך מה שחשוב הוא רק הגודל בפיקסלים. בחיי! 😊 ול-PPI של הקובץ אין שום משמעות. גודל הקובץ בפיקסלים הוא הגודל הסופי והאבסולוטי.

אתן לכם דוגמה – התבקשתי להכין קובץ למסך, שמידותיו 500 פיקסלים לרוחב על 250 פיקסלים (סה”כ 125K פיקסלים) לגובה שהרזולוציה שלו היא 72PPI. האם הרזולוציה באמת רלוונטית? ובכן, ממש לא… הדבר היחיד שמשנה הוא גודל הקובץ הסופי בפיקסלים. אם יש לי קובץ באותם נתונים שציינתי, ואכפיל את ה-PPI (Pixel Per Inch) ל-144 במקום 72, אז כמות הפיקסלים הכללית תגדל פי 4, כי הגדלתי את צפיפות הפיקסלים לאינץ’ קווי פי 2, וכמות הפיקסלים לרוחב ו/או לגובה תגדל פי 2. כעת בידיי קובץ של 1000 על 500 פיקסלים (סה”כ 500K פיקסלים).

או במילים אחרות: אם ברשותי קובץ של 500X250 פיקסלים, שאותו ארצה להגדיל לקובץ של 1000X500 פיקסלים, אוכל לבצע זאת בשתי דרכים:

  1. להגדיל את כמות הפיקסלים בתמונה ל-1000 על 500.
  2. להגדיל את הרזולוציה מ-72PPI ל-144PPI.

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

אחדד זאת באמצעות דוגמה נוספת: ברשותי שני קבצים. אחד שמידותיו 156X350 פיקסלים, ברזולוציה של 72 PPI, ושני שמידותיו 350X156 פיקסלים, ברזולוציה של 20PPI. כמות הפיקסלים בשני הקבצים זהה. האם יש הבדל בגודל הפיזי על המסך ובמשקל של שני הקבצים? לא! מה שמשנה בסופו של דבר זו כמות הפיקסלים הכללית ולא הרזולוציה.

אוקיי, אז בשלב זה אתם שואלים את עצמכם מדוע תמיד ביקשו מכם להכין קבצים למסך ברזולוציה של 72PPI, נכון? אז ככה, ונקצר את הסיפור: מחשב המקינטוש הראשון שיצא אל השוק ב-1984 היה בעל רזולוציה של בדיוק 72 נקודות לאינץ’, ואז זה הפך להיות איזשהו סטנדרט שלפיו קבעו את ברירת המחדל של ה-PPI. אני מרשה לעצמי להניח שזה הפך להיות איזשהו reference, כדי שיהיה PPI סטנדרטי ושלא נקבל כל פעם קובץ ברזולוציה אחרת, למרות ששוב, אין לזה שום משמעות.

אז עכשיו כשה-PPI מאחורינו, בואו נשאל שאלה נוספת: מדוע בעיצוב לאפליקציות (לוגואים, אייקונים, תמונות) צריך לפעמים להכין אותם במספר גדלים שונים, בגלל שקיימות רזולוציות שונות למכשירים? בואו נסביר ונעשה סדר גם בזה!

על מסכי Retina ו-Points

ה-iPhone הראשון שיצא לשוק, היה במידות של 320 על 480  פיקסלים. המכשיר שבא בעקבותיו, iPhone 4, הביא לעולם את מהפכת ה-Retina (מסכים בעלי צפיפות פיקסלים גדולה), שבו כל פיקסל בודד הפך ל-2 פיקסלים על 2 פיקסלים (2X2), כלומר סה”כ של 4 פיקסלים.

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

לעולם העיצוב נכנסו מושגים חדשים: 1X, 2X, 3X וכך הלאה – שמתארים את צפיפות הפיקסלים של מסך הרטינה. הערך 3X, לדוגמה, מציין מסכים של צפיפות משולשת, שבהם כל פיקסל בודד מוכפל ל-3 ברוחב ו-3 לגובה, מה שמביא אותנו כבר ל-9 פיקסלים על כל פיקסל במסך רגיל, שהוא לא Retina.

בעקבות כניסתם של מסכי ה-Retina לשוק, החליטו בחברת Apple להגדיר יחידת מידה ייחודית לעיצוב המסכים שלה – Points. הרעיון פשוט: 1 Point = 1 Pixel. יחידת הגודל החדשה הזו פטרה אותנו מהתלות בכמות הפיקסלים של הקובץ.

אז באיזה גודל מעצבים לאייפון? תמיד נעצב ב 1 x. כשניתן לנו גודל של אלמנט מסוים ב-Points, מבחינתנו, כאילו אמרו לנו את גודלו בפיקסלים כשהכוונה ל 1 x. מבחינתנו אין הבדל בין 120X50 Points או 120X50 Pixels. כשנייצא קבצים עבור שלושת סוגי המסכים, נייצא ב 1x, 2x ו3x-. תוכנות כמו Xd, Figma, Sketch ואילוסטרייטור יכולות לייצא קבצים בגדלים שונים ועבור מערכות הפעלה שונות.

מתוך אילוסטרייטור 

מתוך אדובי XD

מתוך Figma

מה לגבי המסכים של מכשירי Android?

למכשירי Android, נכון להיום, קיימות לא פחות מ 6 (!) רזולוציות שונות.

dp / dip

למרות הטרמינולוגיה השונה, העניינים ב-Android די דומים. נזכיר רק שוב – גודלו הפיזי (באינצ’ים) של המסך אינו מעיד על מספר הפיקסלים שמהם הוא בנוי. יכולים להיות מסכים בגודל פיזי זהה, אך בעלי רזולוציות שונות.

ניקח לדוגמה שני מסכי מובייל שזהים בגודלם הפיזי: 3X6 אינץ’.
מכשיר אחד הוא בעל צפיפות (Pixel Density) של 500 פיקסלים לאינץ’ (500 PPI) ואילו השני הוא בעל צפיפות של 1000 פיקסלים לאינץ’ (1000 PPI).

הכנתי למובייל אייקונים שונים, בגודל של 100X100 פיקסלים. במסך בצפיפות של 500PPI, הם נראים חדים ובדיוק בגודל הרצוי לי על המסך. אם אשאיר אותם באותו גודל בפיקסלים, אז במסך שהצפיפות שלו היא 1000PPI, הם יוצגו אותם במחצית מהגודל שלהם במסך הראשון. כדי שיראו אותם באותו גודל ויזואלי בשני המסכים, אצטרך להכין גרסה נוספת שלהם בגודל של 200X200 פיקסלים.

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

למעשה, ההבדל היחידי בין DP של אנדרואיד ל-Point של Apple הוא שב-Android  גודל המוצא הבסיסי הוא 160px 1X וב-iOS הוא 320px. ייתכן ותיתקלו גם ביחידת המידה SP. יחידה זו זהה, פחות או יותר, לערך DP, אך היא מיועדת עבור גדלים של טקסטים.

שתי יחידות המידה, dip או Points, מתייחסות ל-UI Layouts, כלומר התייחסות היא לגודל היחסי של האלמנטים השונים על המסך, והפריסה שלהם (מיקום, מרווחים וכו’) על גביו. אם, לצורך הרעיון, יש לי מסך במידות 360dp X 640dp – הגודל הזה הוא הגודל שלי לעיצוב (המשמעות של הגובה היא, לרוב, כדי לדעת פחות או יותר איפה ה-fold שלו – כל תוכן מתחתיו יוצג רק עם גלילה).

ראו בדוגמה – המסך שמאלי הוא המסך שלי לעיצוב, זהו ה-UI Layout. לצגו עוד שני מסכים ברזולוציות שונות שמציגים איך הגודל ב-DP מיתרגם לגודל פיקסלים שונה.

 

חשוב לציין שכל האמור מתייחס לקבצי תמונה. כשמדובר בקבצים וקטוריים (כמו SVG), נהוג לייצא קובץ בודד ואין צורך בסטים של גדלים. לשמחתנו SVG כבר נתמך ברוב הדפדפנים – לדסקטופ ולמובייל, ומתחיל להיכנס יותר ויותר (הגיע הזמן ויפה שעה אחת קודם) גם לאפליקציות נייטיב (Android, iOS).

 

מקורות:

Device Metrics – Material Design

https://material.io/resources/devices/

 

dp to Pixel Converter

https://pixplicity.com/dp-px-converter

 

Points to Pixel Converter

http://www.endmemo.com/sconvert/pixelpoint.php

 

iOS Device Display Sizes

https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

תגובות פייסבוק

השאר תגובה

Please enter your comment!
Please enter your name here