Ο μύθος του DPI
Το μέγεθος μιας εικόνας σε μια διάταξη ιστότοπου είναι σημαντικό. Από τη σωστή ευθυγράμμιση στη λήψη της σωστής ποσότητας λευκού χώρου, ο σωστός υπολογισμός των φωτογραφιών και των γραφικών εκ των προτέρων είναι απαραίτητος για τη δημιουργία ισορροπημένης εμφάνισης.
Οι εικόνες στον ιστό μετρώνται σε εικονοστοιχεία . Ωστόσο, πολλοί άνθρωποι περνούν από το πρόβλημα να ορίσουν τις εικόνες τους σε 72 κουκίδες ανά ίντσα (
Η εσφαλμένη αντίληψη σχετικά με την ανάλυση σε ψηφιακές εικόνες που προορίζονται για τον ιστό είναι ότι πρέπει να πληρούν έναν ορισμένο αριθμό κουκίδων ανά ίντσα.
Στην εκτύπωση, τα εικονοστοιχεία ανά ίντσα και οι κουκίδες ανά ίντσα επηρεάζουν το μέγεθος μιας εικόνας σε μια σελίδα. Το DPI δεν ισχύει για τη διάταξη στο διαδίκτυο.
Όταν κάποιος μετατρέπει μια εικόνα σε 72 DPI , προσθέτουν ένα επιπλέον βήμα χωρίς κέρδος. Οι ιστοσελίδες μετρώνται σε εικονοστοιχεία, όχι σε μονάδες πραγματικού κόσμου όπως ίντσες.
Όταν κάποιος σας ρωτάει για μια εικόνα ιστού που λέγεται ότι είναι πλάτος δύο ίντσες, εκτιμούν πώς θα εμφανίζονταν στην οθόνη τους. Χωρίς να αλλάξουμε τις διαστάσεις των εικονοστοιχείων της εικόνας, η εικόνα αυτή θα εμφανίζεται μεγαλύτερη ή μικρότερη σε διαφορετικές οθόνες-και μάλιστα θα φαίνεται διαφορετική στην ίδια οθόνη σε διαφορετική ρύθμιση ανάλυσης.
Το μέγεθος των εικονοστοιχείων εξαρτάται από το πλαίσιο
Ένα εικονοστοιχείο (το οποίο είναι κοντό για το "στοιχείο εικόνας") είναι η μικρότερη μονάδα μέτρησης σε ένα πλέγμα που εμφανίζει μια ψηφιακή εικόνα. Το DPI μετρά πόσο μεγάλα είναι τα εικονοστοιχεία ή οι κουκκίδες όταν εκτυπώνονται.
Η παρακάτω εικόνα εμφανίζεται σε διαφορετικές τιμές DPI .
36 DPI
150 DPI
3,096 DPI
Κατεβάστε και ανοίξτε τα σε έναν επεξεργαστή εικόνων για να δείτε μόνοι σας. Και τα τρία φαίνονται τα ίδια επειδή έχουν αλλάξει το μέγεθος τους και δεν έχουν επαναληφθεί.
Αλλαγή μεγέθους αλλαγών μεγέθους pixel? Επαναδιαγραφή αλλαγών Pixel Count
Υπάρχουν δύο τρόποι για να μεγεθύνετε μια εικόνα: προσθέστε περισσότερα εικονοστοιχεία ή μεγεθύνετε τα εικονοστοιχεία. Παρομοίως, μπορείτε να μειώσετε το μέγεθος μιας εικόνας με το ξύρισμα pixels ή συρρικνούμενων εικονοστοιχείων. Αλλά η συρρίκνωση και το ξύρισμα είναι δύο διαφορετικές διαδικασίες.
Εμφανίζεται παραπάνω, η αλλαγή μεγέθους μιας εικόνας αλλάζει το μέγεθος των εικονοστοιχείων της και όχι τον αριθμό των εικονοστοιχείων. Δεν αυξάνουμε ή μειώνουμε τον αριθμό των εικονοστοιχείων, αλλάζουμε μόνο το μέγεθος αυτών των εικονοστοιχείων όταν εκτυπώνονται. Είναι μια αντίστροφη σχέση: οι εικόνες με μεγαλύτερα εικονοστοιχεία θα έχουν χαμηλότερη πυκνότητα εικονοστοιχείων (λιγότερα εικονοστοιχεία στον ίδιο αριθμό ιντσών) όταν εκτυπώνονται.
Εμφανίζεται παραπάνω, η αναδειγματοληψία αλλάζει το μέγεθος της εικόνας αυξάνοντας ή μειώνοντας τον αριθμό των pixel. Οι εικόνες με περισσότερα pixel θα περιέχουν περισσότερες πληροφορίες και συχνά θα κάνουν πιο πλούσια γραφικά.
Ο σχεδιασμός ιστοσελίδων αφορά την επαναδειγματοληψία και όχι την αλλαγή μεγέθους, διότι κάθε εικονοκύτταρο σε μια ιστοσελίδα θα είναι πάντα το ίδιο μέγεθος. Μια ιστοσελίδα με πλάτος 800 pixel μπορεί να φιλοξενήσει εικόνες πλάτους έως και 800 pixel. Κάνοντας κάθε pixel ευρύτερο δεν αλλάζει το γεγονός ότι η διάταξη μπορεί να κρατήσει μόνο 800 από αυτά.
Δεν μπορείτε να κάνετε μια εικόνα να εμφανίζεται μεγαλύτερη στην οθόνη με την αλλαγή μεγέθους των εικονοστοιχείων, επειδή κάθε εικονοκύτταρο στην ίδια οθόνη θα είναι πάντα το ίδιο μέγεθος.
Αλλαγή μεγέθους και επαναδειγματοληψία στο Photoshop
Το πλαίσιο μεγέθους εικόνας του Photoshop ( Εικόνα, Μέγεθος εικόνας ) ελέγχει τόσο την αλλαγή μεγέθους όσο και την επαναδειγματοληψία εικόνων.
Το πλαίσιο ελέγχου "Resample" αλλάζει πόσες εικονοστοιχείες χωρούν σε γραμμική ίντσα - κυριολεκτικά τα εικονοστοιχεία ανά ίντσα. Εάν απενεργοποιήσουμε την αναδειγματοληψία, ο μόνος τρόπος να αλλάξουμε το μέγεθος της εικόνας θα ήταν να μεγεθύνουμε τα εικονοστοιχεία για την εκτύπωση.
Με την αφαίρεση του πλαισίου αναδειγματοληψίας, η αλλαγή του πλαισίου "ανάλυσης" θα άλλαζε το φυσικό μέγεθος της εικόνας κατά την εκτύπωση, αλλά όχι τον αριθμό των εικονοστοιχείων. Όταν εκτυπωθεί, μια εικόνα θα φαίνεται μεγαλύτερη ή μικρότερη. Σε μια ιστοσελίδα, θα ήταν το ίδιο μέγεθος.
Ενα πείραμα
Το να διαπιστωθεί εάν το DPI έχει σημασία σε διαμόρφωση ιστού μπορεί να γίνει με ένα μικρό πείραμα. Εάν αλλάξουμε μια εικόνα από 300 x 100 pixels σε 72 DPI σε 300 x 100 pixels στα 144 DPI, πόσες εικονοστοιχείες θα είχαμε;
- Κάντε μια εικόνα 300 pixels πλάτος και 100 pixels ψηλό, στα 72 DPI .
- Ας κάνουμε κάποια μαθηματικά. Πόσα pixels θα ήταν αυτό;
- Τώρα, αλλάξτε το μέγεθος της εικόνας σε 300 x 100 pixels στα 144 DPI .
- Ας κάνουμε περισσότερα μαθηματικά. Πόσα pixels είναι αυτά;
Οι απαντήσεις είναι:
- 300 χ 100 = 30.000
- 300 x 100 εξακολουθεί να είναι 30.000
Pixel ανά ίντσα στην οθόνη
Ο αριθμός των εικονοστοιχείων ανά ίντσα εξακολουθεί να είναι σχετικός σε απευθείας σύνδεση, αλλά οι ρυθμίσεις DPI δεν επηρεάζουν τον τρόπο προβολής μιας εικόνας.
Οι οθόνες υπολογιστών μπορούν να μετρηθούν φυσικά σε ίντσες και κάθε μία εμφανίζει έναν ορισμένο αριθμό εικονοστοιχείων. Για παράδειγμα, ας πούμε ότι μια οθόνη 19 "εμφανίζει 1280 x 1024 pixels. Ο χρήστης μπορεί να αλλάξει για να εμφανίσει 1600 x 1200 εικονοστοιχεία, αυξάνοντας έτσι το PPI του (δηλ. Προσθέτοντας περισσότερα εικονοστοιχεία στον ίδιο αριθμό ιντσών.) Η σημαντική διαφορά στην εκτύπωση είναι ότι μπορείτε να ελέγξετε τα pixel-ανά-ίντσα της εικόνας.
Μπορείτε να το δοκιμάσετε στους περισσότερους σύγχρονους υπολογιστές. Σε Mac, μεταβείτε στο Apple Menu (Μενού της Apple), στο System Preferences (Προτιμήσεις συστήματος ) και, στη συνέχεια, κάντε κλικ στο "Display" (Εμφανίζει) για να δείτε τις διάφορες αναλύσεις στις οποίες μπορείτε να ρυθμίσετε την οθόνη σας. Για Windows, κάντε δεξί κλικ στην επιφάνεια εργασίας και επιλέξτε "Εξατομίκευση" και, στη συνέχεια, επιλέξτε "Ρυθμίσεις οθόνης". Αλλάξτε την ανάλυση οθόνης (αριθμός εικονοστοιχείων) και παρακολουθήστε τα στοιχεία της επιφάνειας εργασίας Mac ή PC σας μεγαλύτερα ή μικρότερα.
Προφανώς, η οθόνη σας δεν αλλάζει σε μέγεθος. Αλλά αν κρατάτε ένα χάρακα στην οθόνη, θα δείτε ότι το μέγεθος των εικονιδίων και των παραθύρων είναι αντιστρόφως ανάλογο του αριθμού των pixel που εμφανίζονται. Για παράδειγμα, ένα φορητό υπολογιστή 13 ιντσών, οθόνη CRT 17 ιντσών και οθόνη επίπεδης οθόνης 21 ιντσών μπορούν όλοι να παρουσιάσουν μια επιφάνεια εργασίας που μετρά 1024 x 768 εικονοστοιχεία. Περισσότερα εικονοστοιχεία σημαίνουν μικρότερα εικονίδια. λιγότερα εικονοστοιχεία σημαίνουν μεγαλύτερα εικονίδια. Τα περισσότερα εικονοστοιχεία στην ίδια οθόνη σας δίνουν μεγαλύτερη πυκνότητα εικονοστοιχείων. λιγότερα εικονοστοιχεία είναι χαμηλότερα.
Η διαφορά γίνεται πιο αισθητή με άλλους τύπους οθονών:
- Μια ψηφιακή πινακίδα μέτρησης 47 x 12 ποδιών μπορεί να χρησιμοποιεί μόνο 888 x 240 pixels (περίπου 1,6 PPI).
- Μια οθόνη iPhone σήμερα μέτρα 2 x 3 ίντσες και κατέχει 320 x 480 pixels (περίπου 160 PPI) .
Ένα ενιαίο αρχείο PNG που μετρά 100 x 100 εικονοστοιχεία θα ταιριάζει τόσο στην πινακίδα 888 x 240 όσο και στο iPhone 320 x 480. Αλλά θα φαινόταν πολύ μεγαλύτερο στην πινακίδα γιατί τα εικονοστοιχεία του πίνακα είναι 100 φορές μεγαλύτερα από το iPhone (1,6 έναντι 160).
Η παρακάτω εικόνα δείχνει δύο συσκευές με διαφορετικές διαστάσεις pixel.
Η ίδια εικόνα προβάλλεται σε δύο διαφορετικές οθόνες. Οι διαφορές στο PPI κάθε οθόνης καθιστούν την εικόνα στην δεξιά οθόνη μεγαλύτερη, αν και έχει λιγότερα εικονοστοιχεία συνολικά.
Μπορείτε να το δοκιμάσετε μόνοι σας:
- Δημιουργήστε ένα αρχείο JPG που μετρά 960 x 100 εικονοστοιχεία, σε οποιαδήποτε πυκνότητα εικονοστοιχείων.
- Μετρήστε το με το χέρι με ένα χάρακα.
- Δείτε την ίδια εικόνα σε έναν υπολογιστή με μεγαλύτερη ή μικρότερη οθόνη. Για παράδειγμα, εάν δημιουργήσατε την εικόνα σε οθόνη 20 ", δοκιμάστε την σε φορητό υπολογιστή 13".
- Εκτυπώστε τον ίδιο αριθμό εικονοστοιχείων σε διαφορετικές πυκνότητες εικονοστοιχείων για να δείτε διαφορετικά μεγέθη σε χαρτί.
Το αποτέλεσμα είναι ότι αυτή η μία εικόνα θα έχει τον ίδιο αριθμό εικονοστοιχείων αλλά διαφορετικό πλάτος σε ίντσες. Η διάταξη του ιστότοπου θα εμφανίζεται σε διαφορετικά μεγέθη, παρά τον ίδιο κωδικό. (Για μια ακραία περίπτωση, κοιτάξτε ολόκληρη τη σελίδα σε ένα iPhone 960 εικονοστοιχεία τοποθετούνται σε τρία ίντσες ή λιγότερο, χωρίς να αλλάξει το ίδιο το αρχείο.)
Γιατί το 72 είναι σημαντικό
Πολλές μορφές αρχείων, συμπεριλαμβανομένων των JPG, TIF και PSD, αποθηκεύουν τη ρύθμιση πυκνότητας εικονοστοιχείων εικόνας. Αν αποθηκεύσετε ένα αρχείο JPG στα 200 εικονοστοιχεία / ίντσα, θα παραμείνει στα 200.
Άλλες μορφές, συμπεριλαμβανομένων των GIF και PNG, απορρίπτουν την πυκνότητα των pixel. Εάν αποθηκεύσετε μια εικόνα 200 DPI ως PNG, δεν θα αποθηκευτεί καθόλου αυτό το DPI. Πολλοί συντάκτες εικόνας, συμπεριλαμβανομένου του Adobe Photoshop, υποθέτουν ότι η εικόνα είναι 72
Εβδομήντα δύο είναι ένας μαγικός αριθμός στην εκτύπωση και τυπογραφία. Το 1737 ο Pierre Fournier χρησιμοποίησε μονάδες που ονομάζονταν ciceros για να μετρήσουν τον τύπο. Έξι κύπερα ήταν 0,998 ίντσες.
Περίπου το 1770, ο François-Ambroise Didot χρησιμοποίησε ελαφρώς μεγαλύτερα cikeros για να ταιριάζει με το πρότυπο γαλλικό "πόδι". Το pica του Didot ήταν 0.1776 ίντσες και διαιρέθηκε ομοιόμορφα σε 12 βήματα. Σήμερα τους αποκαλούμε σημεία.
Το 1886, το αμερικανικό σημείο σύστημα καθιέρωσε μια "pica" ως 0.166 ίντσες. Έξι από αυτά είναι 0,996 ίντσες.
Καμία από τις μονάδες δεν απέφυγε ποτέ από τα 12 σημεία ανά pica: 6 picas ανά ίντσα = 72 σημεία ανά ίντσα. Ήταν ένα σημαντικό πρότυπο από το 1984, όταν η Apple προετοίμασε να εισαγάγει τον πρώτο υπολογιστή Macintosh. Η διεπαφή του Mac σχεδιάστηκε για να βοηθήσει τους ανθρώπους να συσχετίσουν τον υπολογιστή με τον φυσικό κόσμο. Οι μηχανικοί λογισμικού χρησιμοποίησαν τη μεταφορά ενός γραφείου για να περιγράψουν τις αστείες λειτουργίες ενός υπολογιστή, ακριβώς κάτω από τα εικονίδια "χαρτί", "φάκελο" και "σκουπίδια".
Κάθε εικονοστοιχείο στην αρχική οθόνη Mac 9 ιντσών (διαγώνιος) και 512 x 342 pixel μετρήθηκε ακριβώς 1 x 1 σημείο. Κρατήστε ένα χάρακα στο γυαλί, και θα δείτε ότι 72 εικονοστοιχεία θα γεμίσει πραγματικά 1 ίντσα. Με αυτόν τον τρόπο, εάν εκτυπώσατε μια εικόνα ή κομμάτι κειμένου και την κρατήσατε δίπλα στην οθόνη, τόσο η εικόνα όσο και το έντυπο αντίγραφο θα είχαν το ίδιο μέγεθος.
Αλλά οι πρόωρες ψηφιακές εικόνες ήταν αστραφτερές και οδοντωτές. Καθώς η τεχνολογία οθόνης και η μνήμη βελτιώθηκαν, οι υπολογιστές μπόρεσαν να εμφανίσουν περισσότερα pixel στην οθόνη του ιδίου μεγέθους. Η αντιστοίχιση μιας εκτύπωσης στην οθόνη έγινε ακόμα πιο σίγουρη όταν οι εφαρμογές ράστερ και φορέα επέτρεψαν στους χρήστες να μεγεθύνουν και να εξετάζουν προσεκτικά τα εικονοστοιχεία. Μέχρι τα μέσα της δεκαετίας του 1990, τα Microsoft Windows θα μπορούσαν να αλλάξουν μεταξύ 72 και 96 εικονοστοιχεία ανά ίντσα στην οθόνη. Αυτό έκανε μικρότερα μεγέθη γραμματοσειρών πιο ευανάγνωστα, επειδή περισσότερα εικονοστοιχεία ήταν διαθέσιμα ανά μέγεθος σημείων.
Σήμερα, τόσο οι σχεδιαστές όσο και οι πελάτες καταλαβαίνουν ότι τα μεγέθη των αντικειμένων στην οθόνη δεν είναι απόλυτα. Οι διαφορές στο μέγεθος οθόνης και στη λειτουργία μεγέθυνσης είναι συνηθισμένες. Αλλά 72 εξακολουθεί να είναι η προεπιλογή.
Υψηλότερη οθόνη PPI σημαίνει καλύτερη αναγνωσιμότητα σε μικρότερα μεγέθη σημείων
Οι οθόνες με υψηλότερη τιμή PPI είναι εξαιρετικές για την ευκρίνεια. Τα περισσότερα εικονοστοιχεία ανά ίντσα καθιστούν ευανάγνωστα τα γράμματα. Σημαίνει επίσης ότι οι εικόνες και το κείμενο πρέπει να είναι μεγαλύτερες (σε εικονοστοιχεία) ώστε να είναι ευανάγνωστες.
Το δείγμα κειμένου παραπάνω έχει αλλάξει από δύο διαφορετικές ρυθμίσεις PPI οθόνης. Η κορυφαία σειρά έχει μικρότερα εικονοστοιχεία (δηλαδή υψηλότερη τιμή PPI στην οθόνη), οπότε 8 βαθμοί είναι το μικρότερο ευανάγνωστο μέγεθος γραμματοσειράς. Το κείμενο στην κάτω σειρά είναι ελάχιστα ευανάγνωστο κάτω από 10 μονάδες.
Καθώς οι οθόνες υπολογιστών υπερέβησαν την πυκνότητα των εικονοστοιχείων των οθονών Mac στα μέσα της δεκαετίας του 1990, οι ιστότοποι που κατασκευάστηκαν στα Windows εμφάνιζαν μικρότερα μεγέθη γραμματοσειρών, πολλά για την απογοήτευση των χρηστών Mac. Σήμερα, οι οθόνες και για τις δύο πλατφόρμες απολαμβάνουν πυκνότητες εικονοστοιχείων αρκετά υψηλές ώστε να επηρεάζουν τις διαφορές.
Ελαστικές εικόνες ιστού με σύγχρονα προγράμματα περιήγησης
Γνωρίζουμε τώρα ότι μόνο το DPI δεν αλλάζει το μέγεθος ενός είδωλου στον ιστό και δεν έχουμε κανέναν έλεγχο για το ποια συσκευή εμφανίζεται μια εικόνα. Επομένως, το pixel της εικόνας είναι το μόνο πράγμα που έχει σημασία; Ναι ... για τώρα.
Οι διατάξεις πλάτους υγρών, οι οποίες αλλάζουν ανάλογα με το μέγεθος του προγράμματος περιήγησης, μπορούν να φιλοξενήσουν καλύτερα μια σειρά συσκευών και οθονών. Τα σύγχρονα προγράμματα περιήγησης, από το FireFox 3, το Safari 3 και τον Internet Explorer 7 και επάνω, είναι καλύτερα από τις παλαιότερες εκδόσεις για την κλιμάκωση εικόνων σε λειτουργία. ο max-width Η ιδιότητα CSS αναγκάζει τις εικόνες να χωρέσουν στο κοντέινερ τους αλλά να μην ξεπεράσουν το πραγματικό τους μέγεθος. Για παράδειγμα:
p { width: 25% } / * Ένα τέταρτο της περιοχής περιεχομένου * / img { max-width: 100% }
p { width: 50% } / * Το μισό της περιοχής περιεχομένου * / img { max-width: 100% }
p { width: 75% } / * Τρία τέταρτα της περιοχής περιεχομένου * / img { max-width: 100% }
/ * Δεν έχει οριστεί πλάτος για την παράγραφο * / img { max-width: 100% }
Εδώ βλέπουμε μία εικόνα πλάτους 800 pixel ταιριάζουν σε τέσσερα στοιχεία παραγράφου διαφορετικού μεγέθους. Εάν το πλάτος της σελίδας ήταν ευέλικτο, η αλλαγή μεγέθους του παραθύρου του προγράμματος περιήγησης θα επέκτεινε την εικόνα - αλλά όχι πέρα από τις αρχικές διαστάσεις 800 x 323 pixel. Ποτέ δεν θα γίνει στρέβλωση, ή "pixellated", από υπερβολική επέκταση.
Η προετοιμασία εικόνων για τον ιστό σημαίνει σχεδιασμό σε εικονοστοιχεία. Αν κάποιος ζητήσει γραφικό 2 ιντσών για τον ιστό, όχι για εκτύπωση, ρωτήστε τον: "Πόσο μεγάλα είναι τα εικονοστοιχεία σας;"
Γράφτηκε αποκλειστικά για WDD από Ο Ben Gremillion . Ο Ben είναι ανεξάρτητος σχεδιαστής ιστοσελίδων που επιλύει προβλήματα επικοινωνίας με καλύτερο σχεδιασμό.
Σε ποια μέσα μετράει το ψήφισμα; Ποιος είναι ο καλύτερος τρόπος για να μεγεθύνετε τις εικόνες στο διαδίκτυο; Μοιραστείτε τις ιδέες σας παρακάτω.