Ghidul începătorului pentru dimensiunile imaginilor WordPress (+ cele mai bune practici)

Fiecare începător WordPress înțelege această dilemă a imaginilor: încărcați fotografii prea mici și arată neclare, încărcați-le prea mari și site-ul dvs. devine dureros de lent.

La WPBeginner, am lucrat la perfecționarea dimensiunilor imaginilor pe propriul nostru blog, asigurându-ne că arată întotdeauna bine și nu încetinesc timpul de încărcare a paginii.

Pe parcurs, am învățat câteva modalități simple de a alege cele mai bune dimensiuni ale imaginilor pentru un aspect curat, profesional și o experiență excelentă pentru utilizator.

Obținerea acestui lucru corect a schimbat jocul pentru aspectul general al site-ului nostru. 🎨

În acest ghid pentru începători, vom împărtăși totul despre dimensiunile imaginilor WordPress. Veți învăța dimensiunile standard care funcționează cel mai bine, cum să optimizați imaginile pentru diferite dimensiuni de ecran și tehnicile simple care vor face site-ul dvs. web atât frumos, cât și incredibil de rapid.

Ce este o dimensiune a imaginii?

Dimensiunea imaginii se referă de obicei la lățimea și înălțimea unei imagini măsurate în pixeli. De exemplu, 1600×900 pixeli înseamnă că o imagine are 1600 de pixeli lățime și 900 de pixeli înălțime. Aceste măsurători se numesc și dimensiuni ale imaginii.

Practic, o imagine cu dimensiuni mai mari are mai mulți pixeli, ceea ce va crește dimensiunea fișierului imaginii.

Dimensiunea fișierului imagine este spațiul pe care un fișier imagine îl ocupă pe un computer și este măsurată în octeți. De exemplu, 100 KB (kiloocteți).

Dacă o imagine are o dimensiune mare a fișierului, atunci va dura mai mult timp pentru ca utilizatorii să o descarce și poate afecta viteza și performanța site-ului dvs. web. De aceea, este important să păstrați dimensiunea fișierului imaginii cât mai mică posibil, menținând în același timp imaginea la dimensiunile corecte.

Aici intervin formatele fișierelor imagine.

Formatele fișierelor imagine definesc modul în care datele imaginii sunt stocate și comprimate. JPEG și PNG sunt cele mai comune pe care le veți vedea online.

Imaginile, cum ar fi fotografiile care conțin mai multe culori, pot fi comprimate mai bine utilizând formatul de fișier JPEG. Pe de altă parte, imaginile, cum ar fi ilustrațiile cu mai puține detalii de culoare, pot utiliza PNG pentru cele mai bune rezultate.

Pentru mai multe detalii, puteți consulta articolul nostru despre WebP vs PNG vs JPEG: cele mai bune formate de fișiere imagine pentru WordPress.

Având în vedere acest lucru, iată o prezentare rapidă a lucrurilor pe care le vom aborda în acest articol:

• Ce dimensiune ar trebui să aibă imaginile mele pentru site-ul meu WordPress?
• Ce dimensiuni de imagine ar trebui să folosesc în postările de blog?
• Ce dimensiuni de imagine ar trebui să folosesc pentru imaginile de prezentare?
• Ce dimensiuni de imagini ar trebui să folosesc pentru social media?
• Ce dimensiune de imagine ar trebui să folosesc pentru logo-ul site-ului meu în WordPress?
• Sfat bonus: Editarea imaginilor pentru site-ul dvs. WordPress
• Întrebări frecvente despre dimensiunile imaginilor în WordPress
• Resurse suplimentare despre imaginile WordPress

Gata? Să începem.

Ce dimensiune ar trebui să aibă imaginile mele pentru site-ul meu WordPress?

Pentru un site WordPress obișnuit, veți folosi imagini în mai multe zone ale site-ului dvs. Veți avea nevoie de imagini pentru postările de pe blog, miniaturi, anteturi de pagină, imagini de copertă și multe altele.

WordPress gestionează automat unele dintre dimensiunile fișierelor imagine în mod implicit. Ori de câte ori încărcați o imagine, WordPress va crea automat mai multe copii în diferite dimensiuni.

Puteți vizualiza și chiar ajusta dimensiunile implicite ale imaginilor WordPress vizitând pagina Setări » Media din zona de administrare WordPress.

Aici veți vedea trei dimensiuni de imagine: miniatură, medie și mare.

Cu toate acestea, tema dvs. WordPress poate crea propriile dimensiuni suplimentare de imagine și le poate folosi pentru diferite secțiuni ale site-ului dvs.

Aceste dimensiuni nu vor fi vizibile pe ecranul „Media”, iar singura modalitate de a vizualiza acele dimensiuni suplimentare este prin accesarea „Managerului de fișiere” de pe contul dvs. de hosting WordPress.

Apoi, veți dori să navigați la folderul /wp-content/uploads/ și să selectați orice folder de an de acolo pentru a naviga. Acest lucru vă va ajuta să vedeți toate dimensiunile variate ale imaginilor pe care site-ul dvs. WordPress le generează.

Acum, să aruncăm o privire asupra diferitelor zone ale site-ului dvs. și ce dimensiuni de imagine ar trebui să folosiți în acele zone.

Ce dimensiuni de imagine ar trebui să folosesc în postările de blog?

Ar trebui să alegeți dimensiunea imaginii pentru postările dvs. de pe blog în funcție de tema dvs. WordPress.

De exemplu, unele teme WordPress vin cu un aspect pe o singură coloană, care vă permite să folosiți imagini mai late.

Unele alte teme WordPress folosesc layout-uri cu mai multe coloane, care constau de obicei dintr-o zonă de conținut și o bară laterală.

Dacă utilizați acest tip de temă, trebuie să ajustați lățimea imaginii în consecință.

Pentru majoritatea blogurilor, puteți utiliza următoarele dimensiuni de imagine:

• Aspect pe o singură coloană: 1200×675 pixeli
• Aspect pe două coloane: 680×382 pixeli

Acum, ați putea observa că multe site-uri web populare WordPress folosesc aceeași lățime de imagine pentru toate imaginile lor dintr-un articol. Vă rugăm să rețineți că aceasta nu este o regulă strictă.

De exemplu, dacă trebuie să adăugați un bloc „Media și text”, puteți ajusta dimensiunea imaginii în consecință. În exemplul de mai jos, folosim o imagine portret lângă un text.

Similar, s-ar putea să doriți să folosiți imagini pătrate pentru anumite situații.

Cu toate acestea, nu uitați să vă asigurați că dimensiunile imaginii au aceeași lățime și înălțime, cum ar fi 300 x 300 pixeli. De exemplu, iată un exemplu de imagini pătrate utilizate într-un layout multi-coloană.

Ce dimensiuni de imagine ar trebui să folosesc pentru imaginile de prezentare?

Nu există o soluție universală, dar un punct bun de plecare este 1200×628 pixeli sau 680×382 pixeli pentru un raport de aspect de 16:9.

Acestea fiind spuse, imaginile de prezentare (numite și miniaturi de postări) sunt controlate de tema dvs. Unele teme pot decupa sau întinde imaginile. Deci, cel mai bine este să verificați documentația temei dvs. sau să experimentați cu câteva dimensiuni pentru a vedea ce funcționează cel mai bine.

Imaginile de prezentare sunt importante, deoarece tema dvs. WordPress le poate folosi în diferite zone ale site-ului dvs. web. Ele sunt adesea primul lucru pe care îl văd vizitatorii dvs., așa că veți dori să faceți o primă impresie bună.

Recomandăm utilizarea imaginilor mai mari, care pot arăta frumos fie redimensionate, fie utilizate în moduri mai largi.

Similar, dacă tema dvs. WordPress folosește imagini pătrate pentru imaginile de prezentare, atunci vă recomandăm să folosiți imagini de cel puțin 600×600 pixeli.

• Pentru temele care folosesc imagini de prezentare rectangulare: 1200×687 pixeli
• Pentru temele care folosesc imagini de prezentare pătrate: 600×600 pixeli

Tema dvs. WordPress va genera dimensiuni suplimentare pentru imaginile de prezentare, pentru a fi utilizate în diferite zone, cum ar fi pagina de pornire, pagina de blog sau paginile de arhivă.

Ce dimensiuni de imagini ar trebui să folosesc pentru social media?

Acum, dacă tema dvs. WordPress folosește imagini de prezentare cu un raport de aspect de 16:9, atunci le puteți folosi și ca imagini pentru rețelele sociale pentru X (fostul Twitter) și Facebook.

Cu toate acestea, va trebui să spuneți explicit acelor platforme ce imagine doriți să afișați atunci când cineva partajează un articol de pe site-ul dvs. web.

Pentru a face acest lucru, veți avea nevoie de pluginul All in One SEO pentru WordPress. Este cel mai bun plugin SEO pentru WordPress de pe piață și este utilizat de peste 3 milioane de site-uri web. Acest plugin vă poate ajuta să vă optimizați site-ul pentru motoarele de căutare și platformele de socializare.

La WPBeginner, suntem mari fani ai AIOSEO și îl folosim pentru o mulțime de sarcini. Acestea includ gestionarea sitemap-urilor noastre XML, a meta descrierilor, a etichetelor de titlu și a setărilor OpenGraph pentru Facebook și X. Pentru mai multe informații despre plugin, consultați recenzia noastră completă AIOSEO.

Pentru a începe, trebuie să instalați și să activați pluginul All in One SEO. Pentru mai multe detalii, puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, pluginul va lansa expertul de configurare. Pur și simplu urmați instrucțiunile de pe ecran pentru a finaliza procesul. Puteți consulta, de asemenea, ghidul nostru despre cum să configurați All in One SEO pentru instrucțiuni mai detaliate.

După aceea, trebuie să vizitați pagina All in One SEO » Rețele sociale și să comutați la fila Facebook. De aici, puteți seta „Imagine de prezentare” ca sursă implicită pentru imaginea Open Graph.

Apoi, puteți comuta la fila X(Twitter) și puteți face același lucru.

Nu uitați să faceți clic pe butonul „Salvează modificările” pentru a salva setările.

Acum, dacă tema dvs. WordPress folosește imagini de o dimensiune diferită, atunci Facebook și Twitter s-ar putea să nu poată afișa corect acele imagini.

În acest caz, puteți oferi platformelor de socializare o imagine personalizată.

Pur și simplu creați o imagine cu un raport de aspect de 16:9, care poate fi de 1200×675 pixeli sau 680×382 pixeli. Apoi, editați postarea sau pagina și derulați în jos la secțiunea „Setări AIOSEO” de sub editorul de conținut.

De aici, va trebui să comutați la fila „Social” și să derulați în jos la câmpul „Sursă imagine”. Din meniul derulant, selectați „Imagine personalizată” și apoi încărcați imaginea dvs. pentru Facebook.

Odată terminat, puteți repeta procesul și pe fila „Twitter”.

Rețineți că va trebui să faceți acest lucru pentru toate articolele pe care le publicați pentru a vă asigura că rețelele sociale folosesc imaginea pe care doriți să o folosească. Pentru mai multe dimensiuni de imagini pentru rețelele sociale, consultați fișa noastră de referință pentru rețelele sociale WordPress pentru începători.

Ce dimensiune de imagine ar trebui să folosesc pentru logo-ul site-ului meu în WordPress?

O bună dimensiune de pornire pentru un logo WordPress este de 300×200 pixeli. Cu toate acestea, dimensiunea ideală poate varia în funcție de tema dvs.

Multe teme WordPress vor recomanda o anumită dimensiune de logo în timpul încărcării. De exemplu, unele pot afișa un mesaj care sugerează dimensiunile optime.

Cu toate acestea, dacă utilizați o temă WordPress mai nouă cu funcționalitate de editare completă a site-ului, atunci este posibil să nu primiți o recomandare pentru dimensiunea imaginii logo-ului.

În acest caz, recomandăm încărcarea diferitelor stiluri și dimensiuni pentru a vedea ce arată cel mai bine pentru marca dvs. O dimensiune a imaginii logo de 300×200 pixeli poate fi un bun punct de plecare.

Sfat bonus: Editarea imaginilor pentru site-ul dvs. WordPress

Înțelegem că majoritatea utilizatorilor WordPress nu sunt designeri grafici profesioniști. Cu toate acestea, învățarea utilizării software-ului de editare a imaginilor pentru a redimensiona imaginile pentru site-ul dvs. web este o abilitate excelentă de a avea și este foarte ușor de făcut.

WordPress în sine vine cu câteva instrumente de bază pentru editarea imaginilor. Pentru a le utiliza, accesați pur și simplu pagina Media » Bibliotecă și faceți clic pe o imagine.

Aceasta va deschide imaginea într-o fereastră pop-up, unde veți vedea un buton pentru a edita imaginea.

Odată ce faceți acest lucru, ar trebui să vedeți opțiunile de editare.

Instrumentele de editare includ redimensionarea de bază a imaginilor, decuparea, rotirea și răsturnarea.

Această editare de bază a imaginilor este utilă dacă trebuie să repară rapid o problemă a imaginii. Cu toate acestea, nu este cea mai bună metodă de a-ți edita imaginile zilnic.

Din fericire, există mai multe opțiuni gratuite și ieftine pe care le puteți folosi:

• Canva – Un software gratuit de editare a imaginilor bazat pe web. Include, de asemenea, șabloane gata făcute pentru imagini de site-uri web, logo-uri, imagini pentru rețele sociale și multe altele.
• Pixlr – Un software de editare a imaginilor bazat pe web, freemium. Poate fi folosit pentru a redimensiona cu ușurință imaginile pentru postările dvs. de pe blog.
• Gimp – Software gratuit și open-source pentru editarea imaginilor. Acest instrument funcționează ca o aplicație desktop nativă pe Windows, Mac și Linux. Poate fi folosit pentru a redimensiona imagini, a adăuga straturi de text, a edita fotografii și multe altele.

Pentru mai multe informații despre acest subiect, puteți consulta ghidul nostru despre cum să editați imagini de bază în WordPress.

Întrebări frecvente despre dimensiunile imaginilor în WordPress

Ajutând mii de utilizatori să-și facă site-urile să funcționeze fără probleme, am răspuns la o bună parte din întrebările despre imagini. Iată câteva dintre cele mai frecvente pe care le auzim.

Care este cel mai bun format de imagine: JPEG, PNG sau WebP?

Cel mai bun format depinde de tipul imaginii. JPEG-urile sunt excelente pentru fotografii cu multe culori, deoarece oferă o bună compresie fără o scădere mare a calității.

PNG-urile sunt ideale pentru grafice, logo-uri și ilustrații cu culori plate sau fundaluri transparente. WebP este un format modern care oferă o compresie excelentă pentru ambele tipuri de imagini, dar este posibil să aveți nevoie de un plugin pentru a le servi pe site-ul dvs.

Am nevoie de un plugin pentru optimizarea imaginilor?

Deși puteți optimiza imaginile manual înainte de încărcare, utilizarea unui plugin vă poate economisi mult timp. Pluginurile de optimizare a imaginilor comprimă automat imaginile pentru a reduce dimensiunea fișierului fără a pierde calitatea vizuală.

Multe pluginuri populare de caching, precum WP Rocket, includ funcționalități de optimizare a imaginilor. Acest lucru ajută la încărcarea mai rapidă a paginilor dvs., ceea ce este excelent atât pentru experiența utilizatorului, cât și pentru SEO.

Care este diferența dintre dimensiunile imaginii și dimensiunea fișierului?

Dimensiunile imaginii sunt lățimea și înălțimea unei imagini, măsurate în pixeli (de exemplu, 1200 x 675 pixeli). Acestea determină cât de mare apare imaginea pe ecran.

Dimensiunea fișierului este cantitatea de spațiu de stocare pe care o ocupă imaginea, măsurată în kilobiți (KB) sau megabiți (MB). Dimensiunile mai mari duc, de obicei, la o dimensiune mai mare a fișierului, ceea ce poate încetini site-ul dvs.

Cum pot găsi dimensiunile corecte ale imaginii pentru tema mea?

Cea mai ușoară modalitate este să verificați documentația temei dvs., care specifică adesea dimensiunile recomandate ale imaginilor.

Dacă nu îl găsiți acolo, puteți folosi instrumentele pentru dezvoltatori ale browserului dvs. Faceți clic dreapta pe o zonă de imagine de pe site-ul dvs. (cum ar fi zona de conținut) și selectați „Inspect”. Acest lucru vă va arăta dimensiunile exacte ale containerului, oferindu-vă o dimensiune țintă de la care să porniți.

Resurse suplimentare despre imaginile WordPress

Sperăm că acest ghid v-a ajutat să stăpâniți dimensiunile imaginilor WordPress. Dacă doriți să aflați mai multe, iată câteva alte articole care v-ar putea fi utile:

• Cum să adăugați zoom de mărire pentru imagini în WordPress
• Cum să adăugați legende la imaginile de prezentare în WordPress
• Cum să folosiți AI pentru a genera imagini în WordPress
• Cum să adăugați fișiere imagine SVG în WordPress
• Text alternativ imagine vs. Titlu imagine în WordPress
• Cum să optimizați imaginile pentru performanța web fără a pierde calitatea
• Cele mai bune locuri pentru a găsi imagini gratuite din domeniul public pentru blogul tău
• Cum să remediezi problema cu imaginea de prezentare care nu apare în WordPress
• Cum să remediați problemele de încărcare a imaginilor în WordPress

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.