La WPBeginner, evaluăm constant noi tehnologii care pot ajuta utilizatorii WordPress să creeze site-uri web mai rapide și cu performanțe mai bune. Imaginile WebP sunt pe radarul nostru de ceva timp și, deși nu le-am implementat încă pe propriul nostru site, suntem conștienți de potențialul formatului.
Ceea ce face WebP interesant este capacitatea sa de a reduce dimensiunea fișierelor imagine cu până la 35% fără nicio pierdere vizibilă de calitate. Am văzut site-uri care folosesc WebP obținând îmbunătățiri semnificative în viteza de încărcare și implicarea utilizatorilor.
Pe baza procesului nostru de cercetare și testare, vă vom arăta cum să utilizați imagini WebP în WordPress pentru a beneficia de avantajele de viteză ale acestui format modern de imagini.
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 conversie automată sau opțiuni de rezervă.
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.:
- Utilizarea imaginilor WebP în WordPress cu EWWW Optimizer
- Utilizarea imaginilor WebP în WordPress cu Imagify
- Utilizarea imaginilor WebP în WordPress cu SG Optimizer
- Ghiduri experte despre utilizarea imaginilor în WordPress
Tutorial video
Dacă preferați instrucțiuni scrise, atunci continuați să citiți.
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.
La activare, accesați pagina Setări » EWWW Image Optimizer pentru a configura opțiunile pluginului. Veți fi întâmpinat de un expert de configurare, dar puteți face clic pe linkul „Știu ce fac” pentru a ieși din expert.
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 între metodele de rescriere WebP prin JS sau de rescriere WebP ca opțiuni de livrare WebP. Acestea sunt puțin mai lente decât metoda .htaccess, dar își vor face treaba.
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.
Veți putea vedea că are o extensie .webp în bara de adrese.
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ă folosiți un serviciu CDN. Metoda tag-urilor funcționează și cu CDN-uri, dar poate strica unele teme WordPress.
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.
Veți putea vedea extensia .webp în bara de adrese.
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 „img” și apoi reîncărcați pagina (CTRL+R pe Windows și Command+R pe Mac). Pe măsură ce site-ul dvs. se reîncarcă, veți vedea toate imaginile încărcate în consola dezvoltatorului.
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.
Olaf
Ori de câte ori ne confruntăm cu întrebarea cum să accelerăm un site web, media este o zonă în care există aproape întotdeauna loc de optimizare. Practic, fiecare utilizator WordPress, dacă nu este profesionist, încarcă imagini pe site așa cum sunt salvate pe computerul lor, adesea inutil de mari atât ca dimensiuni, cât și ca dimensiune a fișierului. Este interesant de văzut cât de mult poate îmbunătăți viteza unui site web doar prin ajustarea media, în special prin comprimarea imaginilor într-un alt format. Îmi place WebP deoarece oferă în continuare o calitate suficientă, păstrând în același timp dimensiuni ale fișierelor mult mai mici comparativ cu originalul. Pentru site-urile web existente cu zeci de imagini, este util să cunoașteți o metodă de a face acest lucru în masă, și atunci tutorialele de genul acesta sunt incredibil de valoroase.
Paul
Am urmat pașii pe care i-ați prezentat, dar la testare, noua filă care se deschide când selectez „Deschide imaginea într-o filă nouă” nu se termină în webp, așa cum arătați, ci cu extensia originală a fișierului. Când selectez „Salvează imaginea ca…”, totuși, arată webp. Nu sunt complet sigur ce înseamnă asta. Este imaginea cu adevărat webp și este afișată ca atare? Browserul pe care îl folosesc este cea mai recentă versiune de Chrome, deci nu ar trebui să încarce imaginea de rezervă. Folosesc un plugin de caching, dar am golit cache-ul înainte de testare.
Suport WPBeginner
Folosiți imagini WebP dacă acesta este ceea ce vedeți la salvare. Ar depinde de instrumentul pe care îl utilizați, dar există redirecționare WebP pentru URL, astfel încât să păstrați URL-ul, dar să afișați versiunea WebP a imaginii pentru a preveni erorile 404.
Admin
MOINUDDIN WAHEED
Căutam un mecanism pentru a converti imaginile mele WordPress în webp, deoarece am văzut o diferență uriașă în dimensiunea fișierelor între imaginile png și jpg și imaginile webp.
Având imagini webp, cu siguranță va ajuta la încărcarea mai rapidă a site-ului web. Va îmbunătăți viteza și performanța site-ului web.
Mulțumesc pentru ghidul de conversie a imaginilor WordPress existente în format webp.
Suport WPBeginner
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk
De obicei, generez imagini WebP într-un editor extern. Cu toate acestea, este o practică mai bună să încarc imagini în format PNG pe web și apoi să le generez în WebP? Adică, este mai bine să am ambele formate din care browserul să aleagă sau nu? Sunt îngrijorat că cineva ar putea folosi încă un browser vechi care nu suportă WebP, iar apoi acele imagini nu vor fi afișate pe site-ul meu pentru acel utilizator.
Suport WPBeginner
Dacă doriți în mod specific o imagine de rezervă, atunci permiterea plugin-urilor să convertească imaginile pentru dvs. ar fi cea mai bună opțiune. Crearea imaginilor WebP cu un editor ar fi modalitatea recomandată pentru a economisi spațiu pe site-ul dvs.
Admin
Jiří Vaněk
Vă mulțumesc pentru răspuns. Încă am mult spațiu pe FTP-ul meu (100 GB), așa că, pe baza răspunsului dumneavoastră, voi folosi mai degrabă un plugin pentru a avea mai multe formate de imagini pe site, asigurându-mă că funcționează bine chiar și pentru browserele mai vechi care nu suportă webp. Știu că mai sunt foarte puține astfel de browsere, dar ele încă există. Mulțumesc pentru sfat.
emir
Am folosit câteva imagini webp în WooCommerce, în timp ce făceam backup la woocommerce pe un alt server, imaginile webp nu au fost transferate, am revenit la formatul jpeg.
Suport WPBeginner
Vă mulțumim că ați împărtășit experiența dvs. cu imaginile webp. Dacă contactați suportul pentru instrumentul dvs. de backup, există de obicei fragmente de cod sau alte modalități de a rezolva acea problemă!
Admin
Ashikur Rahman
dacă urmez pasul 1, voi avea fișiere vechi în format jpg/png, corect? va crea o mizerie în folderul de încărcare. au opțiunea de a elimina fișierul original, dacă folosesc acea opțiune. îmi va strica imaginile postărilor?
și cel mai important, ce se întâmplă dacă dezactivez/șterg pluginul eww, va șterge și imaginea webp convertită?
ce ar trebui să fac?
Suport WPBeginner
Pluginul păstrează în prezent imaginile vechi pentru browserele care nu suportă imagini WebP și ar crea imaginea WebP doar dacă are o dimensiune mai bună decât jpg/png. Eliminarea originalului nu ar defecta site-ul dvs., dar dacă o majoritate a vizitatorilor dvs. folosesc browsere mai vechi care nu suportă WebP, acesta ar putea fi defect pentru acei utilizatori.
Va trebui să verificați cu suportul pluginului pentru starea curentă a imaginilor create atunci când pluginul este eliminat.
Admin
Rebecca
Bună ziua, am observat că unele pluginuri precum wp-optimize permit o opțiune de a păstra datele EXIF pentru conversia în webp. Sunt aceste date necesare de păstrat?
Mulțumesc anticipat
Suport WPBeginner
Nu este necesar, dar este util pentru site-urile care utilizează acele informații.
Admin
Theo
iată ce caut,
Foarte util
Suport WPBeginner
Mă bucur că ghidul nostru a fost util!
Admin
Kim
Mulțumesc mult pentru răspunsul rapid!
Suport WPBeginner
Glad we could help
Admin
Kim
Acesta este un sfat excelent, doar o întrebare... va trebui să rulez optimizatorul EWWW de fiecare dată când încarc o imagine nouă (PNG, JPG)?
Suport WPBeginner
The plugin will automate the process for new uploads
Admin