Τι Μέγεθος Πρέπει να Έχει μια Επιλεγμένη Εικόνα στο WordPress;

Ο αριθμός που θέλουν οι περισσότεροι είναι 1200 x 630 pixels. Αυτή είναι η αναλογία που χρησιμοποιούν το Facebook, το LinkedIn και το X για τις προεπισκοπήσεις συνδέσμων (1.91:1), και είναι το μέγεθος που πρέπει να έχει μια εικόνα Open Graph. Αν βάζετε μια επιλεγμένη εικόνα κυρίως για να δείχνουν σωστά οι κοινοποιημένοι σύνδεσμοι, χρησιμοποιήστε 1200 x 630 και σταματήστε εκεί.

Όμως αυτός ο αριθμός δεν είναι αυτό που πραγματικά εμφανίζει το θέμα σας στο άρθρο. Το WordPress σπάνια δείχνει την επιλεγμένη εικόνα σας στο αρχικό της μέγεθος. Το θέμα ζητά ένα συγκεκριμένο δηλωμένο μέγεθος εικόνας, και το WordPress σερβίρει όποια προ-δημιουργημένη περικοπή ταιριάζει. Γι’ αυτό μια εικόνα που δείχνει τέλεια στο Facebook μπορεί να φαίνεται θολή, παραμορφωμένη ή λάθος περικομμένη μέσα στο template του άρθρου σας. Το «σωστό» μέγεθος εξαρτάται από το θέμα, όχι από κάποιον καθολικό κανόνα.

Γιατί το θέμα παρακάμπτει τον αριθμό

Όταν ανεβάζετε μια εικόνα, το WordPress δεν αποθηκεύει ένα αρχείο. Τρέχει τη wp_generate_attachment_metadata() και δημιουργεί ένα παράγωγο για κάθε δηλωμένο μέγεθος εικόνας: τα τρία προεπιλεγμένα (thumbnail, medium, large), το medium_large του επεξεργαστή μπλοκ (πλάτους 768px), συν όποιο μέγεθος έχει δηλώσει το θέμα ή κάποιο πρόσθετο με την add_image_size().

Ένα θέμα που θέλει ένα πλατύ hero 16:9 θα κάνει κάτι σαν αυτό στο functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Το τέταρτο όρισμα, true, σημαίνει σκληρή περικοπή (hard crop). Το WordPress θα περικόψει την εικόνα σας σε ακριβώς 1200 x 675, πετώντας ό,τι δεν χωράει στο κουτί 16:9. Αν το θέμα σας βρίσκεται κοντά στο πάνω ή το κάτω μέρος του κάδρου, θα κοπεί. Αν οριστεί σε false (ή παραλειφθεί), κλιμακώνεται αναλογικά και οι τελικές διαστάσεις μπορεί να διαφέρουν από αυτές που ζητήσατε.

Στη συνέχεια, το template αποφασίζει ποιο μέγεθος θα τραβήξει:

the_post_thumbnail( 'hero-featured' );

Όποιο όνομα περνάει στην the_post_thumbnail() είναι η περικοπή που εμφανίζεται. Έτσι, το πραγματικό μέγεθος της επιλεγμένης εικόνας στον ιστότοπό σας ορίζεται σε δύο σημεία που δεν γράψατε εσείς: στην κλήση της add_image_size() και στην κλήση της the_post_thumbnail() μέσα στο θέμα. Το ανέβασμα ενός μεγαλύτερου αρχείου δεν αλλάζει κανένα από τα δύο.

Υπάρχει και ένα ακόμη επίπεδο. Το WordPress σερβίρει ένα srcset, οπότε σε μικρότερες οθόνες ο περιηγητής μπορεί να φορτώσει το παράγωγο medium ή large αντί για την πλήρη περικοπή. Η διάσταση που βλέπετε στα DevTools συχνά δεν είναι αυτή που ανεβάσατε.

Πώς να το διορθώσετε, με τη σειρά

1. Βρείτε τι ζητά πραγματικά το θέμα σας. Πριν μαντέψετε, δείτε κάθε μέγεθος που δημιουργεί το WordPress από την εικόνα σας και ποιο είναι το περικομμένο hero. Ρίξτε την εικόνα σας στο εργαλείο μεγεθών εικόνων WordPress — δείχνει κάθε παράγωγο που θα δημιουργούσε το WP, στις ακριβείς διαστάσεις σε pixels, ώστε να ταιριάξετε την πηγή σας με τον πραγματικό στόχο αντί για το μυθικό 1200x630.

2. Ανεβάστε αρκετά μεγάλη εικόνα ώστε να καλύπτει τη μεγαλύτερη περικοπή. Αν το hero του θέματος είναι 1200 x 675, ανεβάστε τουλάχιστον αυτό, και ιδανικά 2x για retina (2400 x 1350). Το WordPress υποβαθμίζει καθαρά· ποτέ δεν κάνει μεγέθυνση. Μια πηγή μικρότερη από όσο χρειάζεται είναι η πιο συχνή αιτία μιας θολής επιλεγμένης εικόνας.

3. Ταιριάξτε την αναλογία διαστάσεων με την περικοπή του θέματος. Αν το θέμα κάνει σκληρή περικοπή σε 16:9, δώστε του 16:9. Συνθέστε με το θέμα στο κέντρο, ώστε μια σκληρή περικοπή να μην αποκεφαλίσει κανέναν.

4. Αν το δηλωμένο μέγεθος είναι λάθος, αλλάξτε το και αναδημιουργήστε. Επεξεργαστείτε τις τιμές της add_image_size() σε ένα child theme, και μετά ξαναχτίστε τα υπάρχοντα μικρογραφημένα — οι νέες διαστάσεις εφαρμόζονται μόνο σε μελλοντικά ανεβάσματα μέχρι να το κάνετε:

wp media regenerate --yes

Δεν έχετε WP-CLI; Το πρόσθετο Regenerate Thumbnails κάνει το ίδιο πράγμα από τον πίνακα ελέγχου.

Τι να μην κάνετε

Μην ανεβάζετε απλώς μια εικόνα 1200x630 και θεωρείτε ότι το ζήτημα λύθηκε. Αν το δηλωμένο μέγεθος του θέματος είναι 16:9, το WordPress κάνει σκληρή περικοπή στην εικόνα σας του 1.91:1 και χάνετε το πάνω και το κάτω μέρος. Ο αριθμός για το Open Graph και ο αριθμός για την εμφάνιση είναι διαφορετικές δουλειές.

Μην απενεργοποιείτε τα μεγέθη εικόνων του WordPress για να «κρατήσετε το πρωτότυπο». Θα βρείτε συμβουλές να θέτετε τα ενδιάμεσα μεγέθη σε 0 ή να αποσυνδέετε την the_post_thumbnail. Τότε το θέμα καταφεύγει στο να σερβίρει το αρχείο πλήρους μεγέθους υποβαθμισμένο μέσα στον περιηγητή — ένα JPEG 4000px να στέλνεται σε ένα κινητό. Αυτό καταστρέφει τον χρόνο φόρτωσής σας και τα Core Web Vitals. Τα παράγωγα υπάρχουν για κάποιον λόγο.

Μην εμπιστεύεστε το «προτεινόμενο μέγεθος» ενός προσθέτου έναντι του πραγματικού δηλωμένου μεγέθους του θέματός σας. Τα SEO πρόσθετα προτείνουν 1200x630 για το tag OG, που είναι σωστό γι’ αυτό το tag. Δεν λέει τίποτα για το τι περικόπτει το template του άρθρου σας.

Μην παραλείπετε την wp media regenerate μετά την αλλαγή μεγεθών. Η επεξεργασία της add_image_size() δεν κάνει τίποτα στις εικόνες που έχουν ήδη ανέβει. Αυτό είναι το βήμα που ξεχνάει ο κόσμος, και μετά συμπεραίνει ότι ο κώδικας δεν δούλεψε.

Ακόμη κολλημένοι;

Αν η εικόνα εξακολουθεί να είναι λάθος μετά το ταίριασμα των διαστάσεων και την αναδημιουργία, το πρόβλημα είναι συνήθως ο τρόπος περικοπής (true έναντι false) ή ένα srcset που σερβίρει μικρότερο παράγωγο από όσο περιμένετε. Ρίξτε το αρχείο στο εργαλείο μεγεθών εικόνων για να δείτε ακριβώς ποιες περικοπές παράγει η ρύθμισή σας, και μετά συγκρίνετέ τες με αυτό που φορτώνει ο περιηγητής στα DevTools. Ταιριάξτε αυτά τα δύο και τελειώνουν οι εικασίες.