Dimensiune imagine reprezentativă WordPress: 1200×630 + a ta

Răspuns scurt: dacă nu știi încă dimensiunea temei tale, folosește 1200 x 630 pixeli (aproximativ 1.91:1). Este dimensiunea de previzualizare a linkurilor recomandată de Facebook, iar modulele SEO folosesc de obicei imaginea reprezentativă ca imagine de distribuire.

În articolul propriu-zis contează dimensiunea pe care o afișează tema ta. WordPress salvează fiecare imagine încărcată în mai multe dimensiuni, iar tema alege care dintre ele apare. Temele clasice stabilesc asta cu set_post_thumbnail_size() sau add_image_size(); temele bazate pe blocuri o stabilesc în blocul Imagine reprezentativă. Dacă tema decupează la 16:9 sau pătrat, o imagine de 1200 x 630 poate pierde o parte din marginile din stânga și din dreapta. Află dimensiunea temei tale (mai jos găsești patru metode), apoi încarcă o imagine cel puțin la fel de mare sau de aproximativ două ori mai lată, pentru imagini clare pe ecranele cu densitate mare.

Ca să vezi toate dimensiunile pe care WordPress le va crea dintr-o anumită imagine, pune-o în instrumentul pentru dimensiunile imaginilor WordPress.

Ce dimensiune folosești, în funcție de locul în care apare imaginea

Unde apare imaginea	Dimensiunea de încărcat	Note
Articolele tale, când nu știi încă dimensiunea temei	1200 x 630 sau 2400 x 1260 pentru imagini mai clare	Merge și pentru previzualizarea linkurilor cât timp afli dimensiunea temei
Articolele tale, când știi dimensiunea temei	Aproximativ dublul lățimii imaginii reprezentative din temă, la același raport	WordPress face copii mai mici dintr-o imagine încărcată, niciodată mai mari
Previzualizări de linkuri pe Facebook	Cel puțin 1200 x 630 (aproximativ 1.91:1); 1200 x 628 are aproape aceeași formă	Din ghidul Facebook pentru distribuire
Google Discover	Cel puțin 1200 px lățime, 16:9 (de exemplu 1200 x 675)	Din ghidul Google pentru Discover

Dimensiunile imaginilor WordPress pe scurt

Fiecare imagine încărcată primește copii redimensionate pentru fiecare dimensiune înregistrată. Acestea sunt dimensiunile înregistrate de nucleul WordPress, cu valorile implicite din Theme Handbook și din referința funcțiilor din nucleu:

Numele dimensiunii	Dimensiuni implicite	Se poate schimba în Setări > Media?	Note
thumbnail	150 x 150, decupată	Da	Are o casetă „decupează la dimensiunile exacte”
medium	maxim 300 x 300	Da	Redimensionată proporțional
medium_large	768 lățime, fără limită de înălțime	Nu	Folosită mai ales în srcset
large	maxim 1024 x 1024	Da	Redimensionată proporțional
1536x1536	maxim 1536 x 1536	Nu	Adăugată în WordPress 5.3 pentru ecrane cu densitate mare
2048x2048	maxim 2048 x 2048	Nu	Adăugată în WordPress 5.3 pentru ecrane cu densitate mare
post-thumbnail	Stabilită de temă	Nu	Există doar dacă tema apelează set_post_thumbnail_size()
full	Fișierul tău original	Nu	Fișierele foarte mari sunt micșorate întâi (vezi mai jos)

„Maxim” înseamnă că WordPress încadrează imaginea în acel chenar și îi păstrează proporțiile. O fotografie de 2000 x 1000 devine 1024 x 512 la large, nu 1024 x 1024.

Temele și modulele adaugă des alte dimensiuni cu add_image_size(). WooCommerce, de exemplu, adaugă propriile dimensiuni pentru produse, pe care le explicăm în ghidul nostru despre dimensiunea imaginilor de produs WooCommerce.

Încă o regulă afectează fișierele mari. Din WordPress 5.3, dacă o imagine are mai mult de 2560 de pixeli lățime sau înălțime, WordPress o micșorează și folosește copia micșorată drept cea mai mare dimensiune disponibilă. Pragul vine din filtrul big_image_size_threshold, a cărui valoare implicită este 2560. Dacă vezi -scaled în numele fișierelor și vrei să știi dacă merită să dezactivezi asta, citește cum dezactivezi imaginile scalate în WordPress.

De unde vine de fapt dimensiunea imaginii reprezentative

O imagine reprezentativă este orice imagine setată în panoul Imagine reprezentativă din editorul de articole. Ce văd vizitatorii depinde de felul în care tema o afișează.

Teme clasice

O temă clasică activează imaginile reprezentative și înregistrează dimensiunea în fișierul ei functions.php:

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

set_post_thumbnail_size() înregistrează o dimensiune numită post-thumbnail. Al treilea argument controlează decuparea. Cu false (implicit), WordPress redimensionează imaginea ca să încapă în 1200 x 675. Cu true, o taie exact la 1200 x 675 pornind din centru, așa că tot ce iese dintr-un chenar 16:9 se pierde. Poți transmite și un array, de exemplu array( 'center', 'top' ), ca să alegi ce parte rămâne.

Multe teme înregistrează dimensiuni suplimentare cu nume pentru diferite șabloane:

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

Apoi șablonul alege una după nume:

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

Apelată fără nume, the_post_thumbnail() folosește post-thumbnail. Deci dimensiunea reală a imaginii reprezentative într-o temă clasică este cea numită în șablon, iar arhiva blogului poate folosi alta decât pagina unui articol.

Teme bazate pe blocuri

Temele bazate pe blocuri, inclusiv temele gratuite de pe acest site, afișează imaginea reprezentativă cu blocul Imagine reprezentativă. Referința blocurilor din nucleu îi enumeră setările, printre care sizeSlug (ce dimensiune înregistrată se încarcă), aspectRatio, width, height și scale.

Asta schimbă locul în care cauți. Deschide Aspect > Editor, editează șablonul pentru articole individuale și selectează blocul Imagine reprezentativă. Bara laterală arată ce dimensiune de imagine încarcă blocul și dacă este setat un raport de aspect. Raportul de aspect se aplică în browser prin CSS, așa că fișierul rămâne același și se schimbă doar cadrul vizibil. Dacă blocul cere un cadru 16:9 și imaginea ta este pătrată, o parte din ea este ascunsă. Șabloanele pentru arhive și pagina principală pot avea alte setări decât șablonul articolului individual, așa că verifică-le pe fiecare.

Cum afli dimensiunea imaginii reprezentative din tema ta

Încearcă în ordinea de mai jos. Prima metodă care îți dă un răspuns e suficientă.

1. Verifică documentația temei. Temele bune menționează dimensiunea recomandată pentru imaginea reprezentativă. Dacă apare acolo, folosește-o.

2. Listează dimensiunile înregistrate cu WP-CLI. Dacă ai acces la linia de comandă, wp media image-size afișează fiecare dimensiune înregistrată cu lățimea, înălțimea, setarea de decupare și raportul:

   wp media image-size

3. Caută în fișierele temei. Într-o temă clasică, caută în functions.php (și în fișierele pe care le include) set_post_thumbnail_size și add_image_size, apoi caută în single.php sau în părțile de șablon numele transmis către the_post_thumbnail(). Într-o temă bazată pe blocuri, verifică blocul Imagine reprezentativă în Editorul site-ului, ca mai sus.

4. Inspectează un articol publicat. Dă clic dreapta pe imaginea reprezentativă, alege Inspectează și citește numele fișierului din src. WordPress adaugă dimensiunile în numele copiilor redimensionate, deci my-photo-1200x675.jpg îți spune că tema a încărcat o copie de 1200 x 675. Uită-te și la srcset, pentru că pe ecranele înguste browserul poate alege o copie mai mică. Dacă numele nu conține dimensiuni, s-a folosit fișierul la dimensiunea completă.

După ce știi dimensiunea țintă, trece o imagine de probă prin instrumentul pentru dimensiunile imaginilor ca să vezi cum va arăta fiecare copie înainte să încarci un lot întreg.

Cum alegi dimensiunea fișierului încărcat

Când știi dimensiunea temei, patru alegeri decid dacă rezultatul arată bine.

• Lățimea. Încarcă cel puțin lățimea pe care o afișează tema. Pentru imagini clare pe ecranele de telefon și laptop cu densitate mare, țintește aproximativ dublul acelei lățimi. Pentru un spațiu de 1200px lățime, asta înseamnă 2400px. WordPress face copii mai mici din fișierul tău și niciodată mai mari, așa că un original prea mic este cea mai des întâlnită cauză a unei imagini neclare după încărcare.
• Raportul de aspect. Potrivește raportul cu decuparea temei. Dacă tema decupează la 16:9, dă-i 16:9 și păstrează subiectul aproape de centru, ca o decupare fixă să nu taie capete sau text.
• Mărimea fișierului. O fotografie de 2400px salvată ca JPEG la o calitate rezonabilă are de obicei câteva sute de kilobytes. Un fișier de 6000px direct din aparat doar adaugă muncă: WordPress micșorează oricum tot ce trece de 2560px, iar pixelii în plus nu ajung niciodată la vizitatori.
• Formatul fișierului. WordPress acceptă încărcarea imaginilor WebP din versiunea 5.8 și AVIF din 6.5, cu condiția ca biblioteca de imagini de pe serverul tău să le suporte. Ambele formate dau de obicei un fișier mai mic decât JPEG la o calitate asemănătoare.

Imaginea pentru rețelele sociale este o altă problemă

Când cineva distribuie articolul tău pe Facebook, LinkedIn sau alte rețele, previzualizarea vine din eticheta og:image, pe care modulele SEO o completează de obicei cu imaginea reprezentativă. Documentația Facebook despre distribuire recomandă imagini de cel puțin 1200 x 630 pixeli, cât mai aproape de raportul 1.91:1.

Vei vedea recomandată și dimensiunea 1200 x 628. Aceasta are aproape exact 1.91:1, în timp ce 1200 x 630 iese cam 1.90:1. Diferența este de doar 2 pixeli pe înălțime, așa că oricare dintre ele merge.

Dacă dimensiunea afișată de tema ta este și ea aproape de 1.91:1, o singură imagine de 1200 x 630 (sau 2400 x 1260) merge pentru ambele. Dacă tema decupează la 16:9 sau pătrat, ține conținutul important departe de marginile din stânga și din dreapta sau setează o imagine separată pentru rețelele sociale în modulul SEO.

Google Discover are propriile recomandări pentru imagini. Ghidul Google pentru Discover recomandă imagini de cel puțin 1200 px lățime, cu peste 300.000 de pixeli în total, la un raport 16:9, de exemplu 1200 x 675. Imaginile mari au nevoie și de directiva robots max-image-preview:large, pe care WordPress o adaugă implicit din versiunea 5.7, cu excepția cazului în care site-ul este setat să descurajeze motoarele de căutare.

Cum schimbi dimensiunea imaginii reprezentative

Locul în care faci modificarea depinde de dimensiune și de tema ta.

Dimensiunile din nucleu (thumbnail, medium, large). Mergi la Setări > Media și schimbă lățimea și înălțimea. Documentația ecranului Setări media descrie câmpurile, inclusiv caseta de decupare pentru miniaturi.

Dimensiunile temei într-o temă clasică. Nu edita tema părinte, pentru că o actualizare a temei îți va suprascrie modificarea. Adaugă noile valori în functions.php al unei teme copil. Dacă înregistrezi din nou o dimensiune cu același nume, o înlocuiești, iar configurarea temei copil trebuie să ruleze după cea a temei părinte:

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

Prioritatea 11 face ca acest cod să ruleze după o temă părinte legată la prioritatea implicită 10. Verifică codul temei părinte și ajustează dacă folosește o prioritate mai mare.

Teme bazate pe blocuri. Schimbă dimensiunea imaginii și raportul de aspect ale blocului Imagine reprezentativă din șablon, în Editorul site-ului. Nu ai nevoie de cod, iar schimbarea se aplică tuturor articolelor care folosesc acel șablon.

O singură imagine, fără cod. Ca să alegi ce păstrează decuparea pe o anumită imagine, deschide-o din Media > Bibliotecă și dă clic pe Editează imaginea. Decupeaz-o la raportul temei tale (instrumentul de decupare acceptă un raport de aspect, de exemplu 16:9) sau scaleaz-o, apoi salvează. WordPress aplică modificarea tuturor dimensiunilor acelei imagini și păstrează fișierul original, așa că o poți anula mai târziu prin restaurarea imaginii originale.

Regenerează miniaturile existente

O dimensiune modificată se aplică doar imaginilor încărcate de acum înainte. Imaginile deja aflate în biblioteca media își păstrează copiile vechi până când le refaci. Comanda wp media regenerate face asta:

wp media regenerate --yes

Opțiuni utile din documentația WP-CLI:

• --image_size=hero-wide reface doar acea dimensiune. Repetă opțiunea pentru mai multe dimensiuni.
• --only-missing creează dimensiunile care nu există încă și nu atinge fișierele existente, ceea ce e mai rapid după ce adaugi o dimensiune nouă.
• --skip-delete păstrează fișierele vechi ale miniaturilor. Folosește-o dacă alte site-uri, newslettere sau fluxuri trimit direct la acele fișiere.

Fără acces la linia de comandă, modulul Regenerate Thumbnails din directorul de module WordPress.org face același lucru din panou. Fă întâi o copie de siguranță dacă ai o bibliotecă mare, pentru că regenerarea rescrie multe fișiere.

Greșeli frecvente

• Te oprești la 1200 x 630. E un punct de pornire bun și se potrivește pentru previzualizarea linkurilor, dar dacă tema ta decupează la 16:9 sau pătrat, o parte din imagine este tăiată. Verifică dimensiunea temei înainte să încarci un lot întreg.
• Dezactivezi dimensiunile generate ca să „păstrezi originalul”. Dacă tema nu are copii mai mici, poate ajunge să încarce fișierul complet pe orice ecran, ceea ce încetinește pagina pe telefoane. Copiile redimensionate există tocmai ca să prevină asta.
• Modifici codul dimensiunilor și sari peste regenerare. Codul funcționează, dar doar pentru imaginile noi. De aceea mulți ajung la concluzia că schimbarea dimensiunii „nu a făcut nimic”.
• Schimbi dimensiunea în tema părinte. Următoarea actualizare a temei o șterge. Folosește o temă copil sau Editorul site-ului.

Dacă imaginea arată tot greșit după ce ai potrivit dimensiunea, raportul și ai regenerat, compară numele fișierului încărcat de browser cu dimensiunile pe care, conform instrumentului pentru dimensiunile imaginilor, ar trebui să le creeze WordPress. Când diferă, de multe ori un modul de optimizare sau un redimensionator de imagini dintr-un CDN aflat între WordPress și vizitator livrează propria versiune.