Γιατί οι εικόνες στο WordPress φαίνονται θολές μετά τη μεταφόρτωση (και πώς να το διορθώσετε)

Στις εννέα από τις δέκα περιπτώσεις οι εικόνες σας δεν είναι πραγματικά θολές — το WordPress τις σμίκρυνε κατά τη μεταφόρτωση και τώρα σερβίρει το περιορισμένο αντίγραφο. Από το WordPress 5.3 και μετά, οποιαδήποτε εικόνα με πλάτος ή ύψος πάνω από 2560px αντικαθίσταται σιωπηλά από μια έκδοση -scaled με ανώτατο όριο τα 2560px στη μεγαλύτερη πλευρά της, και αυτό το μικρότερο αρχείο είναι που το θέμα σας τεντώνει για να γεμίσει ένα hero, ένα full-width block ή μια οθόνη retina. Η λύση είναι να αποδείξετε ότι αυτό ακριβώς συνέβη, και στη συνέχεια είτε να ανεβάσετε το όριο είτε να σταματήσετε να ανεβάζετε εικόνες που πρέπει να είναι μεγαλύτερες από το πλαίσιο στο οποίο κάθονται.

Γιατί συμβαίνει

Όταν ανεβάζετε μια φωτογραφία, το WordPress εκτελεί τη wp_create_image_subsizes() (στο wp-admin/includes/image.php). Αν η μεγαλύτερη πλευρά ξεπερνά το big_image_size_threshold — 2560px από προεπιλογή — καλεί τη _wp_image_meta_replace_original(), δημιουργεί το your-photo-scaled.jpg και ξαναγράφει τα μεταδεδομένα του συνημμένου έτσι ώστε το μέγεθος full να δείχνει πλέον στο σμικρυμένο αντίγραφο. Το πραγματικό πρωτότυπό σας διατηρείται στον δίσκο ως your-photo.jpg και αναφέρεται μέσω της wp_get_original_image_path(), αλλά τίποτα στο front end δεν το σερβίρει. Κάθε ενδιάμεσο μέγεθος και κάθε υποψήφιο του srcset δημιουργείται από το σμικρυμένο αρχείο των 2560px, όχι από αυτό που ανεβάσατε.

Ορίστε λοιπόν από πού προκύπτει η θολούρα. Ανεβάζετε μια καθαρή εικόνα 4000px για μια full-bleed κεφαλίδα. Το WordPress την περιορίζει στα 2560px. Σε μια κανονική οθόνη μέσα σε ένα container πλάτους 1600px, όλα καλά. Σε μια οθόνη retina 2x ο browser χρειάζεται περίπου 3200 πραγματικά pixel για να γεμίσει καθαρά αυτό το container, έχει μόνο 2560 και μεγεθύνει τη διαφορά. Απαλά περιγράμματα, θολό κείμενο μέσα στην εικόνα, ακριβώς το σύμπτωμα «θολό μετά τη μεταφόρτωση».

Το άλλο μισό του ίδιου προβλήματος είναι ότι το srcset επιλέγει ένα μέγεθος που είναι πολύ μικρό. Αν το θέμα σας δηλώνει content width που δεν ταιριάζει με το πραγματικό πλαίσιο απόδοσης, το WordPress δίνει στον browser ένα ενδιάμεσο -1024x683 ή -1536x1024 και αυτό τεντώνεται προς τα πάνω. Ίδια αιτία — πλαίσιο εμφάνισης μεγαλύτερο από τα διαθέσιμα pixel — διαφορετική αφορμή.

Ελέγξτε τι πραγματικά σέρβιρε το WordPress

Μη μαντεύετε. Κάντε δεξί κλικ στη θολή εικόνα, ανοίξτε την σε νέα καρτέλα και δείτε το όνομα αρχείου στο URL. Αν καταλήγει σε -scaled.jpg ή σε κατάληξη διαστάσεων όπως -1024x683.jpg, το επιβεβαιώσατε: ο browser αποδίδει ένα σμικρυμένο παράγωγο, όχι τη μεταφόρτωσή σας. Μπορείτε επίσης να επιθεωρήσετε το στοιχείο και να διαβάσετε το currentSrc για να δείτε ακριβώς ποιο υποψήφιο επέλεξε ο browser.

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

Στον server μπορείτε να παραθέσετε κάθε περιορισμένο αρχείο:

find wp-content/uploads -name '*-scaled.*'

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

1. Αν οι εικόνες σας χρειάζεται δικαιολογημένα να είναι μεγαλύτερες από 2560px (μεγάλα heroes, retina, gallery ποιότητας εκτύπωσης), ανεβάστε το όριο:

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

Ή απενεργοποιήστε εντελώς το όριο:

add_filter( 'big_image_size_threshold', '__return_false' );

2. Ανεβάστε ξανά τις εικόνες που επηρεάζονται. Αυτό είναι το βήμα που παραλείπουν οι περισσότεροι. Η αλλαγή του ορίου επηρεάζει μόνο τις νέες μεταφορτώσεις. Οι εικόνες που υπάρχουν ήδη στη βιβλιοθήκη σας διατηρούν τα παλιά τους μεταδεδομένα, και η αναδημιουργία των thumbnails ξαναχτίζει τα ενδιάμεσα μεγέθη από το περιορισμένο αρχείο -scaled — δεν προσθέτει πίσω την ανάλυση που πετάχτηκε. Ο αξιόπιστος δρόμος είναι: αλλάξτε το φίλτρο, διαγράψτε το συνημμένο, ανεβάστε το ξανά.

3. Αν η πηγή σας είναι ήδη ≤2560px και εξακολουθεί να είναι θολή, το πρόβλημα δεν είναι το όριο — το πλαίσιο εμφάνισης είναι μεγαλύτερο από την εικόνα. Ανεβάστε μεγαλύτερη πηγή ή μικρύνετε το container. Για ευκρίνεια retina, η πηγή σας πρέπει να είναι περίπου διπλάσια από το πλάτος του πλαισίου σε CSS pixel που γεμίζει.

4. Μόνο μετά τα παραπάνω, αναδημιουργήστε τα thumbnails ώστε τα ενδιάμεσα μεγέθη να είναι συνεπή — αλλά καταλάβετε ότι πρόκειται για συγύρισμα, όχι για θεραπεία.

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

Μην ανεβάσετε την ποιότητα JPEG στο 100. Το WordPress συμπιέζει σε προεπιλεγμένη ποιότητα 82 μέσω της wp_editor_set_quality, και οι μισές συμβουλές στο διαδίκτυο σας λένε να την παρακάμψετε:

add_filter( 'wp_editor_set_quality', function () { return 90; } );

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

Μην απενεργοποιείτε το -scaled αντανακλαστικά. Το να σβήσετε το όριο (υπάρχει εργαλείο γι’ αυτό) είναι η σωστή κίνηση αν σερβίρετε εικόνες πάνω από 2560px — αλλά αν το πραγματικό σας πρόβλημα είναι ένα υπερβολικά μικρό ενδιάμεσο μέγεθος που τεντώνεται, η απενεργοποίηση δεν αλλάζει τίποτα και χάνετε την εξοικονόμηση εύρους ζώνης χωρίς λόγο. Κάντε πρώτα διάγνωση.

Μη ρίχνετε το φταίξιμο στην cache ούτε να αναδημιουργείτε πρώτα τα thumbnails. Η αναδημιουργία διαβάζει από την ίδια περιορισμένη πηγή, οπότε δεν μπορεί να επαναφέρει λεπτομέρεια. Το καθάρισμα ενός CDN ή μιας page cache δεν πρόκειται να αγγίξει ένα αρχείο που ήταν εξαρχής μικρό στον δίσκο.

Μην καταφεύγετε στο CSS του θέματος ή στο object-fit. Κανένα styling δεν προσθέτει pixel. Αν το αρχείο που σερβίρεται καταλήγει σε -scaled ή σε κατάληξη διαστάσεων, το πρόβλημα είναι το αρχείο, όχι το layout.

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

Αν έχετε επιβεβαιώσει ότι το αρχείο που σερβίρεται είναι η μεταφόρτωσή σας σε πλήρη ανάλυση — χωρίς -scaled, χωρίς κατάληξη διαστάσεων — και εξακολουθεί να είναι απαλό, ελέγξτε μήπως κάποιο plugin (ένας optimizer, ένας image-resizer του CDN ή μια βιβλιοθήκη lazy-load) ξαναγράφει το src σας σε ένα συμπιεσμένο proxy. Περάστε την εικόνα από το εργαλείο μεγεθών εικόνας για να επιβεβαιώσετε τι θα έπρεπε να παράγει το WordPress, και μετά συγκρίνετέ το με αυτό που φορτώνει πραγματικά ο browser. Όταν αυτά τα δύο διαφωνούν, κάτι ανάμεσα στο WordPress και τον browser φταίει.