Dimensiunea imaginilor de produs în WooCommerce: cele trei dimensiuni și cum le schimbi cu adevărat

WooCommerce generează trei dimensiuni de imagine pentru fiecare fotografie de produs pe care o încarci, iar doar două dintre ele pot fi editate din administrarea WordPress. woocommerce_thumbnail este imaginea din grila catalogului, woocommerce_single este imaginea mare de pe pagina produsului, iar woocommerce_gallery_thumbnail este banda de miniaturi mici de sub ea. Le schimbi din Aspect > Personalizare > WooCommerce > Imagini produs — și dacă panoul acela îți arată o listă derulantă pentru decupare, dar niciun câmp de lățime, tema ta a blocat intenționat lățimile în cod.

Cele trei dimensiuni

Nume dimensiune	Unde apare	Decupare	Editabilă în personalizator
woocommerce_thumbnail	Pagina magazinului, grile de categorii, produse similare, cross-sell	Decupată fix în pătrat, implicit	Lățime și raport
woocommerce_single	Imaginea principală de pe pagina produsului	Nedecupată — se păstrează raportul original	Doar lățimea
woocommerce_gallery_thumbnail	Banda mică de sub imaginea principală a produsului	Pătrat decupat fix	Nu

Acestea se adaugă peste dimensiunile standard WordPress. O singură fotografie de produs va produce de obicei thumbnail, medium, medium_large, large, cele trei dimensiuni WooCommerce și, posibil, extra înregistrate de tema ta prin add_image_size. Sunt multe fișiere pentru o singură încărcare și de asta un import de 300 de produse durează atât de mult.

Miniatura de galerie e cea care surprinde lumea: nu are absolut niciun control în administrare. Pe o instalare implicită e un pătrat mic, istoric de 100px, și e dimensiunea cu cele mai mari șanse să arate moale pe un ecran retina, pentru că fișierul e chiar minuscul.

Unde se află de fapt setările

Aspect > Personalizare > WooCommerce > Imagini produs îți dă trei controale:

• Lățimea imaginii principale — lățimea lui woocommerce_single. Înălțimea e automată, așa că raportul original se păstrează.
• Lățimea miniaturii — lățimea lui woocommerce_thumbnail.
• Decuparea miniaturii — 1:1 (pătrat, implicit), Custom (scrii tu un raport precum 4:3) sau Uncropped.

Observă ce lipsește: nu există un câmp pentru înălțimea miniaturii de catalog, pentru că înălțimea se deduce din raportul de decupare. Și nu există absolut nimic pentru miniatura de galerie.

Înainte să schimbi ceva, ajută să vezi exact ce derivate va produce un anumit fișier — pune o fotografie reală de produs în instrumentul pentru dimensiuni de imagine WordPress și primești lista completă, inclusiv dacă sursa ta e suficient de mare cât să acopere fiecare dimensiune fără mărire forțată.

De ce arată prost imaginile din catalog

Miniatura de catalog se decupează fix, în pătrat. Decupare fixă înseamnă că WooCommerce ia un pătrat din centrul fotografiei tale și aruncă restul — nu adaugă benzi și nu turtește imaginea. O fotografie de produs de 2000x1200 devine o felie de 1200x1200 luată din mijloc, apoi micșorată.

E în regulă pentru o sticlă fotografiată fix în centru, cu margine în jur. E un dezastru pentru:

• Produse lungi (schiuri, cabluri, șine de perdea) — vezi treimea din mijloc și nimic altceva
• Compoziții descentrate — produsul fuge spre marginea cadrului și e feliat
• Fotografii în care obiectul umple cadrul dintr-o margine în alta — partea de sus și cea de jos sunt tăiate
• Fotografii de context, cu produsul într-un colț

Sfatul obișnuit e „schimbă decuparea pe Uncropped”. Funcționează, dar hai să fim sinceri cu privire la cost: nedecupat înseamnă că fiecare miniatură își păstrează propriul raport, așa că o grilă cu fotografii în orientări diferite devine vizual dezordonată, iar rândurile nu se mai aliniază decât dacă CSS-ul temei tale gestionează înălțimi variabile. Majoritatea temelor presupun pătrate.

Soluția mai bună, dacă ți-o permiți, e la sursă: standardizează pe fotografii de produs pătrate, cu obiectul centrat și margini egale. Atunci o decupare pătrată fixă nu schimbă nimic și tot ce urmează devine previzibil. Modificarea setării de decupare e soluția de compromis; imaginile sursă consecvente sunt rezolvarea reală.

Când tema blochează lățimile

Dacă panoul Imagini produs îți oferă doar decuparea, tema ta a declarat lățimi fixe când a înregistrat suportul pentru WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Când o temă transmite valorile acelea, WooCommerce scoate controalele de lățime din personalizator și lasă doar raportul. Nu e un bug și nu e tema ostilă — CSS-ul de aranjare a produsului din temă e construit exact în jurul acelor lățimi în pixeli, iar posibilitatea de a le schimba ar strica grila.

Le poți suprascrie din functions.php al unei teme copil, folosind filtrul per dimensiune:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Același tipar funcționează pentru woocommerce_get_image_size_thumbnail. Aceasta e și singura cale de a schimba miniatura de galerie, pentru că ea nu are interfață.

Costul real, spus pe șleau: suprascrierea unei lățimi blocate înseamnă că fișierul generat de WooCommerce nu mai corespunde cu ce așteaptă CSS-ul temei. De obicei imaginea pur și simplu se scalează în browser și arată bine, pentru că acum e mai mare decât caseta. Uneori tema are un container cu înălțime fixă și obții benzi sau conținut care iese în afară. Testează pe un singur produs înainte să regenerezi 2.000.

Schimbarea dimensiunilor înseamnă regenerare

Fiecare setare de dimensiune afectează doar încărcările noi. Produsele existente continuă să servească fișierele generate la momentul încărcării lor, așa că nu se schimbă nimic vizibil până nu le reconstruiești.

WooCommerce pornește o regenerare în fundal când salvezi personalizatorul. Pe un catalog mic e suficient. Pe unul mare depinde de declanșarea fiabilă a WP-Cron, ceea ce într-un magazin cu trafic mic adesea nu se întâmplă, și rămâi cu o bibliotecă regenerată pe jumătate. Rulează tu regenerarea:

wp media regenerate --yes

Ca să reconstruiești doar imaginile de produs:

wp media regenerate --yes --post_type=product

Dacă vrei să scapi de sarcina din fundal cât timp lucrezi manual:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Două lucruri pe care regenerarea nu le face. Nu șterge fișierele vechi — directorul de încărcări păstrează fiecare derivat orfan de la setările anterioare și va crește. Și nu poate crea o dimensiune mai mare decât sursa ta, pentru că WordPress nu mărește imaginile. Dacă setezi lățimea imaginii principale la 1200, dar fotografiile tale de produs au 800px lățime, nu se creează niciun fișier de 1200px; browserul primește un fișier de 800px și îl întinde, iar srcset nu are nimic mai bun de oferit.

Ce dimensiune să încarci, de fapt

Țintește imagini sursă pătrate, la aproximativ dublul celei mai mari lățimi configurate — 1200x1200 pentru o imagine principală de 600px, 1600x1600 dacă tema ta folosește 800px. Asta acoperă ecranele retina 2x și îi dă lui WordPress destui pixeli ca să construiască fiecare derivat fără mărire forțată. Ține toate produsele la aceleași dimensiuni, ca grila să rămână uniformă.

Tot nu merge?

Dacă dimensiunile sunt configurate corect, ai regenerat, iar un produs tot arată prost, deschide imaginea într-o filă nouă și citește numele fișierului. Un sufix cu dimensiuni care nu corespunde niciunei dimensiuni configurate de tine înseamnă că altceva a înregistrat-o. Lipsa oricărui sufix înseamnă că WooCommerce a căzut pe fișierul la dimensiune completă, ceea ce aproape întotdeauna înseamnă că sursa era prea mică pentru dimensiunea cerută. Trece fișierul sursă prin instrumentul pentru dimensiuni de imagine și compară ce ar trebui să genereze WordPress cu ce a încărcat efectiv browserul — când cele două nu corespund, de obicei se află la mijloc un plugin de optimizare sau un redimensionator de imagini din CDN.