Cum să serviți cu ușurință imagini scalate în WordPress (pas cu pas)

Dacă ați rulat un test de viteză pe site-ul dvs. WordPress, probabil ați văzut un avertisment despre „servirea imaginilor scalate”. Instrumente precum Google PageSpeed și GTmetrix îl semnalează frecvent, dar nu îl explică clar.

Tot ce înseamnă este că imaginile tale sunt mai mari decât spațiul în care apar. Acest lucru poate încetini paginile tale, poate afecta SEO și poate frustra utilizatorii de mobil.

Am ajutat utilizatorii WordPress să rezolve această problemă fără a edita manual fiecare imagine sau a căuta prin cod. Cu abordarea corectă, puteți rezolva rapid problema și o puteți preveni să se mai întâmple.

În acest ghid, vă vom arăta cum să serviți imagini scalate în WordPress pas cu pas, fără a fi nevoie de abilități tehnice.

De ce să serviți imagini scalate în WordPress?

Pe site-ul dvs. WordPress, veți folosi probabil imagini pentru postări de blog, miniaturi, anteturi de pagină, imagini de copertă și multe altele. Fiecare imagine are un scop, ajutând la crearea unei experiențe vizuale pentru vizitatorii dvs.

În funcție de tema dvs., aceste imagini sunt afișate la dimensiuni specifice în pixeli. De exemplu, imaginea dvs. de prezentare poate fi afișată la 680×382 pixeli, în timp ce o miniatură ar putea fi de 100×100 pixeli.

Este important să salvați imaginile la dimensiunile exacte necesare pentru site-ul dvs. De exemplu, dacă spațiul pentru imaginea de prezentare este de 680×382 pixeli, fișierul imaginii ar trebui să corespundă acestor dimensiuni.

Nerespectarea redimensionării imaginilor poate duce la timpi de încărcare mai lenți sau la o experiență utilizator mai slabă. Iată câteva motive pentru care:

• Fișierele mai mari decât necesar încetinesc timpii de încărcare, deoarece vizitatorii trebuie să descarce date suplimentare.
• Utilizarea imaginilor cu mai puțini pixeli decât este necesar le poate face să pară neclare sau pixelate la dimensiuni mai mari de afișare.
• Site-ul dvs. trebuie să redimensioneze imaginile din mers, necesitând mai mult timp de procesare înainte ca respectivul conținut să apară utilizatorilor.

Toate acestea pot duce la o experiență mai puțin satisfăcătoare pentru vizitatorii dvs. și pot chiar afecta SEO-ul imaginilor.

De aceea, atunci când testați performanța site-ului dvs. cu instrumente precum GTMetrix, veți vedea adesea recomandări de a servi imagini scalate pentru o viteză mai bună.

Acum, să parcurgem cum să servim imagini scalate în WordPress. Vom acoperi două metode ușoare pentru optimizarea imaginilor pentru performanță.

• Metoda 1: Servirea imaginilor scalate cu un plugin (mai ușor)
• Metoda 2: Servirea imaginilor scalate manual
• Întrebări frecvente despre redimensionarea imaginilor în WordPress
• Resurse bonus

Metoda 1: Servirea imaginilor scalate cu un plugin (mai ușor)

Cea mai ușoară modalitate de a servi imagini scalate în WordPress este prin utilizarea unui plugin care redimensionează automat și livrează imagini la dimensiunile corecte pentru dispozitivul fiecărui vizitator.

Recomandăm această metodă pentru majoritatea începătorilor, deoarece se ocupă de tot în culise. Este rapid de configurat și funcționează bine pentru site-urile web obișnuite.

Pluginul gratuit Optimole este unul dintre cele mai bune pluginuri de compresie a imaginilor pentru WordPress pe care le-am testat. Acesta redimensionează automat imaginile pentru dvs. Rețineți doar că, dacă site-ul dvs. primește peste 5.000 de vizitatori pe lună, veți avea nevoie de versiunea premium.

Pentru a începe, instalați și activați pluginul Optimole. Puteți urma ghidul nostru despre cum să instalați un plugin WordPress dacă aveți nevoie de ajutor.

Odată activat, accesați Media » Optimole. Vi se va solicita să vă înregistrați pentru o cheie API sau să o introduceți pe cea existentă. Procesul este simplu.

Doar confirmați-vă emailul și faceți clic pe butonul „Creează și conectează contul”. Optimole va conecta site-ul dvs. automat, fără a fi nevoie să introduceți chei sau să părăsiți tabloul de bord.

Optimole va începe acum să vă optimizeze imaginile în fundal. Acesta alege dimensiunea potrivită în funcție de ecranul fiecărui vizitator și servește imaginile prin CDN-ul său global, astfel încât site-ul dvs. să rămână rapid.

În fila „Setări”, veți vedea că imaginile dvs. sunt acum înlocuite cu versiuni optimizate și scalate. Acest lucru se întâmplă automat și nu încetinește serverul dvs., datorită CDN.

Optimole activează, de asemenea, încărcarea leneșă în mod implicit. Aceasta înseamnă că imaginile care nu sunt vizibile pe ecran nu se vor încărca până când nu sunt necesare – ceea ce ajută la reducerea timpului de încărcare a paginii și la îmbunătățirea performanței.

Setările implicite funcționează bine pentru majoritatea site-urilor, dar puteți ajusta lucrurile în meniul „Avansat”. Asigurați-vă doar că faceți clic pe butonul „Salvați modificările” dacă faceți actualizări.

Această metodă este ideală dacă doriți o soluție de tipul "setează și uită". Este rapidă, prietenoasă cu începătorii și nu necesită editarea fiecărei imagini manual.

Acestea fiind spuse, nu este cea mai flexibilă opțiune. Dacă aveți nevoie de control complet asupra dimensiunilor imaginilor sau doriți să gestionați singur optimizarea, atunci servirea imaginilor scalate manual ar putea fi o opțiune mai bună.

Metoda 2: Servirea imaginilor scalate manual

Scalarea manuală a imaginilor vă oferă control complet asupra modului în care imaginile dvs. arată și funcționează. Necesită puțin mai mult efort, dar rezultatele pot fi mai precise și consistente pe site-ul dvs.

Iată de ce această abordare oferă mai multă flexibilitate:

• Puteți alege dimensiuni exacte și formate de imagine înainte de încărcare.
• Puteți reduce dimensiunile fișierelor fără a vă baza pe instrumente terțe.
• Evitați limitările de plugin sau limitele lunare de vizitatori.
• Obțineți rezultate mai consistente pe diferite teme și layout-uri.

De aceea, această metodă este ideală pentru designeri, fotografi și oricine dorește un control fin. Există trei moduri de a face acest lucru:

1. Folosind un software de editare a imaginilor (Recomandat)
2. Biblioteca media WordPress
3. În setările media din WordPress.

Să începem cu abordarea software-ului de editare a imaginilor.

1. Redimensionarea imaginilor cu software de editare a imaginilor

Aceasta este metoda pe care o folosim pe site-urile noastre. Cu instrumente precum Adobe Photoshop sau Affinity Photo, puteți redimensiona imaginile înainte de a le încărca.

Puteți selecta dimensiunile corecte în pixeli, alege formatul de care aveți nevoie și salva fișierul cu o dimensiune mai mică – totul într-un singur pas.

Iată un exemplu al instrumentului de decupare din Affinity Photo în acțiune:

Pe lângă alegerea dimensiunilor corecte, există și alte modalități de a menține imaginile ușoare și cu încărcare rapidă înainte de încărcare.

Pentru mai multe sfaturi, consultați ghidul nostru despre cum să optimizați imaginile pentru performanța web.

2. Redimensionarea imaginilor în biblioteca media WordPress

Puteți redimensiona imaginile chiar și direct în WordPress. Editorul de imagini încorporat vă permite să decupați, rotiți, rotiți și scalați imaginile încărcate.

Pentru a face acest lucru, deschideți postarea sau pagina unde apare imaginea. Faceți clic pe imagine, apoi faceți clic pe butonul „Înlocuire” și alegeți „Deschide biblioteca media”.

Aceasta va deschide Biblioteca Media cu imaginea dvs. selectată.

În dreapta, veți vedea câmpuri pentru text alternativ, titlu, subtitlu și descriere. Mai jos, faceți clic pe linkul „Edit Image”.

Acest lucru vă va duce la ecranul editorului de imagini.

De aici, puteți previzualiza imaginea și puteți folosi instrumente de editare de bază. Pentru a redimensiona imaginea, căutați opțiunea „Scale Image” în partea dreaptă.

Introduceți lățimea dorită, iar înălțimea se va actualiza automat pentru a păstra raportul de aspect.

De exemplu, o imagine cu o dimensiune de 2560×1637 poate fi scalată la 1200 pixeli lățime cu un singur clic.

După introducerea noii lățimi, faceți clic pe butonul „Scale” pentru a salva modificarea.

Rețineți, puteți redimensiona imaginile doar în WordPress, nu și să le măriți. Mărirea dimensiunii poate reduce calitatea sau poate eșua complet.

Aveți nevoie de ajutor cu editarea imaginilor în WordPress? Consultați tutorialele noastre despre editarea de bază a imaginilor și decuparea miniaturilor.

Ajustarea dimensiunilor imaginilor în Setările Media

Implicit, WordPress creează mai multe versiuni ale fiecărei imagini în diferite dimensiuni. Puteți modifica aceste dimensiuni implicite accesând Settings » Media în tabloul de bord.

Aici, puteți ajusta dimensiunile pentru miniatură, mediu și mare. Acest lucru afectează modul în care imaginile sunt scalate și afișate pe site-ul dvs.

Dacă aveți nevoie de mai multe dimensiuni de imagine, puteți crea altele suplimentare folosind câteva linii de cod sau un plugin.

După ce ați modificat dimensiunile imaginilor, va trebui să regenerați miniaturile imaginilor existente, astfel încât acestea să folosească noile setări.

Când inserați o imagine într-o postare sau pagină, puteți alege, de asemenea, ce dimensiune să afișați în panoul de setări al blocului.

Întrebări frecvente despre redimensionarea imaginilor în WordPress

Mai jos sunt câteva întrebări frecvente pe care utilizatorii le au despre scalarea și gestionarea imaginilor în WordPress.

update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 0 );
update_option( 'large_size_w', 0 );
update_option( 'large_size_h', 0 );

Resurse bonus

Mediile și imaginile fac un site WordPress captivant. Următoarele sunt câteva resurse suplimentare care vă vor ajuta să utilizați pe deplin capabilitățile media ale WordPress.

• Cum să adăugați o imagine principală în WordPress
• Imagine de copertă vs. Imagine de prezentare în editorul de blocuri WordPress (Ghid pentru începători)
• De ce nu ar trebui niciodată să încărcați un videoclip pe WordPress
• Cum să creați o galerie de imagini în WordPress (Pas cu Pas)
• Cum să adaugi fluxurile tale de social media în WordPress (Pas cu Pas)

Sperăm că acest tutorial v-a ajutat să învățați cum să serviți imagini scalate în WordPress. S-ar putea să doriți, de asemenea, să consultați ghidul nostru despre SEO pentru imagini WordPress sau articolul nostru despre utilizarea AI pentru a genera imagini pentru postările de pe blog.

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.