px: ουσία, φυσικά εικονοστοιχεία στην ανάπτυξη εφαρμογών για κινητά

Τι είναι το px;

px (pixel, picture element) — το μικρότερο προσβάσιμο στοιχείο μιας ψηφιδωτής εικόνας ή οθόνης. Κάθε εικονοστοιχείο αποθηκεύει πληροφορίες χρώματος στο μοντέλο RGB (κόκκινο, πράσινο, μπλε) με βάθος χρώματος 8 έως 10 bit ανά κανάλι. Οι σύγχρονες οθόνες κινητών συσκευών περιέχουν εκατομμύρια εικονοστοιχεία: iPhone 15 Pro — 3 εκατομμύρια, iPad Pro 12.9" — 5.6 εκατομμύρια εικονοστοιχεία.

Το φυσικό μέγεθος του εικονοστοιχείου εξαρτάται από την πυκνότητα οθόνης (PPI). Σε μια συσκευή με 326 PPI (iPhone 11) ένα εικονοστοιχείο έχει μέγεθος περίπου 0.078 mm. Σε οθόνη με 460 PPI (iPhone 15 Pro) — 0.055 mm. Όσο μικρότερο είναι το φυσικό μέγεθος του εικονοστοιχείου, τόσο μεγαλύτερη είναι η ευκρίνεια της εικόνας. Η πυκνότητα εικονοστοιχείων επηρεάζει άμεσα την απόδοση απόδοσης: περισσότερα εικονοστοιχεία = περισσότερη δουλειά για την GPU.

Σύμφωνα με στοιχεία της Apple, η ανάλυση οθόνης του iPhone 15 Pro είναι 1179 × 2556 px με πυκνότητα 460 PPI. Για σύγκριση, το iPhone SE (3rd gen) — 750 × 1334 px με 326 PPI. Η διαφορά στον συνολικό αριθμό εικονοστοιχείων είναι σχεδόν 3 φορές, γεγονός που εξηγεί τις υψηλότερες απαιτήσεις GPU στα μοντέλα Pro.

Ανάλυση οθόνης σε εικονοστοιχεία

Ανάλυση οθόνης — αριθμός φυσικών εικονοστοιχείων οριζόντια και κάθετα. Γράφεται σε μορφή πλάτος × ύψος, π.χ. 1179 × 2556 px. Η ανάλυση είναι ένα θεμελιώδες χαρακτηριστικό της οθόνης που δεν μπορεί να αλλάξει προγραμματιστικά — είναι σταθερό σε επίπεδο υλικού και μήτρας.

Η ανάλυση σε εικονοστοιχεία δεν πρέπει να συγχέεται με το λογικό μέγεθος οθόνης (σε pt για iOS ή dp για Android). Για παράδειγμα, το iPhone 14 έχει λογικό μέγεθος 390 × 844 pt, αλλά φυσική ανάλυση 1170 × 2532 px — ακριβώς 3 φορές μεγαλύτερη, καθώς ο συντελεστής κλίμακας είναι 3.

PPI και πυκνότητα εικονοστοιχείων

PPI (pixels per inch) — αριθμός εικονοστοιχείων ανά ίντσα οθόνης. Υπολογίζεται με τον τύπο: PPI = √(πλάτος² + ύψος²) / διαγώνιος. Όσο υψηλότερο είναι το PPI, τόσο πιο λεπτά είναι τα μεμονωμένα εικονοστοιχεία και τόσο πιο λεία φαίνεται η εικόνα. Η Apple θεωρεί Retina οθόνη εκείνη με PPI άνω των 300 σε τυπική απόσταση παρακολούθησης.

Διαφορετικές κατηγορίες συσκευών έχουν διαφορετική πυκνότητα: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Οι συσκευές Android ταξινομούν την πυκνότητα μέσω Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Αυτοί οι κάδοι καθορίζουν ποιος πόρος (εικόνα, dimens) θα φορτωθεί για τη συσκευή.

Επίδραση του PPI στην ανάπτυξη: όσο μεγαλύτερη είναι η πυκνότητα, τόσο περισσότερη μνήμη απαιτείται για την αποθήκευση υφών και εικόνων. Ένα εικονοστοιχείο σε οθόνη με 500 PPI απαιτεί 2.5 φορές περισσότερη μνήμη GPU από ό,τι σε οθόνη με 320 PPI στο ίδιο λογικό μέγεθος στοιχείου. Η βελτιστοποίηση στοιχείων για συγκεκριμένους κάδους πυκνότητας είναι συνήθης πρακτική στην ανάπτυξη Android.

px vs λογικές μονάδες: pt, dp, sp

Τα φυσικά εικονοστοιχεία (px) διαφέρουν από τις λογικές μονάδες (pt, dp, sp) στο ότι είναι συνδεδεμένα με την ανάλυση υλικού και δεν κλιμακώνονται. Οι λογικές μονάδες, αντίθετα, αφαιρούν τον προγραμματιστή από τη συγκεκριμένη οθόνη, επιτρέποντας στην ίδια τιμή 100 pt να εμφανίζεται με το ίδιο φυσικό μέγεθος σε διαφορετικές συσκευές.

Τύποι μετατροπής: για iOS — px = pt × scale (όπου scale = 1, 2 ή 3). Για Android — px = dp × (dpi / 160). Η άμεση χρήση του px στον κώδικα σημαίνει ότι η διεπαφή θα φαίνεται διαφορετική σε συσκευές με διαφορετική πυκνότητα: σε οθόνη με υψηλό PPI το στοιχείο θα είναι πολύ μικρό, ενώ σε χαμηλό PPI — πολύ μεγάλο.

Γιατί το px δεν χρησιμοποιείται στον κώδικα

Η χρήση px στον πηγαίο κώδικα μιας εφαρμογής κινητού — αντ-πρότυπο που οδηγεί σε εσφαλμένη εμφάνιση της διεπαφής σε συσκευές με διαφορετική πυκνότητα εικονοστοιχείων. Τα σύγχρονα πλαίσια (UIKit, SwiftUI, Jetpack Compose, XML Layouts) απαγορεύουν ή δεν συνιστούν τον καθορισμό μεγεθών σε εικονοστοιχεία.

• iOS UIKit — όλα τα frame, bounds και constraint constants ορίζονται σε pt. Τα εικονοστοιχεία εμφανίζονται μόνο στο στάδιο ψηφιοποίησης μέσω UIGraphicsImageRenderer
• SwiftUI — δεν υπάρχει API για ορισμό μεγεθών σε px. Όλες οι τιμές είναι pt μέσω Font, frame, padding
• Android XML — αν ορίσετε px στο dimens.xml, το Android Studio εμφανίζει προειδοποίηση lint: "Use \`sp\` instead of \`px\` for text sizes"
• Jetpack Compose — TextUnit για κείμενο, Dp για στοιχεία. Ο μεταγλωττιστής δεν επιτρέπει ανάμειξη τύπων

Η μόνη νόμιμη χρήση του px στον κώδικα — εργασία με ψηφιδωτούς ενδιάμεσους αποθήκευσης: φόρτωση Bitmap, δημιουργία Canvas για απόδοση εικόνων, εργασία με Metal ή OpenGL. Σε αυτές τις περιπτώσεις, το px είναι τα φυσικά εικονοστοιχεία του ενδιάμεσου αποθήκευσης-στόχου και πρέπει να λαμβάνονται υπόψη για σωστή απόδοση. Σε όλες τις άλλες περιπτώσεις χρησιμοποιούνται λογικές μονάδες.

Εικονοστοιχεία σε εικόνες και στοιχεία

Οι εικόνες και τα εικονίδια αποθηκεύονται σε εικονοστοιχεία, αλλά για κάθε τύπο οθόνης παρέχονται διαφορετικές εκδόσεις. Το iOS χρησιμοποιεί επιθήματα @1x, @2x, @3x στο Assets.xcassets. Το Android χρησιμοποιεί φακέλους drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Το σύστημα επιλέγει αυτόματα το κατάλληλο αρχείο βάσει της πυκνότητας οθόνης.

Κανόνας παροχής στοιχείων: δημιουργήστε την εικόνα σε διανυσματική μορφή (PDF, SVG) και εξάγετε σε ψηφιδωτά αντίγραφα των απαιτούμενων μεγεθών. Τα διανυσματικά στοιχεία κλιμακώνονται χωρίς απώλεια ποιότητας και καταλαμβάνουν λιγότερο χώρο στο αποθετήριο. Στο Android, οι διανυσματικοί πόροι μπορούν να χρησιμοποιηθούν απευθείας μέσω VectorDrawable, εξαλείφοντας την ανάγκη για πολλαπλά ψηφιδωτά αντίγραφα.