Jak powstrzymać WordPressa przed kompresją zdjęć do 82%

WordPress ponownie koduje każdy generowany JPEG z jakością 82 w skali 0–100. Ten domyślny parametr znajduje się w WP_Image_Editor::get_default_quality() i dotyczy każdej pochodnej, którą WordPress wycina z przesłanego pliku — thumbnail, medium, medium_large, large oraz każdego dodatkowego rozmiaru zarejestrowanego przez szablon. W przypadku fotografii 82 to rozsądny kompromis między rozmiarem pliku a artefaktami. Ale dla zrzutów ekranu, przechwyconych elementów interfejsu, wykresów, logotypów i wszystkiego, co ma ostry tekst lub jednolity kolor, 82 jest wyraźnie destrukcyjne: dostajesz szum typu mosquito noise pełzający wokół każdej litery i banding na gładkich gradientach.

Żeby to zmienić, wystarczy dodać jeden filtr i zregenerować miniaturki. Żeby konkretnie naprawić zrzuty ekranu, lepszym rozwiązaniem jest zwykle po prostu nieprzekazywanie WordPressowi pliku JPEG na samym początku.

Skąd tak naprawdę bierze się liczba 82

WordPress obniżył domyślną jakość JPEG z 90 do 82 już w wersji 4.5 (2016) w ramach optymalizacji wagi strony. Wartość ta jest zwracana przez get_default_quality() w wp-includes/class-wp-image-editor.php i jest odczytywana za każdym razem, gdy aktywny edytor — WP_Image_Editor_Imagick, jeśli hosting ma Imagick, w przeciwnym razie WP_Image_Editor_GD — zapisuje przeskalowany plik.

Ważny szczegół: 82 jest stosowane do każdego rozmiaru pochodnego z osobna, a nie tylko raz. Przesyłasz jedno zdjęcie, a WordPress przepuszcza je przez enkoder wielokrotnie, ponownie kwantyzując z jakością 82 przy każdym przebiegu. Sam oryginalnie przesłany plik pozostaje nietknięty, jeśli mieści się poniżej progu big-image (2560 px na dłuższej krawędzi). Jeśli przekracza ten próg, WordPress tworzy ponownie zakodowany plik -scaled.jpg z jakością 82 i to jego serwuje jako rozmiar „full”. Więc „mój plik w pełnej rozdzielczości wygląda dobrze, ale wersja na stronie wygląda na rozmazaną” prawie zawsze oznacza, że srcset wybiera podrozmiar z jakością 82 albo plik -scaled.

Jak zmienić jakość

Jest jeden filtr, w który się wpina. wp_editor_set_quality to nowoczesny, kanoniczny filtr — uruchamia się dla JPEG i WebP oraz otrzymuje typ MIME, dzięki czemu można rozgałęzić logikę:

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

Umieść to w małym mu-pluginie (wp-content/mu-plugins/) lub we wtyczce dedykowanej dla strony. functions.php też zadziała, ale stracisz to ustawienie w momencie, gdy zmienisz szablon.

Spotkasz się też z zaleceniem użycia starszego filtra jpeg_quality. Wciąż się uruchamia (WordPress stosuje go zaraz po wp_editor_set_quality, tylko dla JPEG), ale nie ma powodu, żeby wpinać się w oba — wp_editor_set_quality obejmuje wszystko, co robił stary, i więcej.

O jednym każdy zapomina: ten filtr wpływa tylko na zdjęcia zakodowane po jego aktywacji. Każda miniaturka już leżąca w wp-content/uploads została zapisana z jakością 82 i przy 82 pozostanie. Zregeneruj je:

wp media regenerate --yes

Jeśli nie korzystasz z WP-CLI, wtyczka Regenerate Thumbnails robi to samo z poziomu panelu administracyjnego.

Zanim zdecydujesz się na konkretną liczbę, warto zobaczyć, co dana jakość faktycznie robi z Twoim zdjęciem, zamiast zgadywać. Nasze narzędzie do jakości JPEG w WordPressie ponownie koduje przykładowy plik w przeglądarce na każdym poziomie jakości, dzięki czemu możesz obserwować, jak pojawiają się artefakty — sprawia, że różnica między 82, 90 a 100 staje się oczywista na zrzucie ekranu w sposób, w jaki liczba w pliku konfiguracyjnym nigdy tego nie pokaże.

Lepsze rozwiązanie dla zrzutów ekranu i grafik jednolitych

Podnoszenie liczby JPEG leczy objaw. Prawdziwy problem ze zrzutami ekranu polega na tym, że JPEG to zły kodek dla nich. Kompresja DCT w JPEG jest dostrojona do fotograficznych gradientów; rozpada się na twardych, czarno-białych krawędziach tekstu i elementów interfejsu, i dokładnie dlatego jakość 82 wygląda o wiele gorzej na zrzucie ekranu niż na zdjęciu plaży.

Prześlij zamiast tego plik PNG. WordPress zachowuje podrozmiary PNG jako PNG, a PNG jest bezstratny — filtr jakości go nie dotyka, więc nie ma żadnych artefaktów przy żadnym rozmiarze, tylko czyste ponowne próbkowanie. W przypadku zrzutu ekranu dobrze zoptymalizowany PNG jest często mniejszy niż JPEG wysokiej jakości tego samego zdjęcia, ponieważ jednolity kolor kompresuje się świetnie w PNG, a fatalnie w JPEG.

Jeśli chcesz mniejszych plików formatu stratnego bez uszkadzania krawędzi jak w JPEG, WebP to złoty środek — ale jego jakość nadal kontrolujesz przez ten sam filtr wp_editor_set_quality pokazany powyżej, rozgałęziając na image/webp.

Czego nie robić

Nie ustawiaj jakości na 100 globalnie. To najczęściej wybierana odpowiedź w połowie wątków na forach, i jest błędna. JPEG z jakością 100 nie jest bezstratny — nadal kwantyzuje — ale za to znacząco powiększa każdą fotografię na Twojej stronie bez żadnego widocznego zysku, obniżając LCP i Core Web Vitals. Podnieś liczbę dla formatu, który tego potrzebuje, albo zmień format dla grafik; nie wysadzaj kompresji na całej stronie.

Nie edytuj class-wp-image-editor.php. Zmiana wartości zwracanej przez get_default_quality() w rdzeniu działa do momentu, aż następne wp core update po cichu ją nadpisze. Użyj filtra.

Nie wyłączaj rozmiarów zdjęć, żeby „uniknąć kompresji”. Wyłączenie generowania miniaturek nie zatrzymuje ponownego kodowania — psuje responsywny srcset, przez co przeglądarki pobierają Twoje zdjęcie w pełnym rozmiarze na telefonach. Inny problem, gorszy skutek.

Nie zakładaj, że ponowne przesłanie naprawi istniejące zdjęcia. Jeśli ustawisz filtr, ale pominiesz krok regeneracji, każda stara pochodna nadal ma jakość 82. Filtr działa wyłącznie na przyszłość.

Nie obwiniaj pliku -scaled, jeśli Twoje zdjęcia mają poniżej 2560 px — ta ścieżka nigdy się dla nich nie uruchamia. Jeśli rzeczywiście w nią trafiasz i chcesz, żeby serwowany był nietknięty oryginał, to osobne ustawienie; zobacz wyłączanie plików scaled.

Nadal masz problem?

Jeśli konkretny rozmiar wciąż wygląda źle po regeneracji, sprawdź, który plik strona faktycznie serwuje — otwórz zdjęcie w nowej karcie i sprawdź, czy nazwa pliku kończy się przyrostkiem z wymiarami (-1024x768.jpg) czy -scaled.jpg. Inspektor rozmiarów zdjęć pokazuje każdą pochodną, jaką WordPress generuje z jednego przesłanego pliku, dzięki czemu możesz zobaczyć dokładnie, który rozmiar srcset przekazuje przeglądarce, i przestać debugować niewłaściwy plik.