Οδηγός για αρχάριους σχετικά με τα μεγέθη εικόνων WordPress (+ βέλτιστες πρακτικές)

Ανακαλύψτε τα βασικά στοιχεία της αλλαγής μεγέθους εικόνας στο WordPress σε αυτόν τον εύκολο οδηγό για αρχάριους. Μάθετε πώς το WordPress δημιουργεί αυτόματα μικρογραφίες, μεσαίες και μεγάλες εκδόσεις εικόνας, γιατί αυτά τα μεγέθη έχουν σημασία για την εμφάνιση και την απόδοση του ιστότοπού σας και πώς WP Media Folder μπορεί να σας βοηθήσει να παραμείνετε οργανωμένοι.

 Αυτός ο οδηγός εξηγεί τα προεπιλεγμένα μεγέθη εικόνων WordPress (μικρογραφία, μεσαίο, μεγάλο), γιατί υπάρχουν και πώς να τα προσαρμόσετε για το θέμα σας. Θα μπορέσουμε επίσης να δούμε πώς το πρόσθετο WP Media Folder μπορεί να σας βοηθήσει να διαχειριστείτε τις εικόνες σας. Ακόμα και αν δεν είστε τεχνικοί, θα είναι εύκολο να το ακολουθήσετε. Αλλά θα μάθετε ακριβώς πώς το WordPress χειρίζεται τα μεγέθη εικόνων και πώς να τα προσαρμόσετε.

Επισκόπηση των προεπιλεγμένων μεγεθών εικόνων του WordPress

Όταν ανεβάζετε μια εικόνα στο WordPress, δημιουργούνται αυτόματα πολλές εκδόσεις αυτής της εικόνας για προβολή σε διαφορετικά σημεία στον ιστότοπό σας. Από προεπιλογή, το WordPress δημιουργεί:

• Μικρογραφία : μια τετράγωνη έκδοση 150 × 150 pixel. Χρησιμοποιείται συχνά σε λίστες προεπισκόπησης ιστολογίου, γραφικά στοιχεία και συλλογές.
• Μεσαίο : μια έκδοση κλιμακωμένη έτσι ώστε η μεγαλύτερη πλευρά να είναι 300 pixel. Εάν η εικόνα σας είναι ψηλότερη από το πλάτος της, μπορεί να έχει ύψος 300 και μικρότερο πλάτος ή αντίστροφα.
• Μεγάλο : μια έκδοση όπου η μεγαλύτερη πλευρά είναι 1024 pixel. Κατάλληλο για επιλεγμένες εικόνες πλήρους πλάτους ή κεφαλίδες αναρτήσεων ιστολογίου.
• Πλήρες : το ακριβές αρχείο που ανεβάσατε, χωρίς τροποποιήσεις.

Το WordPress επιλέγει το βέλτιστο μέγεθος για προβολή ανάλογα με το πού εμφανίζεται η εικόνα. Μια μικρή μικρογραφία σε μια λίστα αναρτήσεων προβάλλεται σε μέγεθος 150 × 150. Ένα banner με επιλεγμένη εικόνα μπορεί να χρησιμοποιήσει μέγιστο μέγεθος 1024px. Αυτό το σύστημα βελτιστοποιεί την ταχύτητα φόρτωσης, τη χρήση εύρους ζώνης και την εμφάνιση σε όλες τις συσκευές και τα μεγέθη οθονών.

Γιατί το WordPress δημιουργεί αυτά τα μεγέθη αυτόματα

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

Εάν η εικόνα που ανεβάσατε είναι μικρότερη από το μέγεθος που δημιουργεί το WordPress (για παράδειγμα, μια φωτογραφία πλάτους 800 px), το WordPress θα δημιουργήσει μόνο μεγέθη έως τις διαστάσεις που υποστηρίζει η εικόνα—επομένως το μεγάλο μέγεθος δεν θα υπερβαίνει το αρχικό μέγεθος.

Βέλτιστες πρακτικές για τη χρήση προεπιλεγμένων μεγεθών εικόνας

Ακολουθούν ορισμένες συνήθεις περιπτώσεις χρήσης για κάθε προεπιλεγμένο μέγεθος:

Μικρογραφίες

Χρησιμοποιήστε το για πλέγματα γκαλερί, προεπισκοπήσεις αναρτήσεων ιστολογίου, γραφικά στοιχεία ή λίστες πλευρικής γραμμής. Μην χρησιμοποιείτε μέγεθος μικρογραφίας για μεγάλη περιοχή προβολής. Θα εμφανίζεται με pixel.

Για αυτό το παράδειγμα, χρησιμοποιήσαμε μια συλλογή που δημιουργήθηκε με τον WP Media folder.

Μέσον

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

Μεγάλο μέγεθος

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

Δεν συνιστάται η μεταφόρτωση πολύ μεγάλων πρωτότυπων αρχείων (για παράδειγμα, χιλιάδες pixel σε πλάτος ή εικόνες TIFF ή PNG υψηλής ανάλυσης). Καταλαμβάνουν περισσότερο χώρο αποθήκευσης και μπορούν να επιβραδύνουν τον ιστότοπό σας ή τον διακομιστή επεξεργασίας πολυμέσων σας. Ιδανικά, μεταφορτώστε εικόνες με διαφορετικό μέγεθος ώστε να ταιριάζουν περίπου με το μέγιστο πλάτος εμφάνισης του θέματός σας (για παράδειγμα, πλάτος 1200 pixel εάν η περιοχή περιεχομένου σας είναι 1200 pixel).

Πώς να προσαρμόσετε τις διαστάσεις της εικόνας για το θέμα σας

Από προεπιλογή, το WordPress χρησιμοποιεί τα μεγέθη στις Ρυθμίσεις > Μέσα , αλλά ίσως θελήσετε να προσαρμόσετε αυτά τα μεγέθη ή να προσθέσετε νέα για τις απαιτήσεις του θέματός σας.

Αλλαγή προεπιλεγμένων διαστάσεων μέσω των οθονών διαχειριστή

Μεταβείτε στον πίνακα ελέγχου του WordPress > Ρυθμίσεις > Μέσα. Εδώ μπορείτε να αλλάξετε τις διαστάσεις των pixel για Μικρογραφία, Μεσαίο και Μεγάλο. Αφού κάνετε τις αλλαγές, αποθηκεύστε τις. Οι μελλοντικές μεταφορτώσεις θα χρησιμοποιούν τις νέες ρυθμίσεις.

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

Προσθήκη προσαρμοσμένων μεγεθών εικόνων στον κώδικα του θέματός σας

ΣΗΜΑΝΤΙΚΗ ΣΗΜΕΙΩΣΗ: Δεν πρέπει να εφαρμόσετε κανέναν προσαρμοσμένο κώδικα χωρίς να δημιουργήσετε πρώτα ένα αντίγραφο ασφαλείας.

Για να καταχωρήσετε νέα μεγέθη εικόνων πέρα ​​από τα thumbnail/medium/large, μπορείτε να προσθέσετε κώδικα στο αρχείο functions.php του θέματός σας ή σε ένα προσαρμοσμένο πρόσθετο. Παράδειγμα:

add_image_size( 'προσαρμοσμένη-λειτουργία', 800, 600, true ); 

Αυτό εγγράφει ένα νέο μέγεθος με το όνομα 'custom-feature', με πλάτος 800px, ύψος 600px και ενεργοποιημένη την περικοπή.

Στη συνέχεια, μπορείτε να το καλέσετε στα αρχεία θεμάτων σας:

the_post_thumbnail('προσαρμοσμένη-λειτουργία'); 

Ή στο Gutenberg μπορεί να δείτε το νέο μέγεθος στο αναπτυσσόμενο μενού μπλοκ εικόνας, εάν το θέμα σας το υποστηρίζει.

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

Βέλτιστες πρακτικές κατά την επιλογή των προσαρμοσμένων μεγεθών σας

• Αντιστοιχίστε τις διαστάσεις με τη διάταξη του θέματός σας. Για παράδειγμα, το μέγεθος του banner της κεφαλίδας, το μέγεθος της προτεινόμενης ανάρτησης ιστολογίου ή το πλάτος της εικόνας εντός άρθρου.
• Αποφύγετε την αλλαγή μεγέθους εικόνων σε μεγέθη πολύ μεγαλύτερα από τα κοντέινερ—σπαταλούν χώρο στο δίσκο και η φόρτωση γίνεται αργά.
• Χρησιμοποιήστε την περικοπή όταν θέλετε εικόνες με σταθερή αναλογία διαστάσεων, π.χ. 16:9 ή 4:3. Ορίστε την περικοπή σε true ή false ανάλογα με το αν προτιμάτε περικοπή ή αναλογική κλιμάκωση.
• Δοκιμάστε τις εικόνες που έχουν εισαχθεί μετά την προσθήκη προσαρμοσμένων μεγεθών για να βεβαιωθείτε ότι εμφανίζονται σωστά σε υπολογιστή και κινητό.

Αναγέννηση μικρογραφιών

Εάν αλλάξετε τα προεπιλεγμένα μεγέθη ή προσθέσετε νέα μεγέθη, οι παλιές εικόνες δεν θα έχουν αυτόματα τα νέα μεγέθη που θα δημιουργούνται. Χρησιμοποιήστε ένα πρόσθετο όπως το "Regenerate Thumbnails" ή παρόμοιο για να αναδημιουργήσετε όλα τα μεγέθη εικόνων για προηγούμενες μεταφορτώσεις. Αυτό διασφαλίζει ότι η βιβλιοθήκη πολυμέσων σας έχει τα κατάλληλα μεγέθη που μπορεί να προβάλει το WordPress σε διάφορα περιβάλλοντα.

Σύνοψη βέλτιστων πρακτικών

• Ανεβάστε εικόνες με μέγεθος κοντά στο μέγιστο πλάτος εμφάνισης του θέματός σας (π.χ., πλάτος 1200px). Αφήστε το WordPress να δημιουργήσει μικρότερα μεγέθη.
• Διατηρήστε τα προεπιλεγμένα μεγέθη στα 150px (μικρογραφία), 300px (μεσαίο) και 1024px (μεγάλο), εκτός εάν το θέμα σας απαιτεί διαφορετικές τιμές. Αλλάξτε τις τιμές από τις Ρυθμίσεις > Μέσα.
• Προσθέστε προσαρμοσμένα μεγέθη μέσω της add_image_size() στο θέμα ή τον κώδικα του πρόσθετου σας για μοναδικές περιοχές εμφάνισης (π.χ., hero banners, featured blocks).
• Αφού προσαρμόσετε τα μεγέθη ή προσθέσετε νέα, αναδημιουργήστε τις μικρογραφίες, ώστε το WordPress να δημιουργήσει αυτά τα μεγέθη για παλιές μεταφορτώσεις.
• Χρησιμοποιήστε περικοπή όταν απαιτείται σταθερή αναλογία διαστάσεων ή αναλογική κλιμάκωση όταν προτιμάτε να διατηρήσετε τις αρχικές αναλογίες.

Επιπλέον υπόδειξη: λάβετε υπόψη WP Media Folder αν χρειάζεστε οργάνωση βάσει φακέλων, βελτιωμένη αναζήτηση/φίλτρο πολυμέσων, ευκολότερη δημιουργία γκαλερί, αντικατάσταση πολυμέσων και άλλες βελτιώσεις στη ροή εργασίας. Λειτουργεί άψογα με τη ρύθμιση μεγέθους εικόνων σας.

Συμπέρασμα: Κύρια μεγέθη εικόνων WordPress για γρήγορους, όμορφους ιστότοπους

Η κατανόηση των μεγεθών εικόνων στο WordPress σάς βοηθά να προβάλλετε την κατάλληλη εικόνα στο σωστό μέρος. Οι μικρογραφίες, οι μεσαίες και οι μεγάλες έχουν σχεδιαστεί για να εξισορροπούν την ποιότητα και την απόδοση. Μπορείτε να προσαρμόσετε αυτά τα μεγέθη ή να προσθέσετε νέα ώστε να ταιριάζουν με τη διάταξη του θέματός σας. WP Media Folder προσφέρει δομή φακέλων, προηγμένη διαχείριση, εργαλεία αντικατάστασης, υδατογράφημα και εργαλεία συλλογής επιπλέον του προεπιλεγμένου συστήματος πολυμέσων του WordPress.

Ακόμα κι αν δεν θεωρείτε τον εαυτό σας τεχνικό, αυτά τα βήματα είναι απλά: προσαρμόστε τις ρυθμίσεις στην ενότητα Πολυμέσα, εγκαταστήστε το πρόσθετο αναγέννησης μετά τις αλλαγές, προαιρετικά καταχωρίστε προσαρμοσμένα μεγέθη στο θέμα σας και χρησιμοποιήστε WP Media Folder για να οργανώσετε τη βιβλιοθήκη πολυμέσων σας πιο αποτελεσματικά. Με αυτόν τον τρόπο, οι εικόνες σας φαίνονται υπέροχες, φορτώνουν γρήγορα και είναι εύκολες στη διαχείριση.