Υπολογιστής Αναλογίας Διαστάσεων

Εισαγάγετε οποιοδήποτε πλάτος και ύψος για να βρείτε την απλοποιημένη αναλογία διαστάσεων χρησιμοποιώντας τη μέθοδο του ΜΚΔ (Μέγιστος Κοινός Διαιρέτης).

Για παράδειγμα, το 1920x1080 απλοποιείται σε 16:9, όπως επίσης και το 2560x1440 απλοποιείται σε 16:9.

Ο υπολογιστής μας εμφανίζει επίσης τη δεκαδική αναλογία για γρήγορη αναφορά.

Το 16:9 είναι η τυπική ευρεία αναλογία (widescreen) που χρησιμοποιείται για αναλύσεις HD, Full HD, 4K και 8K.

Οι συνήθεις αναλύσεις 16:9 περιλαμβάνουν:

• 1280x720 (HD)
• 1920x1080 (Full HD)
• 2560x1440 (QHD)
• 3840x2160 (4K UHD)
• 7680x4320 (8K)

Εισαγάγετε οποιοδήποτε πλάτος για να υπολογίσετε αμέσως το αντίστοιχο ύψος για αναλογία 16:9.

Κάθε πλατφόρμα κοινωνικών δικτύων έχει προτεινόμενες αναλογίες διαστάσεων:

• YouTube (16:9, 9:16 για Shorts)
• Instagram (1:1 τετράγωνο, 4:5 κατακόρυφο, 9:16 Stories/Reels)
• TikTok (9:16)
• Twitter/X (16:9, 2:1 header)
• Facebook (1.91:1 σύνδεσμος, 9:16 Stories)

Χρησιμοποιήστε τις προεπιλογές πλατφόρμας για να λάβετε τις ακριβείς διαστάσεις σε pixels.

Η αναλογία διαστάσεων (aspect ratio) είναι η αναλογική σχέση μεταξύ του πλάτους και του ύψους μιας εικόνας, η οποία γράφεται ως δύο αριθμοί που χωρίζονται με άνω και κάτω τελεία, όπως 16:9.

Λειτουργεί εκφράζοντας το πλάτος και το ύψος ως τη μικρότερη σχέση ακεραίων αριθμών, η οποία προκύπτει διαιρώντας και τις δύο διαστάσεις με τον μέγιστο κοινό διαιρέτη (ΜΚΔ) τους. Μια εικόνα 1920x1080 έχει ΜΚΔ 120, οπότε απλοποιείται σε 16:9.

Η αναλογία διαστάσεων είναι ανεξάρτητη από την ανάλυση: το 1280x720 και το 3840x2160 μοιράζονται και τα δύο την αναλογία 16:9 παρά τον πολύ διαφορετικό αριθμό pixels. Όπως ορίζουν τα πρότυπα τηλεοπτικής μετάδοσης SMPTE και ITU-R BT.709, η αναλογία καθορίζει το σχήμα ενώ η ανάλυση καθορίζει τη λεπτομέρεια, γι' αυτό και τα δύο πρέπει να εξετάζονται ξεχωριστά κατά την προετοιμασία πολυμέσων.

Για να βρείτε μια διάσταση που λείπει, πολλαπλασιάστε ή διαιρέστε τη γνωστή διάσταση με τη δεκαδική τιμή της αναλογίας.

Αν γνωρίζετε το πλάτος και θέλετε το ύψος για μια εικόνα 16:9, διαιρέστε το πλάτος με το 16 και πολλαπλασιάστε με το 9: πλάτος 1600px δίνει 1600/16x9 = 900px. Για να βρείτε το πλάτος από το ύψος, αντιστρέψτε την πράξη: πολλαπλασιάστε το ύψος με το 16 και διαιρέστε με το 9.

Η δεκαδική μορφή (16/9 = 1.778) καθιστά την κλιμάκωση γρήγορη, καθώς το πλάτος ισούται πάντα με το ύψος επί τη δεκαδική αναλογία. Αυτή είναι η ίδια αριθμητική που χρησιμοποιείται στο CSS layout, όπου η ιδιότητα aspect-ratio που τεκμηριώνεται από το MDN Web Docs επιτρέπει στους περιηγητές να δεσμεύουν το σωστό σχήμα πλαισίου πριν φορτωθεί μια εικόνα, αποτρέποντας τη μετατόπιση διάταξης (layout shift).

Η φωτογραφία και ο κινηματογράφος χρησιμοποιούν ένα ξεχωριστό σύνολο αναλογιών διαστάσεων από αυτά των οθονών.

Οι περισσότερες φωτογραφικές μηχανές DSLR και mirrorless πραγματοποιούν λήψη σε 3:2 (1.5), κληρονομημένο από το φιλμ 35mm, ενώ οι αισθητήρες Micro Four Thirds χρησιμοποιούν 4:3.

Ο κινηματογράφος βασίζεται σε ευρύτερα φορμά: το 1.85:1 (flat) και το 2.39:1 (anamorphic scope) είναι τα κινηματογραφικά πρότυπα που ορίζονται από το SMPTE, ενώ το 21:9 προσεγγίζει το κινηματογραφικό ultrawide για οικιακή προβολή.

Τα μεγέθη εκτύπωσης ακολουθούν μια άλλη λογική. Η σειρά ISO 216 A (A4, A3) χρησιμοποιεί αναλογία 1:1.414 (ρίζα του 2), έτσι ώστε το κόψιμο ενός φύλλου στη μέση να διατηρεί τις αναλογίες του.

Η γνώση της αρχικής αναλογίας αποτρέπει την ανεπιθύμητη περικοπή (cropping) κατά τη μεταφορά μιας εικόνας μεταξύ φωτογραφικής μηχανής, οθόνης και χαρτιού.

Η αλλαγή της αναλογίας διαστάσεων μιας εικόνας χωρίς παραμόρφωση απαιτεί είτε περικοπή (cropping) είτε προσθήκη περιθωρίων, και ποτέ απλή άνιση αλλαγή μεγέθους των δύο διαστάσεων.

Η περικοπή αφαιρεί pixel από τα άκρα για να επιτύχει το τελικό σχήμα, θυσιάζοντας μέρος του περιεχομένου αλλά γεμίζοντας το πλαίσιο. Το letterboxing (οριζόντιες μπάρες) ή το pillarboxing (κατακόρυφες μπάρες) διατηρεί ολόκληρη την εικόνα συμπληρώνοντας τον κενό χώρο, όπως ακριβώς οι τηλεοπτικοί σταθμοί που ακολουθούν τα πρότυπα προβολής ITU-R προσαρμόζουν υλικό 4:3 σε οθόνες 16:9.

Το τέντωμα (stretching), αντίθετα, επιβάλλει ακατάλληλες διαστάσεις και παραμορφώνει ορατά πρόσωπα και κύκλους.

Όταν πρέπει να κάνετε μετατροπή, αποφασίστε αν προέχει η ακέραιη προβολή του περιεχομένου (letterbox) ή το πλήρες πλαίσιο (περικοπή), και υπολογίστε τις ακριβείς διαστάσεις με τα περιθώρια ή την περικοπή πριν την εξαγωγή.

Στον σχεδιασμό ιστοσελίδων, η αναλογία διαστάσεων πρέπει να ορίζεται στη CSS αντί για σταθερά μέγεθος σε pixel, ώστε οι εικόνες να προσαρμόζονται ομαλά σε όλες τις συσκευές.

Η σύγχρονη ιδιότητα CSS aspect-ratio, όπως τεκμηριώνεται από το MDN Web Docs και αποτελεί μέρος των προδιαγραφών W3C CSS, σας επιτρέπει να δηλώσετε aspect-ratio: 16 / 9 σε ένα πλαίσιο, δεσμεύοντας τον χώρο και εξαλείφοντας τη μετατόπιση αθροιστικού σχεδιασμού (CLS), μια μέτρηση των Core Web Vitals που παρακολουθεί η Google.

Οι συνηθισμένες αναλογίες στο διαδίκτυο περιλαμβάνουν:

• 16:9 για κεντρικά βίντεο (hero videos)
• 4:3 ή 1:1 για μικρογραφίες και κάρτες
• 3:2 για εικόνες άρθρων

Συνδυάζετε πάντα τη δηλωμένη αναλογία με προσαρμοστικές μονάδες μέτρησης, ώστε ο ίδιος κώδικας να προσαρμόζεται από κατακόρυφη οθόνη κινητού σε ευρεία οθόνη υπολογιστή χωρίς σταθερές διαστάσεις.

Επιλέξτε την αναλογία διαστάσεων της οθόνης με βάση την κύρια εργασία σας και όχι επιλέγοντας απλώς τη φθηνότερη επιλογή.

• Το 16:9 είναι ιδανικό για βίντεο και παιχνίδια και αποτελεί το σχεδόν παγκόσμιο πρότυπο οθονών
• Το 16:10 προσφέρει πρόσθετο κατακόρυφο χώρο, κατάλληλο για προγραμματισμό και έγγραφα
• Οι ευρείες οθόνες 21:9 (2560x1080, 3440x1440) αντικαθιστούν τη διάταξη διπλής οθόνης για επεξεργασία βίντεο και υπολογιστικά φύλλα
• Οι υπερ-ευρείες οθόνες 32:9 προχωρούν ακόμη παραπέρα για εξομοιώσεις και οικονομικές συναλλαγές

Η VESA και η βιομηχανία οθονών ορίζουν αυτά τα φορμά με βάση τις κοινές αναλύσεις πάνελ, επομένως η αντιστοίχιση της αναλογίας του περιεχομένου σας με το πάνελ αποτρέπει τις μαύρες μπάρες. Για μικτή χρήση, το 16:10 ή το 21:9 προσφέρει γενικά την πιο ευέλικτη επιφάνεια εργασίας σε σχέση με το κόστος.

Οι σωστές αναλογίες διαστάσεων επηρεάζουν άμεσα την εμφάνιση του περιεχομένου στα αποτελέσματα αναζήτησης και στις προεπισκοπήσεις των μέσων κοινωνικής δικτύωσης, αποτελώντας ένα πρακτικό μέρος του τεχνικού SEO.

Οι προεπισκοπήσεις Open Graph και Twitter Card εμφανίζονται καλύτερα σε αναλογία 1.91:1 για τις εικόνες συνδέσμων, ενώ οι ακατάλληλες διαστάσεις περικόπτονται απρόβλεπτα στη ροή ειδήσεων.

Στην αναζήτηση, οι οδηγίες δομημένων δεδομένων της Google για τις εικόνες συνιστούν την παροχή πολλαπλών αναλογιών διαστάσεων (16:9, 4:3 και 1:1), ώστε η μηχανή αναζήτησης να μπορεί να επιλέξει την καλύτερη περικοπή για κάθε επιφάνεια προβολής. Στην ίδια τη σελίδα, η δήλωση αναλογιών εικόνας αποτρέπει τη μετατόπιση σχεδιασμού που επηρεάζει αρνητικά τα Core Web Vitals.

Συνεπώς, η επιλογή της σωστής αναλογίας κατά την εξαγωγή βελτιώνει τόσο την εμφάνιση στις πλατφόρμες κοινωνικής δικτύωσης όσο και τη σταθερότητα της σελίδας που επιβραβεύουν τα συστήματα κατάταξης.

Το πιο συνηθισμένο λάθος στην αναλογία διαστάσεων είναι η ανεξάρτητη αλλαγή μεγέθους πλάτους και ύψους, η οποία τεντώνει την εικόνα και παραμορφώνει κάθε σχήμα μέσα σε αυτήν. Κλειδώνετε πάντα την αναλογία κατά την αλλαγή κλίμακας.

• Ένα δεύτερο σφάλμα είναι η σύγχυση της αναλογίας με την ανάλυση: οι αναλύσεις 1280x720 και 1920x1080 έχουν ακριβώς το ίδιο σχήμα επειδή και οι δύο είναι 16:9, επομένως τα περισσότερα pixel δεν αλλάζουν την αναλογία.
• Άλλοι ξεχνούν ότι η μετατροπή μεταξύ αναλογιών απαιτεί περικοπή ή συμπλήρωση περιθωρίων και όχι συμπίεση, καθώς και ότι η στρογγυλοποίηση μιας υπολογισμένης διάστασης σε μη ακέραιο pixel μπορεί να προκαλέσει ένα ατελές άκρο ενός pixel.
• Τέλος, η μεταφόρτωση λανθασμένης αναλογίας σε πλατφόρμες όπως το YouTube ή το Instagram ενεργοποιεί αυτόματο letterboxing ή περικοπή, επομένως προσαρμόστε την αναλογία προορισμού πριν από την εξαγωγή αντί να βασίζεστε στην πλατφόρμα για τη διόρθωσή της.