Pigilan ang WordPress sa Pag-compress ng Iyong mga Imahe sa 82%

Ini-re-encode ng WordPress ang bawat JPEG na nililikha nito sa quality 82 sa 0–100 na scale. Ang default na iyon ay nasa WP_Image_Editor::get_default_quality() at nalalapat sa bawat derivative na pinuputol ng WordPress mula sa iyong upload — thumbnail, medium, medium_large, large, at bawat karagdagang image size na irinerehistro ng iyong theme. Para sa mga litrato, ang 82 ay isang makatuwirang balanse sa pagitan ng laki ng file at mga artifact. Para sa mga screenshot, UI capture, chart, logo, at anumang may matatalim na teksto o patag na kulay, ang 82 ay kitang-kitang mapanira: makikita mo ang mosquito noise na gumagapang sa paligid ng bawat titik at banding sa mga makikinis na gradient.

Para baguhin ito, magdagdag ng isang filter at i-regenerate ang iyong mga thumbnail. Para ayusin ang mga screenshot nang tiyak, ang mas magandang sagot ay karaniwang huwag nang bigyan ang WordPress ng JPEG sa una pa lang.

Saan talaga nanggaling ang numerong 82

Ibinaba ng WordPress ang default na JPEG nito mula 90 patungong 82 noong 4.5 (2016) bilang isang page-weight optimization. Ang halaga ay ibinabalik ng get_default_quality() sa wp-includes/class-wp-image-editor.php at binabasa tuwing ang aktibong editor — WP_Image_Editor_Imagick kung may Imagick ang iyong host, kung hindi ay WP_Image_Editor_GD — ay sumusulat ng isang na-resize na file.

Ang mahalagang detalye: ang 82 ay inilalapat kada derivative size, hindi minsan lang. Mag-upload ng isang imahe, at ipapadaan ito ng WordPress sa encoder nang maraming beses, na muling nagku-quantize sa quality 82 sa bawat pass. Ang orihinal na na-upload na file mismo ay hindi ginagalaw kung ito ay nasa ilalim ng big-image threshold (2560px sa mahabang gilid). Kung lumampas ito sa threshold na iyon, gagawa ang WordPress ng na-re-encode na -scaled.jpg sa quality 82 at ihahain iyon bilang “full” size. Kaya ang “maganda ang tingin ng aking full-resolution na imahe pero mukhang smeared ang bersyon sa page” ay halos palaging isang srcset na pumipili ng quality-82 na sub-size o ang -scaled na file.

Paano baguhin ang quality

May isang filter na dapat i-hook. Ang wp_editor_set_quality ang moderno at kanonikal na isa — pumuputok ito para sa JPEG at WebP at tumatanggap ng MIME type kaya maaari kang mag-branch:

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

Ilagay ito sa isang maliit na mu-plugin (wp-content/mu-plugins/) o isang site-specific na plugin. Gumagana rin ang functions.php, pero mawawala ang setting sa sandaling lumipat ka ng theme.

Makikita mo rin na inirerekomenda ang mas lumang jpeg_quality filter. Pumuputok pa rin ito (inilalapat ito ng WordPress kaagad pagkatapos ng wp_editor_set_quality, JPEG-only), pero walang dahilan para i-hook ang dalawa — sinasaklaw na ng wp_editor_set_quality ang lahat ng ginagawa ng luma at higit pa.

Isang bagay na nakakalimutan ng lahat: ang filter na ito ay nakakaapekto lang sa mga imaheng na-encode pagkatapos itong maging aktibo. Bawat thumbnail na nasa wp-content/uploads na ay isinulat sa 82 at mananatiling 82. I-regenerate ang mga ito:

wp media regenerate --yes

Kung wala ka sa WP-CLI, ginagawa ng Regenerate Thumbnails plugin ang parehong bagay sa pamamagitan ng admin.

Bago ka magpasya sa isang numero, sulit na makita kung ano talaga ang ginagawa ng isang partikular na quality sa iyong imahe kaysa manghula. Ang aming WordPress JPEG quality tool ay nagre-re-encode ng isang sample sa browser sa bawat quality level para makita mo ang mga artifact na lumilitaw — pinapadali nitong maunawaan ang pagkakaiba sa pagitan ng 82, 90, at 100 sa isang screenshot sa paraang hindi kayang ipakita ng isang numero sa config file.

Ang mas magandang ayos para sa mga screenshot at flat graphics

Ang pagtataas ng JPEG na numero ay ginagamot ang sintomas. Ang tunay na problema sa mga screenshot ay ang JPEG ay maling codec para sa kanila. Ang DCT compression ng JPEG ay ni-tune para sa mga photographic gradient; nasisira ito sa matigas na itim-sa-puting mga gilid ng teksto at UI chrome, na siyang eksaktong dahilan kaya mas mukhang mas masahol ang quality 82 sa isang screenshot kaysa sa litrato ng dalampasigan.

Mag-upload ng PNG sa halip. Pinapanatili ng WordPress ang mga PNG sub-size bilang PNG, at ang PNG ay lossless — hindi hinahawakan ito ng quality filter, kaya walang mga artifact sa anumang laki, malinis na resampling lang. Para sa isang screenshot, ang isang mahusay na na-optimize na PNG ay kadalasang mas maliit kaysa sa isang high-quality na JPEG ng parehong imahe, dahil ang flat color ay maganda ang compress sa PNG at napakasama sa JPEG.

Kung gusto mo ang mas maliliit na file ng isang lossy na format nang walang edge damage ng JPEG, ang WebP ang gitnang daan — pero kinokontrol mo pa rin ang quality nito sa pamamagitan ng parehong wp_editor_set_quality filter na ipinakita sa itaas, na nagbi-branch sa image/webp.

Ano ang hindi dapat gawin

Huwag itakda ang quality sa 100 nang global. Ito ang pinakamataas na na-vote na sagot sa kalahati ng mga forum thread, at ito ay mali. Ang quality 100 JPEG ay hindi lossless — nagku-quantize pa rin ito — pero pinapalobo nito ang bawat litrato sa iyong site nang malaki nang walang nakikitang benepisyo, na humihila pababa sa LCP at Core Web Vitals. Itaas ang numero para sa format na nangangailangan nito, o baguhin ang format para sa mga graphic; huwag sirain ang compression sa buong site.

Huwag i-edit ang class-wp-image-editor.php. Ang pagbabago ng return value ng get_default_quality() sa core ay gumagana hanggang sa susunod na wp core update na tahimik na magpapapatong dito. Gamitin ang filter.

Huwag i-disable ang mga image size para “iwasan ang compression.” Ang pag-off ng thumbnail generation ay hindi pumipigil sa re-encoding — sinisira nito ang responsive srcset, kaya nagda-download ang mga browser ng iyong full-size na imahe sa mga telepono. Ibang problema, mas masamang resulta.

Huwag isipin na inaayos ng re-uploading ang mga umiiral na imahe. Kung itinakda mo ang filter pero nilaktawan ang regenerate na hakbang, ang bawat lumang derivative ay quality 82 pa rin. Ang filter ay forward-looking lang.

Huwag sisihin ang -scaled na file kung ang iyong mga imahe ay nasa ilalim ng 2560px — hindi kailanman tumatakbo ang path na iyon para sa kanila. Kung tinatamaan mo ito at gusto mong ihain ang hindi nagalaw na orihinal, iyon ay hiwalay na setting; tingnan ang disabling scaled images.

Nasisipit pa rin?

Kung ang isang partikular na laki ay mukhang mali pa rin pagkatapos i-regenerate, kumpirmahin kung aling file ang aktwal na inihahain ng page — buksan ang imahe sa isang bagong tab at tingnan kung nagtatapos ang filename sa isang dimension suffix (-1024x768.jpg) o -scaled.jpg. Ipinapakita ng image sizes inspector ang bawat derivative na nililikha ng WordPress mula sa isang upload, kaya makikita mo nang eksakto kung aling laki ang ibinibigay ng iyong srcset sa browser at itigil ang pag-debug sa maling file.