Anong Size Dapat ang Featured Image sa WordPress?

Ang numerong hinahanap ng karamihan ay 1200 x 630 pixels. Iyan ang ratio na ginagamit ng Facebook, LinkedIn, at X para sa link previews (1.91:1), at iyan ang dapat na size ng isang Open Graph image. Kung nag-set ka ng featured image mainly para maayos ang itsura ng mga shared link, gamitin mo ang 1200 x 630 at doon ka na tumigil.

Pero hindi iyon ang numerong aktuwal na ipinapakita ng theme mo sa post. Bihira lang ipakita ng WordPress ang featured image mo sa original size nito. Humihingi ang theme ng isang partikular na naka-register na image size, at ihahain ng WordPress kung aling pre-generated na crop ang tumutugma. Kaya nga ang isang image na perpekto sa Facebook ay puwedeng maging malabo, unat, o mali ang crop sa loob ng single-post template mo. Ang “tamang” size ay depende sa theme, hindi sa isang unibersal na patakaran.

Bakit ino-override ng theme ang numero

Kapag nag-upload ka ng image, hindi iisang file lang ang iniimbak ng WordPress. Pinapatakbo nito ang wp_generate_attachment_metadata() at gumagawa ito ng derivative para sa bawat naka-register na image size: ang tatlong default (thumbnail, medium, large), ang medium_large ng block editor (768px ang lapad), plus kahit anong size na na-register ng theme o ng isang plugin gamit ang add_image_size().

Ang isang theme na gustong gumawa ng malapad na 16:9 hero ay gagawa ng ganito sa functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Ang pang-apat na argument, ang true, ay nangangahulugang hard crop. Ikri-crop ng WordPress ang image mo sa eksaktong 1200 x 675, at itatapon nito ang anumang hindi kasya sa 16:9 na kahon. Kung ang subject mo ay malapit sa itaas o ibaba ng frame, mapuputol ito. Kapag naka-set sa false (o inalis), mag-i-scale ito nang proporsyonal at ang huling dimensyon ay puwedeng maiba sa hiningi mo.

Pagkatapos, ang template naman ang magdedesisyon kung aling size ang kukunin:

the_post_thumbnail( 'hero-featured' );

Kung anong pangalan ang ipinasa sa the_post_thumbnail(), iyon ang crop na ire-render. Kaya ang tunay na featured image size sa site mo ay tinutukoy sa dalawang lugar na hindi mo isinulat: ang add_image_size() call at ang the_post_thumbnail() call sa theme. Ang pag-upload ng mas malaking file ay hindi nagbabago sa alinman sa dalawang ito.

May isa pang layer. Naghahain ang WordPress ng srcset, kaya sa mas maliliit na screen, puwedeng i-load ng browser ang medium o large na derivative sa halip na ang buong crop. Ang dimensyong nakikita mo sa DevTools ay kadalasang hindi ang na-upload mo.

Paano ito ayusin, ayon sa pagkakasunod-sunod

1. Alamin kung ano talaga ang hinihingi ng theme mo. Bago ka manghula, tingnan mo ang bawat size na ginagawa ng WordPress mula sa image mo at kung alin dito ang naka-crop na hero. I-drop mo ang image mo sa WordPress image sizes tool — ipinapakita nito ang bawat derivative na gagawin ng WP, sa eksaktong pixel dimensions, para maitugma mo ang source mo sa tunay na target sa halip na sa alamat na 1200x630.

2. Mag-upload nang sapat kalaki para masaklaw ang pinakamalaking crop. Kung ang hero ng theme ay 1200 x 675, mag-upload ka ng hindi bababa doon, at mas mabuti pa kung 2x para sa retina (2400 x 1350). Malinis mag-downscale ang WordPress; hindi ito kailanman nag-uupscale. Ang kulang-sa-size na source ang pinakakaraniwang dahilan ng malabong featured image.

3. Itugma ang aspect ratio mo sa crop ng theme. Kung hard-crop ang theme sa 16:9, bigyan mo ito ng 16:9. Ikumpose mo nang nasa gitna ang subject para hindi maputulan ng ulo ang sinuman sa hard crop.

4. Kung mali ang naka-register na size, baguhin mo ito at i-regenerate. I-edit ang mga value ng add_image_size() sa isang child theme, tapos i-rebuild ang mga umiiral na thumbnail — ang mga bagong dimensyon ay para lang sa mga susunod na upload hangga’t hindi mo ito ginagawa:

wp media regenerate --yes

Walang WP-CLI? Ang Regenerate Thumbnails plugin ay gumagawa ng parehong bagay mula sa dashboard.

Ano ang hindi dapat gawin

Huwag ka lang mag-upload ng 1200x630 na image at ipagpalagay na ayos na iyon. Kung ang naka-register na size ng theme ay 16:9, hard-crop-in ng WordPress ang 1.91:1 mong image at mawawala ang itaas at ibaba. Magkaibang trabaho ang numerong Open Graph at ang numerong display.

Huwag mong i-disable ang mga image size ng WordPress para “mapanatili ang original.” May makikita kang payo na i-set sa 0 ang mga intermediate size o i-unhook ang the_post_thumbnail. Kapag ganoon, babalik ang theme sa paghahain ng full-size na file na naka-scale down sa browser — isang 4000px na JPEG na ipinapadala sa telepono. Bumabagsak ang load time mo at Core Web Vitals dahil dito. May dahilan kung bakit umiiral ang mga derivative.

Huwag mong pagkatiwalaan ang “recommended size” ng plugin higit sa aktuwal na naka-register na size ng theme mo. Nagre-recommend ang mga SEO plugin ng 1200x630 para sa OG tag, na tama para sa tag na iyon. Wala itong sinasabi tungkol sa kung ano ang kini-crop ng single-post template mo.

Huwag mong laktawan ang wp media regenerate pagkatapos baguhin ang mga size. Ang pag-edit sa add_image_size() ay walang epekto sa mga image na na-upload na. Ito ang hakbang na nakakalimutan ng mga tao, tapos ikokonklusyon nilang hindi gumana ang code.

Nasstuck pa rin?

Kung mali pa rin ang image matapos itugma ang dimensyon at mag-regenerate, ang problema ay kadalasang ang crop mode (true vs false) o isang srcset na naghahain ng mas maliit na derivative kaysa sa inaasahan mo. I-drop mo ang file sa image sizes tool para makita mo nang eksakto kung aling mga crop ang ginagawa ng setup mo, tapos ikumpara mo iyon sa kung ano ang ini-load ng browser sa DevTools. Itugma mo ang dalawang iyon at matatapos na ang paghula-hula.