Bakit Malabo ang mga Larawan sa WordPress Pagkatapos I-upload (at ang Solusyon)

Siyam sa sampung beses, hindi naman talaga malabo ang mga larawan mo — na-downscale sila ng WordPress noong ni-upload at ang naka-cap na kopya na ang inihahain ngayon. Simula WordPress 5.3, anumang larawan na mas malapad o mas mataas sa 2560px ay tahimik na pinapalitan ng -scaled na bersyon na naka-max sa 2560px sa pinakamahabang gilid nito, at ang mas maliit na file na iyon ang ini-stretch ng theme mo para punuin ang isang hero, full-width block, o retina display. Ang solusyon ay patunayan na iyon nga ang nangyari, tapos alinman sa itaas ang threshold o itigil ang pag-upload ng mga larawang kailangang mas malaki kaysa sa box na kinalalagyan nila.

Bakit ito nangyayari

Kapag nag-upload ka ng litrato, pinapatakbo ng WordPress ang wp_create_image_subsizes() (nasa wp-admin/includes/image.php). Kung ang pinakamahabang gilid ay lampas sa big_image_size_threshold — 2560px bilang default — tinatawag nito ang _wp_image_meta_replace_original(), gumagawa ng your-photo-scaled.jpg, at binabago ang attachment metadata para ang full size ay tumuro na sa scaled na kopya. Ang tunay mong original ay itinatago pa rin sa disk bilang your-photo.jpg at nire-reference ng wp_get_original_image_path(), pero walang naghahain nito sa front end. Bawat intermediate size at bawat srcset candidate ay ginagawa mula sa 2560px na scaled file, hindi mula sa in-upload mo.

Kaya heto ang blur. Nag-upload ka ng malinaw na 4000px na larawan para sa isang full-bleed header. Kina-cap ito ng WordPress sa 2560px. Sa isang standard display na nasa 1600px-wide na container, ayos lang iyon. Sa isang 2x retina screen, kailangan ng browser ng humigit-kumulang 3200 tunay na pixel para punuin nang malinaw ang container na iyon, pero 2560 lang ang meron, kaya ina-upscale nito ang pagkakaiba. Malabong gilid, malabsang text-sa-loob-ng-larawan, mismong ang “blurry after upload” na sintomas.

Ang kabilang kalahati ng parehong problema ay ang pagpili ng srcset ng size na masyadong maliit. Kung ang theme mo ay nag-uulat ng content width na hindi tumutugma sa aktwal na nire-render na box, ibinibigay ng WordPress sa browser ang isang -1024x683 o -1536x1024 na intermediate at ini-stretch ito paitaas. Parehong sanhi — mas malaking display box kaysa sa mga pixel na available — pero ibang trigger.

Tingnan kung ano talaga ang inihain ng WordPress

Huwag manghula. I-right-click ang malabong larawan, buksan ito sa bagong tab, at tingnan ang filename sa URL. Kung nagtatapos ito sa -scaled.jpg o sa isang dimension suffix tulad ng -1024x683.jpg, nakumpirma mo na: nire-render ng browser ang isang downscaled derivative, hindi ang in-upload mo. Puwede mo ring i-inspect ang element at basahin ang currentSrc para makita kung aling candidate mismo ang pinili ng browser.

Para makita ang buong larawan bago ka mag-re-upload ng kahit ano, ilagay ang larawan sa WordPress image sizes tool — ipinapakita nito ang bawat derivative na gagawin ng WordPress mula sa eksaktong file na iyon, kasama kung magkakaroon ng -scaled na kopya at sa anong dimensyon, kaya alam mo agad kung sapat ba ang laki ng source mo para sa kinalalagyan mo nito.

Sa server, puwede mong ilista ang bawat naka-cap na file:

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

Paano ito ayusin, ayon sa pagkakasunod

1. Kung talagang kailangang mas malaki sa 2560px ang mga larawan mo (malalaking hero, retina, print-quality na galleries), itaas ang threshold:

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

O patayin nang tuluyan ang cap:

add_filter( 'big_image_size_threshold', '__return_false' );

2. I-re-upload ang mga apektadong larawan. Ito ang hakbang na nilalaktawan ng mga tao. Ang pagbabago ng threshold ay nakakaapekto lang sa bago na mga upload. Ang mga larawang nasa library mo na ay pinapanatili ang lumang metadata, at ang pag-regenerate ng thumbnails ay muling gumagawa ng intermediate sizes mula sa naka-cap na -scaled file — hindi nito ibinabalik ang resolution na naitapon na. Ang maaasahang paraan ay: baguhin ang filter, burahin ang attachment, i-upload muli.

3. Kung ang source mo ay ≤2560px na at malabo pa rin, hindi ang threshold ang problema mo — mas malaki ang display box kaysa sa larawan. Mag-upload ng mas malaking source, o paliitin ang container. Para sa retina sharpness, ang source mo ay dapat humigit-kumulang dalawang beses ang CSS pixel width ng box na pinupunan nito.

4. Pagkatapos lang ng nasa itaas, saka mag-regenerate ng thumbnails para maging pare-pareho ang intermediate sizes — pero unawain na ito ay paglilinis, hindi lunas.

Ano ang hindi dapat gawin

Huwag i-crank ang JPEG quality sa 100. Nag-compress ang WordPress sa default quality na 82 sa pamamagitan ng wp_editor_set_quality, at kalahati ng payo sa internet ang nagsasabing i-override ito:

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

Ayos lang iyon para mabawasan ang compression artifacts, pero ang na-stretch, na-upscale na larawan ay isang resolution na problema, hindi compression. Ang paglipat mula 82 patungong 100 ay nagpapalaki lang ng mga file mo at halos wala itong nagagawa sa lambot na nakikita mo.

Huwag i-disable ang -scaled bilang reflex. Ang pagpatay sa cap (may tool para diyan) ang tamang desisyon kung naghahain ka ng mga larawang lampas 2560px — pero kung ang tunay mong isyu ay isang masyadong maliit na intermediate na na-stretch, walang binabago ang pag-disable nito at nawawala ang bandwidth savings mo nang walang dahilan. Mag-diagnose muna.

Huwag sisihin ang cache o mag-regenerate ng thumbnails muna. Ang regeneration ay nagbabasa mula sa parehong naka-cap na source, kaya hindi nito maibabalik ang detalye. Ang pag-clear ng CDN o page cache ay hindi makakaapekto sa isang file na maliit na sa disk mula pa sa simula.

Huwag umasa sa CSS ng theme o sa object-fit. Walang dami ng styling ang makakadagdag ng pixel. Kung ang inihain na file ay nagtatapos sa -scaled o sa isang dimension suffix, ang file ang problema, hindi ang layout.

Nasa dead-end pa rin?

Kung nakumpirma mo na ang inihain na file ay ang full-resolution mong upload — walang -scaled, walang dimension suffix — at malambot pa rin ito, tingnan kung may plugin (isang optimizer, isang CDN image-resizer, o isang lazy-load library) na muling nagsusulat ng src mo patungo sa isang compressed proxy. Patakbuhin ang larawan sa image sizes tool para kumpirmahin kung ano ang dapat gawin ng WordPress, tapos ihambing iyon sa kung ano talaga ang nilo-load ng browser. Kapag hindi magkatugma ang dalawang iyon, may bagay sa pagitan ng WordPress at ng browser ang salarin.