Οι σύγχρονες σελίδες και τα τμήματα Web έχουν σχεδιαστεί ώστε να ανταποκρίνονται πλήρως σε όλες τις συσκευές, πράγμα που σημαίνει ότι οι εικόνες που χρησιμοποιούνται στα τμήματα Web θα κλιμακώνονται διαφορετικά ανάλογα με το πού εμφανίζονται, τη διάταξη που χρησιμοποιείται και τη συσκευή στην οποία προβάλλονται. Για παράδειγμα, οι σύγχρονες σελίδες έχουν σχεδιαστεί για να έχουν εξαιρετική εμφάνιση σε κινητές συσκευές και η αυτόματη κλιμάκωση εικόνων συμβάλλει στη δημιουργία αυτής της ελκυστικής εμπειρίας.
Ποια μεγέθη εικόνας λειτουργούν καλύτερα;
Λόγω της αποκριτικής σχεδίασης σελίδας, δεν υπάρχει συγκεκριμένο ύψος ή πλάτος σε pixel που θα εξασφαλίσει ότι μια εικόνα θα διατηρήσει ένα συγκεκριμένο σχήμα σε όλες τις συσκευές και τις διατάξεις. Οι εικόνες αλλάζουν μέγεθος και περικόπτονται αυτόματα για να εμφανίσουν το καλύτερο δυνατό αποτέλεσμα σε διάφορες συσκευές και διατάξεις. Ωστόσο, υπάρχουν ορισμένες οδηγίες που μπορούν να σας βοηθήσουν να βεβαιωθείτε ότι οι εικόνες σας φαίνονται υπέροχες στις σελίδες σας.
Η εύρεση των καλύτερων μεγεθών εικόνας για τη σελίδα σας εξαρτάται από αυτούς τους παράγοντες:
- Αναλογίες εικόνας: η σχέση μεταξύ ύψους και πλάτους των εικόνων
- Διάταξη στηλών: ο τύπος και ο αριθμός των στηλών στη σελίδα σας
- Διάταξη Τμήματος Web: η διάταξη που επιλέγετε για το Τμήμα Web στο οποίο χρησιμοποιείται η εικόνα
Αναλογίες εικόνας
Οι αναλογίες εικόνας είναι η σχέση μεταξύ του πλάτους και του ύψους των εικόνων. Συνήθως, εκφράζεται ως δύο αριθμοί, όπως 3:2, 4:3 ή 16:9. Το πλάτος είναι πάντα ο πρώτος αριθμός. Για παράδειγμα, μια αναλογία 16:9 θα μπορούσε να είναι 1600 pixel πλάτος και 900 pixel ύψος. Εναλλακτικά, μπορεί να είναι 1920 x 1080, 1280 x 720 ή οποιοσδήποτε άλλος συνδυασμός πλάτους/ύψους που μπορεί να υπολογιστεί με ταχύτητα ίση με 16:9. Μπορείτε να βρείτε αριθμομηχανές αναλογιών εικόνας στο διαδίκτυο και σε ορισμένα εργαλεία επεξεργασίας φωτογραφιών που θα σας βοηθήσουν να προσδιορίσετε τις αναλογίες εικόνας των εικόνων σας.
Στις περισσότερες περιπτώσεις, οι εικόνες στα σύγχρονα τμήματα Web λειτουργούν καλύτερα σε όλες τις διατάξεις και τις συσκευές όταν έχουν αναλογίες εικόνας 16:9 ή 4:3, ανάλογα με τη διάταξη.
Διατάξεις στηλών
Μια σελίδα μπορεί να διαμορφωθεί με ενότητες που περιλαμβάνουν διαφορετικούς τύπους στηλών και διατάξεις, όπως στήλες πλήρους πλάτους, μία στήλη, δύο στήλες, τρεις στήλες, το ένα τρίτο αριστερά και το ένα τρίτο δεξιά στήλες. Ένας γενικός κανόνας για τις εικόνες που αναμένεται να γεμίσουν το πλάτος μιας στήλης είναι ότι έχουν τουλάχιστον το πλάτος της στήλης στην οποία έχουν τοποθετηθεί. Για παράδειγμα, μια εικόνα σε ένα τμήμα Web εικόνας σε μια στήλη πρέπει να έχει πλάτος τουλάχιστον 1204 pixel.
Ακολουθούν οι οδηγίες πλάτους για καθεμία από τις διατάξεις στηλών:
| Διάταξη | Πλάτος σε pixel |
|---|---|
| Στήλη πλήρους πλάτους | 1920 |
| Μία στήλη | 1204 |
| Δύο στήλες | 586 ανά στήλη |
| Τρεις στήλες | 380 ανά στήλη |
| Το ένα τρίτο της αριστερής στήλης | 380 για την αριστερή στήλη. 792 για τη δεξιά στήλη |
| Ένα τρίτο δεξιά στήλη | 792 για την αριστερή στήλη. 380 για τη δεξιά στήλη |
Λόγω της γρήγορης απόκρισης των σελίδων, οι εικόνες σε στήλες πλήρους πλάτους θα εμφανίζονται πάντα σε πλήρες πλάτος της οθόνης σας με αυτόματο ύψος με βάση το μέγεθος της οθόνης.
Το ύψος των εικόνων που τοποθετούνται σε άλλες διατάξεις στηλών εξαρτάται από τις αναλογίες εικόνας. Ακολουθούν οδηγίες ύψους/πλάτους για αναλογίες εικόνας 16:9 και 4:3 (στρογγυλοποίηση επάνω/κάτω στο πλησιέστερο pixel). Αυτό είναι χρήσιμο για να διατηρείτε τις εικόνες σας σε πλάτος και ύψος που προσαρμόζεται κατάλληλα για κινητές συσκευές, για παράδειγμα:
| ΑΝΑΛΟΓΊΕΣ ΕΙΚΌΝΑΣ ΔΙΑΤΑΞΗ |
16 x 9 Πλάτος x Ύψος σε pixel |
4 x 3 Πλάτος x Ύψος σε pixel |
|---|---|---|
| Μία στήλη | 1204 x 677 | 1204 x 903 |
| Δύο στήλες | 586 x 330 | 586 x 439 |
| Τρεις στήλες | 380 x 214 | 380 x 285 |
| Το ένα τρίτο της αριστερής στήλης | 380 x 446 για αριστερή στήλη. 792 x 446 για δεξιά στήλη | 380 x 594 για την αριστερή στήλη. 792 x 594 για δεξιά στήλη |
| Ένα τρίτο δεξιά στήλη | 792 x 446 για την αριστερή στήλη. 380 x 446 για δεξιά στήλη | 792 x 594 για αριστερή στήλη. 380 x 594 για τη δεξιά στήλη |
Διατάξεις Τμήματος Web
Οι διατάξεις στα τμήματα Web που χρησιμοποιείτε θα επηρεάσουν επίσης τον τρόπο κλιμάκωσης των εικόνων σας. Τα παρακάτω παραδείγματα δείχνουν διάφορα τμήματα Web και ορισμένες από τις επιλογές και τις αναλογίες εικόνας που μπορείτε να χρησιμοποιήσετε.
| Τμήμα Web κύριου στοιχείου | Οι ακόλουθες αναλογίες εικόνας για τις διατάξεις πλακιδίων και επιπέδων είναι:
|
| Τμήμα Web επισημασμένου περιεχομένου | 16:9 είναι οι αναλογίες εικόνας για τις διατάξεις καρουζέλ, λωρίδας φιλμ και πλέγματος. Ακολουθεί ένα παράδειγμα αναλογίας εικόνας 16:9. Η πρώτη εικόνα εμφανίζει τη διάταξη "Λωρίδα φιλμ" και η δεύτερη εμφανίζει τη διάταξη "Πλέγμα": 
|
| Τμήμα Web εικόνας | Οι εικόνες θα αναπτυχθούν στο πλάτος της ενότητας που περιέχει το τμήμα Web. Ακολουθεί ένα παράδειγμα εικόνας στο τμήμα Web "Εικόνα" που χρησιμοποιεί αναλογίες εικόνας 16:9. 
Έχετε επίσης την επιλογή να αλλάξετε τις αναλογίες εικόνας ή να κάνετε ελεύθερη περικοπή χρησιμοποιώντας το εργαλείο επεξεργασίας εικόνας ή να χρησιμοποιήσετε τις λαβές αλλαγής μεγέθους για να κάνετε την εικόνα σας μεγαλύτερη ή μικρότερη. 
|
| Τμήμα Web συλλογής εικόνων | Οι παρακάτω αναλογίες εικόνας μπορούν να χρησιμοποιηθούν σε διαφορετικές διατάξεις:
|
| Τμήμα Web ειδήσεων | Ανάλογα με τη διάταξη, οι εικόνες στο τμήμα Web "Ειδήσεις" μπορεί να είναι 4:3, 16:9 ή 21:9. Ακολουθεί ένα παράδειγμα εικόνων σε διάταξη Top story και καρουζέλ: 
|
| Περιοχή τίτλου σελίδας | Οι εικόνες εμφανίζονται καλύτερα όταν είναι οριζόντιες ή 16:9 ή μεγαλύτερες σε αναλογίες εικόνας και όταν έχουν μέγεθος τουλάχιστον 1 MB. Επίσης, φροντίστε να ορίσετε ένα σημείο εστίασης για να διατηρείτε ορατό το πιο σημαντικό τμήμα της εικόνας, ειδικά όταν η εικόνα χρησιμοποιείται σε μικρογραφίες, διατάξεις ειδήσεων και αποτελέσματα αναζήτησης. Παράδειγμα (αρχική εικόνα 16:9) με σημείο εστίασης στο ηχείο: 
|
| Μικρογραφία σελίδας | Οι μικρογραφίες σελίδων εμφανίζονται σε σημεία όπως αποτελέσματα αναζήτησης, αποτελέσματα επισημασμένου περιεχομένου, δημοσιεύσεις ειδήσεων και άλλα. Από προεπιλογή, η μικρογραφία προέρχεται από την περιοχή τίτλου σελίδας ή από το τμήμα Web που είναι στην πρώτη σειρά στη σελίδα (όπως στην επάνω αριστερή πλευρά μιας διάταξης σελίδας). Μπορείτε να παρακάμψετε την προεπιλογή και να αλλάξετε τη μικρογραφία σελίδας. Όταν το κάνετε αυτό, είναι καλύτερο να χρησιμοποιήσετε μια εικόνα με αναλογίες εικόνας 16:9. Παράδειγμα (αρχική εικόνα 16:9): 
|
| Τμήμα Web γρήγορων συνδέσεων | Το τμήμα Web "Γρήγορες συνδέσεις" έχει έξι διαφορετικές διατάξεις. Ακολουθούν οι προκαθορισμένες αναλογίες εικόνας:
|
Συμβουλή
Όταν προσθέτετε μια εικόνα σε μια περιοχή τίτλου σελίδας ή σε ένα τμήμα Web κύριου στοιχείου, είναι επίσης καλύτερο να ορίσετε το σημείο εστίασης στην περιοχή της εικόνας που θέλετε να εμφανίζεται πάντα. Για να μάθετε περισσότερα σχετικά με τον ορισμό ενός εστιακού σημείου για αυτά τα δύο σενάρια, ανατρέξτε στα θέματα Χρήση του τμήματος Web κεντρικής ενότητας και Δημιουργία και χρήση σύγχρονων σελίδων σε μια τοποθεσία του SharePoint.
Προτάσεις εικόνων κεφαλίδας τοποθεσίας
Εκτός από τις σελίδες, μπορείτε να προσθέσετε προσαρμοσμένα λογότυπα ή εικόνες σε μια εκτεταμένη διάταξη. Ακολουθούν προτάσεις μεγέθους για αυτά τα στοιχεία.
| Στοιχείο | Περιγραφή | Σύσταση Πλάτος x Ύψος σε pixel |
|---|---|---|
| Λογότυπο τοποθεσίας | Μεγαλύτερο λογότυπο που μπορεί να είναι μη τετράγωνο και διαφανές, ανάλογα με το σχέδιο που αποστέλλεται. | 192 x 64 Μορφή: PNG, JPEG, SVG (Το SVG δεν επιτρέπεται σε τοποθεσίες που συνδέονται με ομάδες) |
| Μικρογραφία λογότυπου τοποθεσίας | Μια τετράγωνη μικρογραφία λογότυπου που χρησιμοποιείται εάν δεν έχει αποσταλεί κανένα λογότυπο τοποθεσίας ή σε σημεία όπου απαιτείται τετράγωνη μορφή. Αυτό το στοιχείο είναι υποχρεωτικό. |
64 x 64 Μορφή: PNG, JPEG, SVG (Το SVG δεν επιτρέπεται σε τοποθεσίες που συνδέονται με ομάδες) |
| Λογότυπο τοποθεσίας εκτεταμένης διάταξης | Η διάταξη εκτεταμένης κεφαλίδας έχει εκτεταμένο πλάτος λογότυπου τοποθεσίας. | 300 x 64 Μορφή: JPEG, PNG, SVG |
| Εικόνα φόντου εκτεταμένης διάταξης | Μια νέα εικόνα φόντου που μπορεί να χρησιμοποιηθεί με την εκτεταμένη κεφαλίδα. | 2560 x 164 Μορφή: JPEG, PNG |