Oprește WordPress din a-ți comprima imaginile la 82%

WordPress reencodează fiecare JPEG pe care îl generează la calitatea 82 pe o scală de la 0 la 100. Acea valoare implicită se află în WP_Image_Editor::get_default_quality() și se aplică fiecărei variante pe care WordPress o decupează din imaginea ta încărcată — thumbnail, medium, medium_large, large și fiecare dimensiune suplimentară pe care o înregistrează tema ta. Pentru fotografii, 82 este un compromis rezonabil între dimensiunea fișierului și artefacte. Pentru capturi de ecran, capturi de interfață, grafice, logo-uri și orice conține text clar sau culoare plată, 82 este vizibil distructiv: apare zgomot de tip „mosquito noise” în jurul fiecărei litere și benzi (banding) de-a lungul gradienturilor fine.

Ca să o modifici, adaugi un filtru și îți regenerezi thumbnail-urile. Ca să repari în mod specific capturile de ecran, răspunsul mai bun este de obicei să nu-i mai dai deloc lui WordPress un JPEG de la bun început.

De unde provine de fapt numărul 82

WordPress a coborât calitatea JPEG implicită de la 90 la 82 în versiunea 4.5 (2016), ca optimizare a greutății paginii. Valoarea este returnată de get_default_quality() din wp-includes/class-wp-image-editor.php și este citită ori de câte ori editorul activ — WP_Image_Editor_Imagick dacă găzduirea ta are Imagick, altfel WP_Image_Editor_GD — scrie un fișier redimensionat.

Detaliul important: 82 se aplică per variantă de dimensiune, nu o singură dată. Încarci o imagine și WordPress o trece prin encoder de mai multe ori, recuantizând la calitatea 82 la fiecare pas. Fișierul încărcat original rămâne neatins dacă se află sub pragul pentru imagini mari (2560px pe latura lungă). Dacă depășește acel prag, WordPress produce un fișier -scaled.jpg reencodat la calitatea 82 și îl servește pe acela ca dimensiune „full”. Așa că „imaginea mea la rezoluție maximă arată bine, dar versiunea de pe pagină arată încețoșată” înseamnă aproape întotdeauna un srcset care alege o sub-dimensiune la calitatea 82 sau fișierul -scaled.

Cum se modifică calitatea

Există un singur filtru la care te poți conecta. wp_editor_set_quality este cel modern și canonic — se declanșează pentru JPEG și WebP și primește tipul MIME, ca să poți ramifica logica:

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

Pune-l într-un mu-plugin mic (wp-content/mu-plugins/) sau într-un plugin specific site-ului. functions.php merge și el, dar pierzi setarea în momentul în care schimbi tema.

Vei vedea recomandat și filtrul mai vechi jpeg_quality. Încă se declanșează (WordPress îl aplică imediat după wp_editor_set_quality, doar pentru JPEG), dar nu există niciun motiv să le folosești pe amândouă — wp_editor_set_quality acoperă tot ce făcea cel vechi și în plus.

Un lucru pe care toată lumea îl uită: acest filtru afectează doar imaginile encodate după ce este activ. Fiecare thumbnail care se află deja în wp-content/uploads a fost scris la 82 și va rămâne la 82. Regenerează-le:

wp media regenerate --yes

Dacă nu folosești WP-CLI, plugin-ul Regenerate Thumbnails face același lucru din interfața de administrare.

Înainte să te fixezi pe un număr, merită să vezi ce face de fapt o anumită calitate imaginii tale, în loc să ghicești. Unealta noastră pentru calitatea JPEG în WordPress reencodează o mostră direct în browser la fiecare nivel de calitate, ca să poți urmări cum apar artefactele — face diferența dintre 82, 90 și 100 evidentă pe o captură de ecran, într-un mod în care un număr dintr-un fișier de configurare nu o va face niciodată.

Soluția mai bună pentru capturi de ecran și grafice plate

Creșterea numărului JPEG tratează simptomul. Problema reală cu capturile de ecran este că JPEG este codecul greșit pentru ele. Compresia DCT a JPEG este calibrată pentru gradienturi fotografice; se destramă pe marginile dure alb-negru ale textului și ale elementelor de interfață, exact motivul pentru care calitatea 82 arată mult mai rău pe o captură de ecran decât pe o fotografie a unei plaje.

Încarcă în schimb un PNG. WordPress păstrează sub-dimensiunile PNG ca PNG, iar PNG este fără pierderi (lossless) — filtrul de calitate nu îl atinge, așa că nu există artefacte la nicio dimensiune, doar reeșantionare curată. Pentru o captură de ecran, un PNG bine optimizat este adesea mai mic decât un JPEG de înaltă calitate al aceleiași imagini, pentru că, oricum, culoarea plată se comprimă bine în PNG și îngrozitor în JPEG.

Dacă vrei fișierele mai mici ale unui format cu pierderi, dar fără deteriorarea marginilor pe care o produce JPEG, WebP este calea de mijloc — dar tot îi controlezi calitatea prin același filtru wp_editor_set_quality arătat mai sus, ramificând pe image/webp.

Ce să nu faci

Nu seta calitatea la 100 la nivel global. Acesta este răspunsul cu cele mai multe voturi pe jumătate dintre discuțiile de pe forumuri și este greșit. JPEG la calitatea 100 nu este fără pierderi — tot cuantizează — dar umflă fiecare fotografie de pe site-ul tău cu o marjă mare, fără niciun câștig vizibil, trăgând în jos LCP și Core Web Vitals. Crește numărul pentru formatul care are nevoie de asta sau schimbă formatul pentru grafice; nu arunca în aer compresia pe tot site-ul.

Nu edita class-wp-image-editor.php. Modificarea valorii returnate de get_default_quality() din nucleu funcționează până la următorul wp core update, care o suprascrie fără avertisment. Folosește filtrul.

Nu dezactiva dimensiunile de imagine ca să „eviți compresia”. Oprirea generării de thumbnail-uri nu oprește reencodarea — strică srcset-ul responsiv, așa că browserele descarcă imaginea la dimensiune maximă pe telefoane. Altă problemă, rezultat mai prost.

Nu presupune că reîncărcarea repară imaginile existente. Dacă setezi filtrul, dar sari peste pasul de regenerare, fiecare variantă veche este în continuare la calitatea 82. Filtrul acționează doar de aici înainte.

Nu da vina pe fișierul -scaled dacă imaginile tale sunt sub 2560px — acea cale nu rulează niciodată pentru ele. Dacă o atingi și vrei să fie servit originalul neatins, aceasta este o setare separată; vezi dezactivarea imaginilor scalate.

Tot blocat?

Dacă o anumită dimensiune tot arată prost după regenerare, confirmă ce fișier servește de fapt pagina — deschide imaginea într-un tab nou și verifică dacă numele fișierului se termină cu un sufix de dimensiune (-1024x768.jpg) sau cu -scaled.jpg. Inspectorul de dimensiuni de imagine arată fiecare variantă pe care WordPress o generează dintr-o singură încărcare, astfel încât să poți vedea exact ce dimensiune îi dă srcset-ul tău browserului și să nu mai depanezi fișierul greșit.