Cum să utilizați imagini WebP în WordPress (3 metode)

Imaginile sunt adesea cea mai mare problemă din spatele unui site WordPress lent. Dacă paginile dvs. durează prea mult să se încarce, vizitatorii vor pleca înainte de a vedea chiar și conținutul dvs.

Din fericire, utilizarea imaginilor WebP poate rezolva acest lucru. Acest format modern de fișiere reduce dimensiunea imaginilor cu până la 35% fără a pierde calitatea, făcând site-ul dvs. semnificativ mai rapid.

În acest ghid, vă vom arăta cum să utilizați imagini WebP în WordPress folosind trei metode diferite.

Ce este WebP?

WebP este un format modern de imagine dezvoltat de Google special pentru utilizare pe web. Ceea ce îl face special este tehnologia sa superioară de compresie. Imaginile WebP sunt, de obicei, cu 25-35% mai mici decât fișierele JPEG și PNG, menținând în același timp o calitate vizuală identică.

Pentru a pune acest lucru în perspectivă, dacă imaginea dvs. PNG actuală are 100KB, aceeași imagine în format WebP ar fi în jur de 65-75KB, fără o diferență vizibilă în calitate. Această reducere a dimensiunii se traduce direct în timpi de încărcare mai rapizi ai paginii și o experiență mai bună a utilizatorului.

Formatul suportă atât compresia cu pierderi, cât și fără pierderi, plus caracteristici precum transparența și animația, făcându-l un înlocuitor versatil pentru multiple formate tradiționale.

Puteți afla despre compresia imaginilor în ghidul nostru despre cum să optimizați imaginile pentru web.

Suport browser: Este WebP pregătit pentru site-ul dvs.?

În prezent, WebP beneficiază de un suport puternic din partea browserelor, cu o acoperire globală de peste 95%. Toate browserele majore, inclusiv Chrome, Firefox, Safari (de la iOS 14) și Edge, suportă complet imaginile WebP.

Restul de 5% constă în principal din versiuni mai vechi de browsere care sunt în scădere rapidă în utilizare.

Ar trebui să folosiți imagini WebP în WordPress?

Pentru majoritatea site-urilor WordPress, răspunsul este da. Implementarea WebP poate accelera semnificativ site-ul dvs. WordPress și funcționează perfect alături de alte optimizări de performanță, cum ar fi plugin-urile de caching și CDN-urile.

De la WordPress 5.8, platforma are suport nativ pentru WebP, ceea ce înseamnă că puteți încărca și utiliza imagini WebP direct, fără niciun plugin. Cu toate acestea, acest suport de bază nu include conversia automată pentru imaginile încărcate anterior sau opțiuni de rezervă pentru browserele mai vechi.

Pentru cele mai bune rezultate, recomandăm utilizarea unui plugin dedicat optimizării imaginilor. Aceste pluginuri convertesc automat imaginile existente în format WebP și servesc versiuni tradiționale JPEG sau PNG pentru procentul mic de utilizatori cu browsere incompatibile.

WebP este deosebit de benefic dacă site-ul dvs. este bogat în imagini (cum ar fi bloguri de fotografie, magazine online sau portofolii) sau dacă blogul dvs. WordPress se confruntă în prezent cu timpi de încărcare lenți din cauza imaginilor mari.

Iată cum să utilizați imagini WebP în WordPress. Vă vom arăta mai multe metode, astfel încât să puteți alege una care funcționează cel mai bine pentru dvs.:

1. Utilizarea imaginilor WebP în WordPress cu EWWW Optimizer
2. Utilizarea imaginilor WebP în WordPress cu Imagify
3. Utilizarea imaginilor WebP în WordPress cu SG Optimizer
4. Tutorial video
5. Întrebări frecvente despre imaginile WebP
6. Ghiduri experte despre utilizarea imaginilor în WordPress

Metoda 1: Utilizarea imaginilor WebP în WordPress cu EWWW Optimizer

EWWW Image Optimizer este unul dintre cele mai bune pluginuri de compresie a imaginilor WordPress care vă permite să vă optimizați imaginile WordPress. De asemenea, suportă imagini WebP și le poate afișa automat pe browserele compatibile. Consultați recenzia noastră EWWW Image Optimizer pentru mai multe detalii.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați plugin-ul EWWW Image Optimizer. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum se instalează un plugin WordPress.

După activare, accesați pagina Setări » EWWW Image Optimizer pentru a configura opțiunile pluginului. Veți vedea un expert de configurare, dar puteți face clic pe linkul „Știu ce fac” pentru a ieși din el.

Pe ecranul următor, veți vedea o serie de opțiuni ale pluginului.

Derulați în jos și bifați căsuța de lângă opțiunea „Conversie WebP”.

După aceea, faceți clic pe butonul „Salvează modificările” pentru a stoca setările.

Apoi, trebuie să derulați în jos la secțiunea Conversie WebP. Pluginul vă va afișa acum câteva reguli de rescriere cu o imagine de previzualizare roșie.

Va trebui să faceți clic pe butonul „Inserare reguli de rescriere”, iar pluginul va încerca automat să insereze aceste reguli de rescriere în fișierul dvs. .htaccess.

Dacă pluginul reușește să adauge acele reguli, atunci previzualizarea roșie a imaginii va deveni verde cu textul „WebP”.

Uneori, pluginul s-ar putea să nu poată insera regulile. În acest caz, trebuie să copiați regulile de rescriere din pagina de setări a pluginului și să le lipiți manual în partea de jos a fișierului dvs. .htaccess.

Odată ce ați terminat, reveniți la pagina de setări a pluginului și faceți clic din nou pe butonul „Salvează modificările”. Dacă imaginea de previzualizare devine verde, înseamnă că ați activat cu succes livrarea imaginilor WebP pe site-ul dvs. WordPress.

Alternativ, puteți alege „JS WebP Rewriting” sau „Picture WebP Rewriting” ca opțiuni de livrare WebP. Acestea sunt alternative fiabile dacă metoda .htaccess nu funcționează pentru configurația serverului dvs. (de exemplu, dacă utilizați un CDN).

Convertiți în masă imaginile vechi în versiuni WebP

EWWW Image Optimizer vă permite să convertiți cu ușurință fișierele de imagini încărcate anterior în imagini WebP. Pur și simplu accesați pagina Media » Bibliotecă și comutați la vizualizarea listă.

Apoi, trebuie să faceți clic pe butonul „Opțiuni ecran” și să schimbați „Numărul de elemente pe pagină” la 999. Dacă aveți peste 1000 de imagini, atunci acele imagini vor apărea pe pagina următoare.

Astfel, veți putea selecta rapid un număr mare de imagini pentru optimizare în masă. Apoi, faceți clic pe caseta de selectare Selectați tot din partea de sus pentru a selecta toate imaginile.

După aceea, faceți clic pe meniul derulant „Acțiuni în masă” și selectați opțiunea „Optimizare în masă”. În final, faceți clic pe butonul „Aplică”.

Pe ecranul următor, pluginul vă va oferi opțiunea de a omite compresia imaginilor și de a le converti doar în WebP. Puteți bifa această opțiune dacă imaginile dvs. sunt deja optimizate.

După aceea, faceți clic pe butonul „Scanare pentru imagini neoptimizate” pentru a continua. Pluginul vă va arăta apoi numărul de imagini găsite, astfel încât să puteți face clic pe butonul Optimizează pentru a continua.

Imaginile dvs. vor fi acum optimizate, iar EWWW Optimizer va genera versiuni WebP pentru imaginile dvs.

Testarea livrării imaginilor WebP

Odată ce ați optimizat imaginile, puteți accesa o postare de blog care conține mai multe imagini.

Plasați cursorul mouse-ului peste orice imagine și faceți clic dreapta pentru a deschide imaginea într-o filă nouă.

Aceasta va deschide imaginea într-o nouă filă a browserului.

Deoarece EWWW Image Optimizer utilizează reguli speciale de rescriere, URL-ul imaginii din bara de adrese va afișa în continuare extensia fișierului original (cum ar fi .png sau .jpg).

Pentru a confirma că este o imagine WebP, faceți clic dreapta pe imagine și selectați „Salvați imaginea ca...”. În fereastra de descărcare, ar trebui să vedeți „Imagine WebP” listată ca tip de fișier.

Dacă pluginul nu poate servi imaginea WebP, atunci puteți reveni la pagina de setări a pluginului. De aici, puteți schimba opțiunea de livrare WebP la metodele „JS WebP Rewriting” sau „WebP Rewriting”.

Metoda 2: Utilizarea imaginilor WebP în WordPress cu Imagify

Imagify este un plugin de optimizare a imaginilor WordPress creat de oamenii din spatele WP Rocket, cel mai bun plugin de caching WordPress. Vă permite să optimizați și să convertiți cu ușurință imaginile în format de imagine WebP. Consultați recenzia noastră Imagify pentru a afla mai multe.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Imagify. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, trebuie să vizitați pagina Setări » Imagify pentru a configura setările pluginului. De aici, faceți clic pe butonul „Creează o cheie API gratuită” pentru a continua.

Vi se va cere să introduceți o adresă de e-mail de afaceri. După aceea, puteți verifica inbox-ul pentru un e-mail care conține cheia API. Copiați și lipiți cheia pe pagina de setări a pluginului și faceți clic pe butonul „Salvare modificări”.

Apoi, trebuie să derulați în jos la secțiunea Optimizare. Acolo trebuie să bifați opțiunile de lângă „Creează versiuni webp ale imaginilor” și „Afișează imaginile în format webp pe site”.

Mai jos, puteți alege între două metode de livrare pentru a afișa imagini WebP în WordPress. Prima este metoda .htaccess, iar a doua este utilizarea unei etichete.

Metoda .htaccess este mai rapidă, dar nu funcționează dacă utilizați un serviciu CDN. Metoda cu tag-uri (folosind tag-uri <picture>) funcționează perfect cu CDN-urile, deși modifică ușor structura codului site-ului dvs.

Puteți alege oricare dintre ele care funcționează bine pentru site-ul dvs. După aceea, faceți clic pe butonul ‘Salvare și Mergi la Optimizator în masă’ din partea de jos.

Acest lucru vă va duce la pagina Media » Optimizare în masă.

Pluginul va începe automat optimizarea tuturor imaginilor WordPress în fundal.

Dacă aveți multe imagini, atunci acest lucru poate dura ceva timp. Nu vă faceți griji, puteți închide pagina și reveni la ea mai târziu, deoarece închiderea paginii nu va opri procesul de optimizare a imaginilor.

Testarea imaginilor WebP în WordPress

Odată ce optimizarea este finalizată, puteți vizita o pagină sau o postare care conține câteva imagini. Plasați cursorul mouse-ului peste o imagine și apoi faceți clic dreapta pentru a selecta „Deschide imaginea într-o filă nouă”.

Aceasta va deschide imaginea într-o nouă filă a browserului.

Deoarece Imagify păstrează structura URL-ului original, nu veți vedea extensia .webp în bara de adrese. În schimb, faceți clic dreapta pe imagine și selectați „Salvați imaginea ca...”. Tipul fișierului din fereastra de salvare ar trebui să spună „WebP Image”.

Metoda 3: Utilizarea imaginilor WebP în WordPress cu SG Optimizer

Această metodă este recomandată dacă sunteți un utilizator SiteGround.

SiteGround este una dintre cele mai bune companii de hosting WordPress. Ei oferă un plugin gratuit SG Optimizer utilizatorilor lor, care vă permite să optimizați performanța WordPress. Include, de asemenea, opțiunea de a optimiza imaginile WordPress.

Mai întâi, trebuie să instalați și să activați pluginul SG Optimizer.

La activare, pluginul va adăuga un nou element de meniu în bara laterală de administrare, etichetat ‘SG Optimizer’. Făcând clic pe el, veți fi direcționat către pagina de setări a pluginului.

De aici, puteți activa setările de caching dacă doriți să utilizați sistemul de caching încorporat al SiteGround.

După aceea, puteți trece la fila Optimizare Media și puteți activa opțiunea „Generare Copii WebP pentru Imagini Noi”.

Sub aceasta, veți vedea opțiunea „Generare fișiere WebP în masă”.

Apăsarea butonului de comutare al acelei opțiuni va începe generarea copiilor WebP pentru toate fișierele imagine din biblioteca media WordPress.

Odată terminat, site-ul dvs. WordPress va începe să servească imagini WebP.

Testarea imaginilor WebP în SG Optimizer

Pentru a vedea dacă site-ul dvs. web servește imagini WebP, trebuie să deschideți o pagină de pe site-ul dvs. cu câteva imagini.

După aceea, faceți clic dreapta și selectați instrumentul Inspect. Acesta va deschide consola dezvoltatorului, unde trebuie să comutați la fila Network.

De aici, faceți clic pe fila de filtrare „Img” și apoi reîncărcați pagina (CTRL+R pe Windows și Command+R pe Mac). Uitați-vă la coloana „Type” din inspector. Ar trebui să vedeți „webp” listat ca tip pentru imaginile dvs.

Tutorial video

Abonează-te la WPBeginner

Întrebări frecvente despre imaginile WebP

Mulți cititori au întrebări despre trecerea la acest format de fișier și cum afectează performanța site-ului lor web. Iată răspunsuri la unele dintre cele mai frecvente întrebări pe care le primim despre utilizarea imaginilor WebP în WordPress.

1. Imaginile WebP ajută cu adevărat la SEO?

Da, imaginile WebP vă pot îmbunătăți semnificativ clasamentul SEO. Google consideră viteza paginii un factor major de clasificare, iar utilizarea WebP reduce timpii de încărcare a paginii.

Prin servirea unor fișiere de imagine mai mici, îmbunătățiți scorurile Core Web Vitals, ceea ce ajută site-ul dvs. WordPress să se claseze mai sus în rezultatele căutării.

2. Ce se întâmplă dacă browserul unui vizitator nu suportă WebP?

Deși majoritatea browserelor moderne suportă WebP, un procent mic de browsere mai vechi nu o fac.

Dacă utilizați un plugin de optimizare precum EWWW Image Optimizer sau Imagify, pluginul detectează automat browserul vizitatorului. Acesta va servi versiunea WebP browserelor moderne și fișierul original JPEG sau PNG browserelor mai vechi, asigurându-se că toată lumea vă poate vedea conținutul.

3. Pot încărca imagini WebP direct în WordPress fără un plugin?

Da, WordPress 5.8 și versiunile ulterioare vă permit să încărcați fișiere WebP direct în biblioteca media, la fel cum încărcați JPEG-uri sau PNG-uri. Cu toate acestea, încărcarea fișierelor manual nu convertește biblioteca media existentă.

Pentru a converti automat imaginile mai vechi, aveți în continuare nevoie de un plugin de optimizare a imaginilor, cum ar fi SG Optimizer sau EWWW Image Optimizer.

4. Este WebP mai bun decât JPEG sau PNG?

În aproape toate cazurile, WebP este mai bun pentru performanța site-ului web. Imaginile WebP sunt, de obicei, cu 25% până la 35% mai mici decât fișierele JPEG sau PNG comparabile, menținând în același timp aceeași calitate vizuală. Această dimensiune mai mică a fișierului economisește lățime de bandă și face ca paginile dvs. să se încarce mult mai repede pentru vizitatorii dvs.

5. Conversia la WebP va șterge imaginile mele originale?

Majoritatea plugin-urilor de optimizare a imaginilor, inclusiv Imagify și EWWW Image Optimizer, nu șterg imaginile originale în mod implicit. Ele creează o versiune WebP a imaginii pentru a o afișa vizitatorilor, păstrând în același timp fișierul original pe serverul dvs. ca backup. Acest lucru vă permite să anulați modificările dacă decideți vreodată să nu mai utilizați formatul WebP.

Ghiduri experte despre utilizarea imaginilor în WordPress

Sperăm că acest articol v-a ajutat să învățați cum să utilizați imaginile WebP în WordPress. De asemenea, ați putea dori să vedeți alte ghiduri pentru utilizarea imaginilor pe site-ul dvs. WordPress:

• Cum să adăugați corect imagini în WordPress (pas cu pas)
• Cum să adăugați imagini de prezentare sau miniaturi de postări în WordPress
• WebP vs. PNG vs. JPEG: Cel mai bun format de imagine pentru WordPress
• Cum să optimizați imaginile pentru performanța web fără a pierde calitatea
• Cele mai bune pluginuri de compresie a imaginilor pentru WordPress comparate
• Instrumente pentru a crea imagini mai bune pentru postările dvs. de blog
• Cele mai bune pluginuri WordPress pentru gestionarea imaginilor (actualizat)
• Text alternativ imagine vs. titlu imagine în WordPress – Care este diferența?
• Unde stochează WordPress imaginile pe site-ul dvs.?
• Cum să încarci imagini leneș în WordPress cu ușurință

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.