Μέγεθος επιλεγμένης εικόνας WordPress: 1200×630 + βρείτε το

Σύντομη απάντηση: αν δεν ξέρετε ακόμη το μέγεθος του θέματός σας, χρησιμοποιήστε 1200 x 630 pixels (περίπου 1,91:1). Είναι το μέγεθος προεπισκόπησης συνδέσμων που προτείνει το Facebook, και τα πρόσθετα SEO συνήθως χρησιμοποιούν την επιλεγμένη εικόνα ως εικόνα κοινοποίησης.

Μέσα στο ίδιο το άρθρο, μετράει το μέγεθος που εμφανίζει το θέμα σας. Το WordPress αποθηκεύει κάθε αρχείο που ανεβάζετε σε πολλά μεγέθη, και το θέμα διαλέγει ποιο εμφανίζεται. Τα κλασικά θέματα το ορίζουν με set_post_thumbnail_size() ή add_image_size(), ενώ τα θέματα μπλοκ στο μπλοκ Επιλεγμένη εικόνα. Αν το θέμα κόβει σε 16:9 ή τετράγωνο, μια εικόνα 1200 x 630 μπορεί να χάσει μέρος από αριστερά και δεξιά. Βρείτε το μέγεθος του θέματός σας (τέσσερις τρόποι παρακάτω) και μετά ανεβάστε εικόνα τουλάχιστον τόσο μεγάλη ή περίπου διπλάσια σε πλάτος, για καθαρό αποτέλεσμα σε οθόνες υψηλής πυκνότητας.

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

Ποιο μέγεθος να χρησιμοποιήσετε, ανάλογα με το πού εμφανίζεται η εικόνα

Πού εμφανίζεται η εικόνα	Μέγεθος για ανέβασμα	Σημειώσεις
Στα άρθρα σας, χωρίς να ξέρετε ακόμη το μέγεθος του θέματος	1200 x 630 ή 2400 x 1260 για πιο καθαρό αποτέλεσμα	Κάνει και για προεπισκοπήσεις συνδέσμων όσο ψάχνετε το μέγεθος του θέματός σας
Στα άρθρα σας, με γνωστό το μέγεθος του θέματος	Περίπου το διπλάσιο του πλάτους της επιλεγμένης εικόνας του θέματός σας, στην ίδια αναλογία	Το WordPress φτιάχνει μικρότερα αντίγραφα ενός αρχείου, ποτέ μεγαλύτερα
Προεπισκοπήσεις συνδέσμων στο Facebook	Τουλάχιστον 1200 x 630 (περίπου 1,91:1), ενώ το 1200 x 628 έχει σχεδόν το ίδιο σχήμα	Από τις οδηγίες κοινοποίησης του Facebook
Google Discover	Πλάτος τουλάχιστον 1200 px, 16:9 (για παράδειγμα 1200 x 675)	Από τις οδηγίες της Google για το Discover

Τα μεγέθη εικόνων του WordPress με μια ματιά

Κάθε εικόνα που ανεβάζετε παίρνει ένα αντίγραφο σε νέες διαστάσεις για κάθε καταχωρημένο μέγεθος. Αυτά είναι τα μεγέθη που καταχωρεί ο πυρήνας του WordPress, με τις προεπιλογές από το Theme Handbook και την αναφορά συναρτήσεων του πυρήνα:

Όνομα μεγέθους	Προεπιλεγμένες διαστάσεις	Αλλάζει στις Ρυθμίσεις > Πολυμέσα;	Σημειώσεις
thumbnail	150 x 150, με περικοπή	Ναι	Έχει πλαίσιο επιλογής για περικοπή στις ακριβείς διαστάσεις
medium	έως 300 x 300	Ναι	Αναλογική κλιμάκωση
medium_large	πλάτος 768, χωρίς όριο ύψους	Όχι	Χρησιμοποιείται κυρίως στο srcset
large	έως 1024 x 1024	Ναι	Αναλογική κλιμάκωση
1536x1536	έως 1536 x 1536	Όχι	Προστέθηκε στο WordPress 5.3 για οθόνες υψηλής πυκνότητας
2048x2048	έως 2048 x 2048	Όχι	Προστέθηκε στο WordPress 5.3 για οθόνες υψηλής πυκνότητας
post-thumbnail	Το ορίζει το θέμα	Όχι	Υπάρχει μόνο αν το θέμα καλεί τη set_post_thumbnail_size()
full	Το αρχικό σας αρχείο	Όχι	Πολύ μεγάλα αρχεία μικραίνουν πρώτα (δείτε παρακάτω)

Το “έως” σημαίνει ότι το WordPress χωράει την εικόνα μέσα σε αυτό το πλαίσιο και κρατά τις αναλογίες της. Μια φωτογραφία 2000 x 1000 γίνεται 1024 x 512 για το large, όχι 1024 x 1024.

Θέματα και πρόσθετα συχνά προσθέτουν κι άλλα μεγέθη με την add_image_size(). Το WooCommerce, για παράδειγμα, προσθέτει δικά του μεγέθη προϊόντων, που εξηγεί ο οδηγός μας για το μέγεθος εικόνας προϊόντος στο WooCommerce.

Ένας ακόμη κανόνας αφορά τα μεγάλα αρχεία. Από το WordPress 5.3, αν μια εικόνα έχει πλάτος ή ύψος πάνω από 2560 pixels, το WordPress τη μικραίνει και χρησιμοποιεί το μικρότερο αντίγραφο ως το μεγαλύτερο διαθέσιμο μέγεθος. Το όριο αυτό προέρχεται από το φίλτρο big_image_size_threshold, με προεπιλογή 2560. Αν βλέπετε -scaled στα ονόματα αρχείων και θέλετε να μάθετε αν πρέπει να το απενεργοποιήσετε, διαβάστε πώς να απενεργοποιήσετε τις scaled εικόνες στο WordPress.

Από πού προέρχεται στην πράξη το μέγεθος της επιλεγμένης εικόνας

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

Κλασικά θέματα

Ένα κλασικό θέμα ενεργοποιεί τις επιλεγμένες εικόνες και καταχωρεί το μέγεθος στο functions.php του:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

Η set_post_thumbnail_size() καταχωρεί ένα μέγεθος με όνομα post-thumbnail. Το τρίτο όρισμα ελέγχει την περικοπή. Με false (προεπιλογή), το WordPress κλιμακώνει την εικόνα ώστε να χωράει μέσα σε 1200 x 675. Με true, την κόβει ακριβώς σε 1200 x 675 από το κέντρο, οπότε ό,τι βρίσκεται έξω από ένα πλαίσιο 16:9 χάνεται. Μπορείτε επίσης να δώσετε έναν πίνακα όπως array( 'center', 'top' ) για να διαλέξετε ποιο μέρος κρατιέται.

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

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Το πρότυπο μετά διαλέγει ένα με το όνομά του:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Χωρίς όνομα, η the_post_thumbnail() χρησιμοποιεί το post-thumbnail. Άρα το πραγματικό μέγεθος επιλεγμένης εικόνας σε ένα κλασικό θέμα είναι αυτό που ονομάζεται στο πρότυπο, και ένα αρχείο ιστολογίου μπορεί να χρησιμοποιεί διαφορετικό από την προβολή ενός μεμονωμένου άρθρου.

Θέματα μπλοκ

Τα θέματα μπλοκ, μαζί και τα δωρεάν θέματα αυτού του ιστοτόπου, εμφανίζουν την επιλεγμένη εικόνα με το μπλοκ Επιλεγμένη εικόνα. Η αναφορά μπλοκ του πυρήνα απαριθμεί τις ρυθμίσεις του, όπως sizeSlug (ποιο καταχωρημένο μέγεθος φορτώνεται), aspectRatio, width, height και scale.

Αυτό αλλάζει το πού πρέπει να κοιτάξετε. Ανοίξτε Εμφάνιση > Επεξεργαστής, επεξεργαστείτε το πρότυπο Μεμονωμένα άρθρα και επιλέξτε το μπλοκ Επιλεγμένη εικόνα. Η πλαϊνή στήλη δείχνει ποιο μέγεθος εικόνας φορτώνει και αν έχει οριστεί αναλογία. Η αναλογία εφαρμόζεται στον browser με CSS, οπότε το αρχείο μένει ίδιο και αλλάζει μόνο το ορατό πλαίσιο. Αν το μπλοκ ζητά πλαίσιο 16:9 και η εικόνα σας είναι τετράγωνη, ένα μέρος της κρύβεται. Τα πρότυπα αρχείου και αρχικής σελίδας μπορεί να έχουν άλλες ρυθμίσεις από το πρότυπο μεμονωμένου άρθρου, γι’ αυτό ελέγξτε το καθένα.

Πώς να βρείτε το μέγεθος επιλεγμένης εικόνας του θέματός σας

Δοκιμάστε τα παρακάτω με τη σειρά. Το πρώτο που σας δίνει απάντηση αρκεί.

1. Δείτε την τεκμηρίωση του θέματος. Τα καλά θέματα αναφέρουν το προτεινόμενο μέγεθος επιλεγμένης εικόνας. Αν υπάρχει, χρησιμοποιήστε το.

2. Δείτε τη λίστα των καταχωρημένων μεγεθών με το WP-CLI. Αν έχετε πρόσβαση στη γραμμή εντολών, η wp media image-size εμφανίζει κάθε καταχωρημένο μέγεθος με πλάτος, ύψος, ρύθμιση περικοπής και αναλογία:

   wp media image-size

3. Ψάξτε στα αρχεία του θέματος. Σε κλασικό θέμα, ψάξτε στο functions.php (και στα αρχεία που φορτώνει) για set_post_thumbnail_size και add_image_size, και μετά δείτε στο single.php ή στα τμήματα προτύπων ποιο όνομα περνά στην the_post_thumbnail(). Σε θέμα μπλοκ, ελέγξτε το μπλοκ Επιλεγμένη εικόνα στον Επεξεργαστή ιστοτόπου, όπως περιγράφεται παραπάνω.

4. Επιθεωρήστε ένα δημοσιευμένο άρθρο. Κάντε δεξί κλικ στην επιλεγμένη εικόνα, επιλέξτε Επιθεώρηση και διαβάστε το όνομα αρχείου στο src. Το WordPress προσθέτει τις διαστάσεις στα αντίγραφα, οπότε το my-photo-1200x675.jpg σας λέει ότι το θέμα φόρτωσε αντίγραφο 1200 x 675. Δείτε και το srcset, γιατί ο browser μπορεί να διαλέξει μικρότερο αντίγραφο σε στενές οθόνες. Αν το όνομα δεν έχει διαστάσεις, χρησιμοποιήθηκε το πλήρες αρχείο.

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

Πώς να διαλέξετε το μέγεθος του αρχείου που ανεβάζετε

Όταν ξέρετε το μέγεθος του θέματος, τέσσερις επιλογές κρίνουν αν το αποτέλεσμα θα φαίνεται σωστό.

• Πλάτος. Ανεβάστε τουλάχιστον το πλάτος που εμφανίζει το θέμα. Για καθαρό αποτέλεσμα σε οθόνες υψηλής πυκνότητας κινητών και laptop, στοχεύστε περίπου στο διπλάσιο. Για θέση πλάτους 1200px, αυτό σημαίνει 2400px. Το WordPress φτιάχνει μικρότερα αντίγραφα από το αρχείο σας και ποτέ μεγαλύτερα, οπότε ένα μικρό πρωτότυπο είναι η πιο συχνή αιτία για θολή εικόνα μετά το ανέβασμα.
• Αναλογία. Ταιριάξτε την αναλογία με την περικοπή του θέματος. Αν κόβει σε 16:9, δώστε του 16:9 και κρατήστε το θέμα της φωτογραφίας κοντά στο κέντρο, ώστε μια αυστηρή περικοπή να μην κόψει κεφάλια ή κείμενο.
• Μέγεθος αρχείου. Μια φωτογραφία 2400px αποθηκευμένη ως JPEG σε λογική ποιότητα είναι συνήθως μερικές εκατοντάδες kilobytes. Ένα αρχείο κάμερας 6000px απλώς προσθέτει δουλειά: το WordPress μικραίνει ούτως ή άλλως ό,τι ξεπερνά τα 2560px, και τα επιπλέον pixels δεν φτάνουν ποτέ στους επισκέπτες.
• Μορφή αρχείου. Το WordPress δέχεται αρχεία WebP από την έκδοση 5.8 και AVIF από την 6.5, εφόσον τα υποστηρίζει η βιβλιοθήκη εικόνων του διακομιστή σας. Και οι δύο μορφές δίνουν συνήθως μικρότερο αρχείο από το JPEG σε παρόμοια ποιότητα.

Η εικόνα για τα κοινωνικά δίκτυα είναι άλλη υπόθεση

Όταν κάποιος μοιράζεται το άρθρο σας στο Facebook, στο LinkedIn ή σε άλλα δίκτυα, η προεπισκόπηση προέρχεται από την ετικέτα og:image, που τα πρόσθετα SEO συνήθως γεμίζουν με την επιλεγμένη εικόνα. Η τεκμηρίωση κοινοποίησης του Facebook προτείνει εικόνες τουλάχιστον 1200 x 630 pixels, όσο πιο κοντά γίνεται σε αναλογία 1,91:1.

Θα δείτε να προτείνεται και το 1200 x 628. Αυτό είναι σχεδόν ακριβώς 1,91:1, ενώ το 1200 x 630 βγαίνει περίπου 1,90:1. Διαφέρουν μόλις 2 pixels στο ύψος, οπότε κάνει οποιοδήποτε από τα δύο.

Αν και το μέγεθος εμφάνισης του θέματός σας είναι κοντά στο 1,91:1, ένα αρχείο 1200 x 630 (ή 2400 x 1260) καλύπτει και τα δύο. Αν το θέμα κόβει σε 16:9 ή τετράγωνο, κρατήστε το σημαντικό περιεχόμενο μακριά από την αριστερή και τη δεξιά άκρη ή ορίστε ξεχωριστή εικόνα για τα κοινωνικά δίκτυα στο πρόσθετο SEO σας.

Το Google Discover έχει τις δικές του συστάσεις για τις εικόνες. Οι οδηγίες της Google για το Discover προτείνουν εικόνες πλάτους τουλάχιστον 1200 px, με πάνω από 300.000 pixels συνολικά, σε αναλογία 16:9, όπως 1200 x 675. Οι μεγάλες εικόνες χρειάζονται επίσης τη ρύθμιση robots max-image-preview:large, την οποία το WordPress προσθέτει από προεπιλογή από την έκδοση 5.7, εκτός αν ο ιστότοπος έχει ρυθμιστεί να αποθαρρύνει τις μηχανές αναζήτησης.

Πώς να αλλάξετε το μέγεθος της επιλεγμένης εικόνας

Το πού θα κάνετε την αλλαγή εξαρτάται από το μέγεθος και από το θέμα σας.

Μεγέθη του πυρήνα (thumbnail, medium, large). Πηγαίνετε στις Ρυθμίσεις > Πολυμέσα και αλλάξτε πλάτος και ύψος. Η τεκμηρίωση της οθόνης Ρυθμίσεις πολυμέσων περιγράφει τα πεδία, μαζί και το πλαίσιο περικοπής για τις μικρογραφίες.

Μεγέθη θέματος σε κλασικό θέμα. Μην επεξεργάζεστε το γονικό θέμα, γιατί μια ενημέρωση θα σβήσει την αλλαγή σας. Βάλτε τις νέες τιμές στο functions.php ενός θυγατρικού θέματος. Αν καταχωρίσετε ξανά ένα μέγεθος με το ίδιο όνομα, αντικαθίσταται, και η ρύθμιση του θυγατρικού θέματος πρέπει να τρέχει μετά από αυτήν του γονικού:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

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

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

Μία εικόνα, χωρίς κώδικα. Για να διαλέξετε τι κρατά η περικοπή σε μία συγκεκριμένη εικόνα, ανοίξτε την από Πολυμέσα > Βιβλιοθήκη και πατήστε Επεξεργασία εικόνας. Περικόψτε την στην αναλογία του θέματός σας (το εργαλείο περικοπής δέχεται αναλογία όπως 16:9) ή αλλάξτε την κλίμακά της και μετά αποθηκεύστε. Το WordPress εφαρμόζει την αλλαγή σε όλα τα μεγέθη αυτής της εικόνας και κρατά το αρχικό αρχείο, οπότε μπορείτε να την αναιρέσετε αργότερα με την Επαναφορά αρχικής εικόνας.

Αναδημιουργία των υπαρχουσών μικρογραφιών

Ένα αλλαγμένο μέγεθος ισχύει μόνο για νέα αρχεία. Οι εικόνες που ήδη βρίσκονται στη βιβλιοθήκη πολυμέσων κρατούν τα παλιά τους αντίγραφα μέχρι να τα ξαναφτιάξετε. Αυτό κάνει η εντολή wp media regenerate:

wp media regenerate --yes

Χρήσιμες επιλογές από την τεκμηρίωση του WP-CLI:

• Το --image_size=hero-wide ξαναφτιάχνει μόνο αυτό το μέγεθος. Επαναλάβετε την επιλογή για περισσότερα μεγέθη.
• Το --only-missing δημιουργεί όσα μεγέθη δεν υπάρχουν ακόμη και αφήνει τα υπάρχοντα αρχεία ως έχουν, κάτι πιο γρήγορο μετά την προσθήκη νέου μεγέθους.
• Το --skip-delete κρατά τα παλιά αρχεία μικρογραφιών. Χρησιμοποιήστε το αν άλλοι ιστότοποι, newsletters ή feeds συνδέουν απευθείας σε αυτά τα αρχεία.

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

Συνηθισμένα λάθη

• Να σταματάτε στο 1200 x 630. Είναι καλό σημείο εκκίνησης και ταιριάζει στις προεπισκοπήσεις συνδέσμων, αλλά αν το θέμα σας κόβει σε 16:9 ή τετράγωνο, ένα μέρος της εικόνας χάνεται. Ελέγξτε το μέγεθος του θέματός σας πριν ανεβάσετε πολλές εικόνες μαζί.
• Να απενεργοποιείτε τα παραγόμενα μεγέθη για να “κρατήσετε το πρωτότυπο”. Αν το θέμα δεν έχει μικρότερα αντίγραφα, μπορεί να καταλήξει να φορτώνει το πλήρες αρχείο σε κάθε οθόνη, κάτι που καθυστερεί τη σελίδα στα κινητά. Τα μικρότερα αντίγραφα υπάρχουν ακριβώς για να το αποφύγουν αυτό.
• Να αλλάζετε τον κώδικα μεγεθών εικόνας και να παραλείπετε την αναδημιουργία. Ο κώδικας δουλεύει, αλλά μόνο για νέα αρχεία. Γι’ αυτό πολλοί καταλήγουν ότι μια αλλαγή μεγέθους “δεν έκανε τίποτα”.
• Να αλλάζετε το μέγεθος στο γονικό θέμα. Η επόμενη ενημέρωση του θέματος το αφαιρεί. Χρησιμοποιήστε θυγατρικό θέμα ή τον Επεξεργαστή ιστοτόπου.

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