WordPress Featured Image Size: 1200×630 + Hanapin ang sa Iyo

Maikling sagot: kung hindi mo pa alam ang size ng theme mo, gamitin ang 1200 x 630 pixels (mga 1.91:1). Ito ang link preview size na inirerekomenda ng Facebook, at kadalasang ginagamit ng SEO plugins ang featured image bilang share image.

Sa mismong post, ang mahalaga ay ang size na ipinapakita ng theme mo. Iniimbak ng WordPress ang bawat upload sa iba’t ibang size, at ang theme ang pumipili kung alin ang lalabas. Sa classic themes, itinatakda ito ng set_post_thumbnail_size() o add_image_size(); sa block themes, sa Featured Image block. Kung 16:9 o parisukat ang crop ng theme, puwedeng mawala ang bahagi ng kaliwa at kanang gilid ng 1200 x 630 na image. Hanapin ang size ng theme mo (may apat na paraan sa ibaba), tapos mag-upload ng image na kasinlaki man lang nito, o mga doble ang lapad para malinaw sa high-density screens.

Para makita ang lahat ng size na gagawin ng WordPress mula sa isang partikular na image, ilagay ito sa WordPress image sizes tool.

Aling size ang gagamitin, ayon sa kung saan lalabas ang image

Saan lalabas ang image	Size na i-upload	Tala
Mga post mo, hindi pa alam ang size ng theme	1200 x 630, o 2400 x 1260 para mas malinaw	Gagana rin sa link previews habang hinahanap mo ang size ng theme mo
Mga post mo, alam na ang size ng theme	Mga doble ng lapad ng featured image ng theme mo, sa parehong aspect ratio	Gumagawa ang WordPress ng mas maliliit na kopya ng upload, hindi kailanman mas malalaki
Facebook link previews	Hindi bababa sa 1200 x 630 (mga 1.91:1); halos parehong hugis ang 1200 x 628	Mula sa sharing guidance ng Facebook
Google Discover	Hindi bababa sa 1200 px ang lapad, 16:9 (halimbawa 1200 x 675)	Mula sa Discover guidelines ng Google

Mga image size ng WordPress sa isang tingin

Bawat image na ina-upload mo ay nagkakaroon ng resized na kopya para sa bawat registered size. Ito ang mga size na nire-register ng WordPress core, kasama ang mga default mula sa Theme Handbook at sa core function reference:

Pangalan ng size	Default na sukat	Mababago ba sa Settings > Media?	Tala
thumbnail	150 x 150, naka-crop	Oo	May “crop to exact dimensions” na checkbox
medium	hanggang 300 x 300	Oo	Proportional na sine-scale
medium_large	768 ang lapad, walang limit sa taas	Hindi	Pangunahing ginagamit sa srcset
large	hanggang 1024 x 1024	Oo	Proportional na sine-scale
1536x1536	hanggang 1536 x 1536	Hindi	Idinagdag sa WordPress 5.3 para sa high-density screens
2048x2048	hanggang 2048 x 2048	Hindi	Idinagdag sa WordPress 5.3 para sa high-density screens
post-thumbnail	Itinatakda ng theme	Hindi	Umiiral lang kung tinatawag ng theme ang set_post_thumbnail_size()
full	Ang original mong upload	Hindi	Pinaliliit muna ang napakalalaking upload (tingnan sa ibaba)

Ang “hanggang” ay nangangahulugang ipinapasok ng WordPress ang image sa loob ng kahong iyon at pinapanatili ang proporsyon nito. Ang 2000 x 1000 na litrato ay nagiging 1024 x 512 sa large, hindi 1024 x 1024.

Madalas magdagdag ang themes at plugins ng iba pang size gamit ang add_image_size(). Halimbawa, nagdadagdag ang WooCommerce ng sarili nitong product sizes, na tinatalakay sa aming gabay sa WooCommerce product image size.

May isa pang panuntunan para sa malalaking upload. Mula WordPress 5.3, kapag lampas sa 2560 pixels ang lapad o taas ng image, pinaliliit ito ng WordPress at ginagamit ang pinaliit na kopya bilang pinakamalaking available na size. Galing ang threshold na iyon sa big_image_size_threshold filter, na 2560 ang default. Kung nakikita mo ang -scaled sa mga file name at gusto mong malaman kung dapat itong i-off, basahin ang paano i-disable ang scaled images sa WordPress.

Saan talaga nanggagaling ang featured image size

Ang featured image ay kahit anong image na itinakda mo sa Featured image panel ng post editor. Ang nakikita ng mga bisita ay nakadepende sa kung paano ito ipinapakita ng theme.

Classic themes

Ini-on ng classic theme ang featured images at nire-register ang size sa functions.php nito:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

Nagre-register ang set_post_thumbnail_size() ng size na ang pangalan ay post-thumbnail. Ang ikatlong argument ang kumokontrol sa cropping. Kapag false (ang default), sine-scale ng WordPress ang image para magkasya sa loob ng 1200 x 675. Kapag true, pinuputol nito ang image nang eksaktong 1200 x 675 mula sa gitna, kaya nawawala ang anumang nasa labas ng 16:9 na kahon. Puwede ka ring magpasa ng array gaya ng array( 'center', 'top' ) para piliin kung aling bahagi ang matitira.

Maraming theme ang nagre-register ng dagdag na named sizes para sa iba’t ibang template:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Pagkatapos, pumipili ang template ng isa ayon sa pangalan:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Kapag tinawag nang walang pangalan, post-thumbnail ang ginagamit ng the_post_thumbnail(). Kaya ang totoong featured image size sa classic theme ay ang size na nakapangalan sa template, at puwedeng iba ang gamit ng blog archive kaysa sa single post view.

Block themes

Ang block themes, kasama ang mga libreng theme sa site na ito, ay nagpapakita ng featured image gamit ang Featured Image block. Nakalista sa core blocks reference ang mga setting nito, kasama ang sizeSlug (aling registered size ang ilo-load), aspectRatio, width, height at scale.

Binabago nito kung saan ka titingin. Buksan ang Appearance > Editor, i-edit ang Single Posts template, at piliin ang Featured Image block. Ipinapakita ng sidebar kung aling image size ang nilo-load nito at kung may nakatakdang aspect ratio. Inilalapat ang aspect ratio sa browser gamit ang CSS, kaya pareho pa rin ang file at ang nakikitang frame lang ang nagbabago. Kung 16:9 na frame ang hinihingi ng block at parisukat ang image mo, may bahagi nitong natatago. Puwedeng iba ang settings ng archive at home templates kaysa sa single post template, kaya suriin ang bawat isa.

Paano hanapin ang featured image size ng theme mo

Subukan ang mga ito ayon sa pagkakasunod. Sapat na ang unang makapagbibigay ng sagot.

1. Tingnan ang documentation ng theme. Sinasabi ng magagandang theme ang inirerekomendang featured image size. Kung nakalista ito, gamitin ito.

2. Ilista ang registered sizes gamit ang WP-CLI. Kung may command-line access ka, ipi-print ng wp media image-size ang bawat registered size kasama ang lapad, taas, crop setting at ratio:

   wp media image-size

3. Hanapin sa theme files. Sa classic theme, hanapin sa functions.php (at sa mga file na isinasama nito) ang set_post_thumbnail_size at add_image_size, tapos tingnan sa single.php o sa template parts ang pangalang ipinapasa sa the_post_thumbnail(). Sa block theme, suriin ang Featured Image block sa Site Editor gaya ng inilarawan sa itaas.

4. I-inspect ang isang live na post. I-right-click ang featured image, piliin ang Inspect, at basahin ang file name sa src. Idinadagdag ng WordPress ang sukat sa mga resized na kopya, kaya ang my-photo-1200x675.jpg ay nagsasabing 1200 x 675 na kopya ang nilo-load ng theme. Tingnan din ang srcset, dahil puwedeng pumili ang browser ng mas maliit na kopya sa makikitid na screen. Kung walang sukat sa pangalan, ang full-size file ang ginamit.

Kapag alam mo na ang target, patakbuhin ang isang sample image sa image sizes tool para makita kung ano ang itsura ng bawat kopya bago ka mag-upload ng maramihan.

Pagpili ng upload size

Kapag alam mo na ang size ng theme, apat na desisyon ang magtatakda kung tama ang kalalabasan.

• Lapad. Mag-upload nang kasinlapad man lang ng ipinapakita ng theme. Para malinaw sa high-density na screen ng phone at laptop, targetin ang mga doble ng lapad na iyon. Para sa 1200px na espasyo, 2400px iyon. Gumagawa ang WordPress ng mas maliliit na kopya mula sa upload mo at hindi kailanman ng mas malalaki, kaya ang sobrang liit na original ang pinakakaraniwang dahilan ng malabong image pagkatapos mag-upload.
• Aspect ratio. Itugma sa ratio ng crop ng theme. Kung 16:9 ang crop nito, bigyan ito ng 16:9 at ilagay ang subject malapit sa gitna para hindi maputol ng hard crop ang mga ulo o text.
• File size. Ang 2400px na litrato na naka-save bilang JPEG sa makatwirang quality ay karaniwang ilang daang kilobytes lang. Dagdag-trabaho lang ang pag-upload ng 6000px na file mula sa camera: pinaliliit pa rin ng WordPress ang lahat ng lampas 2560px, at hindi kailanman umaabot sa mga bisita ang sobrang pixels.
• File format. Tumatanggap ang WordPress ng WebP uploads mula version 5.8 at ng AVIF mula 6.5, basta suportado ang mga ito ng image library ng server mo. Kadalasang mas maliit ang file ng dalawang ito kaysa sa JPEG sa halos parehong quality.

Ibang trabaho ang social sharing image

Kapag may nag-share ng post mo sa Facebook, LinkedIn o iba pang network, galing ang preview sa og:image tag, na kadalasang pinupunan ng SEO plugins mula sa featured image. Inirerekomenda ng sharing documentation ng Facebook ang mga image na hindi bababa sa 1200 x 630 pixels, at kasinlapit hangga’t maaari sa 1.91:1 na ratio.

Makikita mo ring inirerekomenda ang 1200 x 628. Halos eksaktong 1.91:1 iyon, habang mga 1.90:1 naman ang 1200 x 630. Dalawang pixel lang ang pagitan nila sa taas, kaya puwede ang alinman.

Kung malapit din sa 1.91:1 ang display size ng theme mo, gagana sa pareho ang isang 1200 x 630 (o 2400 x 1260) na upload. Kung 16:9 o parisukat ang crop ng theme, ilayo sa kaliwa at kanang gilid ang mahahalagang bahagi, o mag-set ng hiwalay na social image sa SEO plugin mo.

May sariling payo ang Google Discover para sa images. Inirerekomenda ng Discover guidelines ng Google ang mga image na hindi bababa sa 1200 px ang lapad, higit sa 300,000 pixels sa kabuuan, at nasa 16:9 na ratio gaya ng 1200 x 675. Kailangan din ng malalaking image ang max-image-preview:large na robots setting, na idinadagdag ng WordPress bilang default mula version 5.7 maliban kung naka-set ang site na pigilan ang search engines sa pag-index nito.

Paano palitan ang featured image size

Kung saan mo gagawin ang pagbabago ay depende sa size at sa theme mo.

Core sizes (thumbnail, medium, large). Pumunta sa Settings > Media at palitan ang lapad at taas. Inilalarawan ng Settings Media screen documentation ang mga field, kasama ang crop checkbox para sa thumbnails.

Theme sizes sa classic theme. Huwag i-edit ang parent theme, dahil mapapatungan ng theme update ang pagbabago mo. Idagdag ang bagong values sa functions.php ng child theme. Kapag ni-register ulit ang size na may parehong pangalan, napapalitan ito, at dapat tumakbo ang setup ng child theme pagkatapos ng sa parent:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

Dahil sa priority na 11, tatakbo ito pagkatapos ng parent theme na naka-hook sa default priority na 10. Tingnan ang code ng parent at i-adjust kung mas huling priority ang gamit nito.

Block themes. Palitan ang image size at aspect ratio ng Featured Image block sa template sa Site Editor. Walang kailangang code, at maaapektuhan ng pagbabago ang bawat post na gumagamit ng template na iyon.

Isang image, walang code. Para piliin kung ano ang matitira sa crop ng isang image, buksan ito mula sa Media > Library at i-click ang Edit Image. I-crop ito sa ratio ng theme mo (tumatanggap ang crop tool ng aspect ratio gaya ng 16:9) o i-scale ito, tapos i-save. Ilalapat ng WordPress ang pagbabago sa lahat ng size ng image na iyon at pananatilihin ang original file, kaya puwede mo itong ibalik mamaya gamit ang Restore original image.

I-regenerate ang mga kasalukuyang thumbnail

Ang binagong size ay para lang sa mga bagong upload. Mananatili sa lumang kopya ang mga image na nasa media library mo na hanggang buuin mo ulit ang mga ito. Ginagawa ito ng wp media regenerate command:

wp media regenerate --yes

Mga kapaki-pakinabang na option mula sa WP-CLI documentation:

• --image_size=hero-wide binubuo ulit ang size na iyon lang. Ulitin ang flag para sa ilang size.
• --only-missing gumagawa ng mga size na wala pa at hindi ginagalaw ang mga kasalukuyang file, kaya mas mabilis ito pagkatapos magdagdag ng bagong size.
• --skip-delete pinapanatili ang lumang thumbnail files. Gamitin ito kung may ibang site, newsletter o feed na direktang naka-link sa mga file na iyon.

Kung walang command-line access, ganoon din ang ginagawa ng Regenerate Thumbnails plugin mula sa WordPress.org plugin directory, mula sa dashboard. Mag-backup muna kung malaki ang library, dahil maraming file ang isinusulat ulit ng regeneration.

Mga karaniwang pagkakamali

• Huminto sa 1200 x 630. Magandang panimula ito at bagay sa link previews, pero kung 16:9 o parisukat ang crop ng theme mo, may bahagi ng image na mapuputol. Tingnan muna ang size ng theme mo bago ka mag-upload ng maramihan.
• I-off ang mga generated size para “panatilihin ang original.” Kung walang mas maliliit na kopya ang theme, puwede nitong i-load ang buong file sa bawat screen, kaya bumabagal ang page sa phone. Ang resized na kopya ay nariyan mismo para maiwasan iyon.
• I-edit ang image size code at laktawan ang regeneration. Gumagana ang code, pero para lang sa mga bagong upload. Ito ang dahilan kung bakit maraming nagsasabing “walang nangyari” sa pagpapalit ng size.
• Palitan ang size sa parent theme. Mabubura ito ng susunod na theme update. Gumamit ng child theme o ng Site Editor.

Kung mali pa rin ang itsura ng image kahit naitugma mo na ang size at ratio at nakapag-regenerate ka na, ikumpara ang file name na nilo-load ng browser sa mga size na sinasabi ng image sizes tool na dapat gawin ng WordPress. Kapag magkaiba, kadalasan ay may optimization plugin o CDN image resizer sa pagitan ng WordPress at ng bisita na nagbibigay ng sarili nitong bersyon.