Σταματήστε το WordPress να συμπιέζει τις εικόνες σας στο 82%

Το WordPress επανακωδικοποιεί κάθε JPEG που παράγει σε ποιότητα 82 σε κλίμακα 0–100. Αυτή η προεπιλογή βρίσκεται στη WP_Image_Editor::get_default_quality() και ισχύει για κάθε παράγωγο που κόβει το WordPress από το αρχείο που ανεβάζετε — thumbnail, medium, medium_large, large και κάθε επιπλέον μέγεθος που καταχωρεί το θέμα σας. Για φωτογραφίες, το 82 είναι μια λογική ισορροπία ανάμεσα στο μέγεθος αρχείου και τα σφάλματα (artifacts). Για screenshots, στιγμιότυπα από UI, γραφήματα, λογότυπα και οτιδήποτε έχει έντονο κείμενο ή επίπεδο χρώμα, το 82 είναι ορατά καταστροφικό: παίρνετε θόρυβο τύπου «mosquito» να σέρνεται γύρω από κάθε γράμμα και banding στις ομαλές διαβαθμίσεις.

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

Από πού προκύπτει στην πραγματικότητα ο αριθμός 82

Το WordPress κατέβασε την προεπιλογή JPEG από 90 σε 82 στην έκδοση 4.5 (2016) ως βελτιστοποίηση του βάρους της σελίδας. Η τιμή επιστρέφεται από τη get_default_quality() στο wp-includes/class-wp-image-editor.php και διαβάζεται κάθε φορά που ο ενεργός editor — WP_Image_Editor_Imagick αν ο host σας έχει Imagick, αλλιώς WP_Image_Editor_GD — γράφει ένα αρχείο σε νέες διαστάσεις.

Η σημαντική λεπτομέρεια: το 82 εφαρμόζεται ανά παράγωγο μέγεθος, όχι μία φορά. Ανεβάζετε μία εικόνα και το WordPress την περνάει από τον encoder πολλές φορές, επανακβαντίζοντας σε ποιότητα 82 σε κάθε πέρασμα. Το αρχικό αρχείο που ανεβάσατε μένει ανέγγιχτο εφόσον είναι κάτω από το big-image threshold (2560px στη μεγάλη πλευρά). Αν το ξεπερνάει, το WordPress παράγει ένα επανακωδικοποιημένο -scaled.jpg σε ποιότητα 82 και σερβίρει αυτό ως το «full» μέγεθος. Οπότε το «η εικόνα μου σε πλήρη ανάλυση φαίνεται καλή αλλά η έκδοση στη σελίδα φαίνεται μουτζουρωμένη» είναι σχεδόν πάντα ένα srcset που επιλέγει ένα υπο-μέγεθος ποιότητας 82 ή το αρχείο -scaled.

Πώς να αλλάξετε την ποιότητα

Υπάρχει ένα φίλτρο για να συνδεθείτε. Το wp_editor_set_quality είναι το σύγχρονο, καθιερωμένο — ενεργοποιείται για JPEG και WebP και δέχεται τον τύπο MIME ώστε να μπορείτε να διακλαδώνετε:

add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
    if ( 'image/jpeg' === $mime_type ) {
        return 92; // up from 82
    }
    return $quality;
}, 10, 2 );

Βάλτε το σε ένα μικρό mu-plugin (wp-content/mu-plugins/) ή σε ένα site-specific plugin. Το functions.php δουλεύει επίσης, αλλά χάνετε τη ρύθμιση τη στιγμή που θα αλλάξετε θέμα.

Θα δείτε επίσης να προτείνεται το παλιότερο φίλτρο jpeg_quality. Εξακολουθεί να ενεργοποιείται (το WordPress το εφαρμόζει αμέσως μετά το wp_editor_set_quality, μόνο για JPEG), αλλά δεν υπάρχει λόγος να συνδεθείτε και στα δύο — το wp_editor_set_quality καλύπτει ό,τι έκανε το παλιό και ακόμη περισσότερα.

Ένα πράγμα που ξεχνάνε όλοι: αυτό το φίλτρο επηρεάζει μόνο τις εικόνες που κωδικοποιούνται αφότου γίνει ενεργό. Κάθε thumbnail που βρίσκεται ήδη στο wp-content/uploads γράφτηκε στο 82 και θα παραμείνει στο 82. Αναδημιουργήστε τα:

wp media regenerate --yes

Αν δεν χρησιμοποιείτε WP-CLI, το plugin Regenerate Thumbnails κάνει το ίδιο μέσα από το admin.

Πριν κλειδώσετε έναν αριθμό, αξίζει να δείτε τι κάνει πραγματικά μια δεδομένη ποιότητα στη δική σας εικόνα αντί να μαντεύετε. Το εργαλείο ποιότητας JPEG του WordPress επανακωδικοποιεί ένα δείγμα στον browser σε κάθε επίπεδο ποιότητας ώστε να βλέπετε τα artifacts να εμφανίζονται — κάνει τη διαφορά ανάμεσα σε 82, 90 και 100 προφανή σε ένα screenshot με τρόπο που ένας αριθμός σε ένα αρχείο ρυθμίσεων ποτέ δεν θα καταφέρει.

Η καλύτερη λύση για screenshots και επίπεδα γραφικά

Το να ανεβάζετε τον αριθμό JPEG αντιμετωπίζει το σύμπτωμα. Το πραγματικό πρόβλημα με τα screenshots είναι ότι το JPEG είναι το λάθος codec γι’ αυτά. Η συμπίεση DCT του JPEG είναι ρυθμισμένη για φωτογραφικές διαβαθμίσεις· καταρρέει στα σκληρά μαύρα-πάνω-σε-λευκό όρια του κειμένου και του UI, που είναι ακριβώς ο λόγος που η ποιότητα 82 φαίνεται τόσο χειρότερη σε ένα screenshot απ’ ό,τι σε μια φωτογραφία παραλίας.

Ανεβάστε αντ’ αυτού ένα PNG. Το WordPress κρατάει τα υπο-μεγέθη PNG ως PNG, και το PNG είναι lossless — το φίλτρο ποιότητας δεν το αγγίζει, οπότε δεν υπάρχουν artifacts σε κανένα μέγεθος, μόνο καθαρή αναδειγματοληψία. Για ένα screenshot, ένα καλά βελτιστοποιημένο PNG είναι συχνά μικρότερο από ένα JPEG υψηλής ποιότητας της ίδιας εικόνας ούτως ή άλλως, επειδή το επίπεδο χρώμα συμπιέζεται καλά σε PNG και απαίσια σε JPEG.

Αν θέλετε τα μικρότερα αρχεία ενός lossy format χωρίς τη ζημιά στα όρια που κάνει το JPEG, το WebP είναι η μέση λύση — αλλά και πάλι ελέγχετε την ποιότητά του μέσω του ίδιου φίλτρου wp_editor_set_quality που φαίνεται παραπάνω, διακλαδώνοντας στο image/webp.

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

Μη βάζετε την ποιότητα στο 100 καθολικά. Αυτή είναι η απάντηση με τις περισσότερες ψήφους στα μισά νήματα των forum, και είναι λάθος. Το JPEG ποιότητας 100 δεν είναι lossless — εξακολουθεί να κβαντίζει — αλλά φουσκώνει κάθε φωτογραφία στον ιστότοπό σας κατά πολύ χωρίς κανένα ορατό κέρδος, ρίχνοντας το LCP και τα Core Web Vitals. Ανεβάστε τον αριθμό για το format που το χρειάζεται, ή αλλάξτε format για τα γραφικά· μην ισοπεδώνετε τη συμπίεση σε όλο τον ιστότοπο.

Μην επεξεργάζεστε το class-wp-image-editor.php. Το να αλλάξετε την τιμή που επιστρέφει η get_default_quality() στον πυρήνα δουλεύει μέχρι το επόμενο wp core update να το σβήσει σιωπηλά. Χρησιμοποιήστε το φίλτρο.

Μην απενεργοποιείτε μεγέθη εικόνων για να «αποφύγετε τη συμπίεση». Το να απενεργοποιήσετε τη δημιουργία thumbnail δεν σταματάει την επανακωδικοποίηση — σπάει το responsive srcset, οπότε οι browsers κατεβάζουν την εικόνα σας σε πλήρες μέγεθος στα κινητά. Διαφορετικό πρόβλημα, χειρότερο αποτέλεσμα.

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

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

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

Αν ένα συγκεκριμένο μέγεθος εξακολουθεί να φαίνεται λάθος μετά την αναδημιουργία, επιβεβαιώστε ποιο αρχείο σερβίρει στην πραγματικότητα η σελίδα — ανοίξτε την εικόνα σε νέα καρτέλα και ελέγξτε αν το όνομα αρχείου τελειώνει σε κατάληξη διαστάσεων (-1024x768.jpg) ή σε -scaled.jpg. Το εργαλείο επιθεώρησης μεγεθών εικόνας δείχνει κάθε παράγωγο που δημιουργεί το WordPress από ένα ανέβασμα, ώστε να βλέπετε ακριβώς ποιο μέγεθος δίνει το srcset σας στον browser και να σταματήσετε να κάνετε debug στο λάθος αρχείο.