Αλλαγή μεγέθους εικόνας και προσαρμογή μεγέθους στις σύγχρονες σελίδες του SharePoint
Applies ToSharePoint στο Microsoft 365

Οι σύγχρονες σελίδες και τα τμήματα 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. Μπορείτε να βρείτε προγράμματα υπολογισμού αναλογιών στο Internet και σε ορισμένα εργαλεία επεξεργασίας φωτογραφιών για να σας βοηθήσουν να προσδιορίσετε τις αναλογίες εικόνας των εικόνων σας. 

Παραδείγματα αναλογιών εικόνας 16:9 και 4:3.

Στις περισσότερες περιπτώσεις, οι εικόνες στα σύγχρονα τμήματα 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 προσαρμόζεται ώστε να ακολουθεί αναλογίες εικόνας 8:3 και οι εικόνες μέσα στην κλίμακα του τμήματος Web με αναλογίες εικόνας 4:3.

  • Επίπεδα: Ένα μεμονωμένο επίπεδο προσαρμόζεται σε αναλογίες εικόνας 8:3 και οι εικόνες μέσα σε κάθε κλίμακα επιπέδου πλησιάζουν τις 16:9.

  • Σε κινητές συσκευές, η διάταξη καρουζέλ χρησιμοποιείται στις 16:9.

Ακολουθεί ένα παράδειγμα μιας εικόνας που εμφανίζεται στη διάταξη Επίπεδα (επάνω) και στη διάταξη Πλακίδια (κάτω):

Παράδειγμα εικόνων τμημάτων Web Κεντρικής ενότητας σε διατάξεις επιπέδων και πλακιδίων

Τμήμα Web επισημασμένων περιεχομένων

Οι αναλογίες εικόνας 16:9 για τις διατάξεις καρουζέλ, φιλμ και πλέγματος.

Ακολουθεί ένα παράδειγμα αναλογιών εικόνας 16:9. Η πρώτη εικόνα εμφανίζει τη διάταξη Φιλμ εικόνων και η δεύτερη εμφανίζει τη διάταξη Πλέγμα:

Το τμήμα Web Επισημασμένο περιεχόμενο με χρήση της διάταξης Filmstrip.

Η διάταξη Επισημασμένο περιεχόμενο Πλέγμα με αναπτυγμένες φωτογραφίες που εμφανίζονται.

Τμήμα Web εικόνας

Οι εικόνες θα αναπτυχθούν στο πλάτος της ενότητας που περιέχει το τμήμα Web. 

Ακολουθεί ένα παράδειγμα μιας εικόνας στο τμήμα Web Εικόνα που χρησιμοποιεί τις αναλογίες εικόνας 16:9.

Μια εικόνα στο τμήμα Web Εικόνα που χρησιμοποιεί την αναλογία Καρουζέλ 16:9.

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

Μια φωτογραφία που ανοίγει στο εργαλείο επεξεργασίας του SharePoint.

Τμήμα Web συλλογής εικόνων

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

  • Οι διατάξεις τούβλο και καρουζέλ σέβονται τις αναλογίες εικόνας όλων των εικόνων: 16:9, 1:1, 4:3 και ούτω καθεξής. 

  • Η διάταξη Πλέγμα επιτρέπει τρεις αναλογίες εικόνας: 1:1 τετράγωνο, πλάτος 16:9 και πρότυπο 4:3.

Η πρώτη εικόνα εμφανίζει τη διάταξη "Τούβλο" στοτμήμα Web Συλλογή εικόνων (διατηρώντας τις αναλογίες εικόνας 16:9 και 1:1). Η δεύτερη εικόνα εμφανίζει τη διάταξη Πλέγμα (χρησιμοποιώντας τις αναλογίες εικόνας 1:1).

Το τμήμα Web Συλλογή εικόνων με χρήση της επιλογής διάταξης από τούβλα.

Το τμήμα Web Συλλογή εικόνων με χρήση της επιλογής διάταξης πλέγματος.

Τμήμα Web ειδήσεων

Ανάλογα με τη διάταξη, οι εικόνες στο τμήμα Web Ειδήσεις μπορεί να είναι 4:3, 16:9 ή 21:9.

Ακολουθεί ένα παράδειγμα εικόνων σε μια κορυφαία ιστορία και μια διάταξη καρουζέλ:

Παραδείγματα εικόνων διατάξεων ειδήσεων

Περιοχή τίτλου σελίδας

Οι εικόνες έχουν καλύτερη εμφάνιση όταν έχουν οριζόντιο προσανατολισμό ή αναλογίες εικόνας 16:9 ή μεγαλύτερες και έχουν μέγεθος τουλάχιστον 1 MB. Επίσης, φροντίστε να ορίσετε ένα σημείο εστίασης για να διατηρήσετε το πιο σημαντικό τμήμα της εικόνας σε προβολή, ειδικά όταν η εικόνα χρησιμοποιείται σε μικρογραφίες, διατάξεις ειδήσεων και αποτελέσματα αναζήτησης.

Παράδειγμα (αρχική εικόνα 16:9) με σημείο εστίασης στο ηχείο:

Παράδειγμα εικόνας 16:9 στην περιοχή τίτλου σελίδας.

Μικρογραφία σελίδας

Οι μικρογραφίες σελίδων εμφανίζονται σε μέρη όπως τα αποτελέσματα αναζήτησης, τα αποτελέσματα επισημασμένων περιεχομένων, οι δημοσιεύσεις ειδήσεων και πολλά άλλα. Από προεπιλογή, η μικρογραφία προέρχεται από την περιοχή τίτλου σελίδας ή από το τμήμα Web που είναι στην πρώτη σειρά της σελίδας (όπως επάνω αριστερά μιας διάταξης σελίδας). Μπορείτε να παρακάμψετε την προεπιλογή και να αλλάξετε τη μικρογραφία της σελίδας. Όταν το κάνετε αυτό, είναι καλύτερα να χρησιμοποιήσετε μια εικόνα με αναλογίες εικόνας 16:9.

Παράδειγμα (αρχική εικόνα 16:9):

Παράδειγμα εικόνας μικρογραφίας σελίδας στο τμήμα Web επισημασμένων περιεχομένων

Τμήμα Web γρήγορων συνδέσεων

Το τμήμα Web Γρήγορες συνδέσεις έχει έξι διαφορετικές διατάξεις. Ακολουθούν οι προκαθορισμένες αναλογίες εικόνας:

  • Συμπύκνωση, Λίστα, Πλακίδια: 1:1, 4:3

  • Φιλμ εικόνων, Πλέγμα, Κουμπί: 16:9

Η πρώτη εικόνα εμφανίζει τη διάταξη Συμπύκνωση στοτμήμα Web Γρήγορες συνδέσεις. Η δεύτερη εικόνα εμφανίζει το ίδιο τμήμα Web Γρήγορες συνδέσεις χρησιμοποιώντας τη διάταξη Filmstrip.

Το τμήμα Web Γρήγορων συνδέσεων που εμφανίζει εικόνες μικρογραφιών για συνδέσεις.

Το τμήμα Web Γρήγορες συνδέσεις που εμφανίζει την αναλογία 16:9 για τις εικόνες.

Συμβουλές: 

Συστάσεις για την κεφαλίδα τοποθεσίας

Εκτός από τις σελίδες, μπορεί να θέλετε να προσθέσετε προσαρμοσμένα λογότυπα ή εικόνες σε μια εκτεταμένη διάταξη. Ακολουθούν προτάσεις μεγέθους για αυτά τα στοιχεία.

Στοιχείο

Περιγραφή

Σύσταση

Πλάτος 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

Χρειάζεστε περισσότερη βοήθεια;

Θέλετε περισσότερες επιλογές;

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

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