Cum să utilizați imagini WebP pe WordPress (reduceți dimensiunea fișierelor de imagine cu până la 35%)

Dacă doriți să vă accelerați site-ul WordPress, reducerea dimensiunii fișierului imaginilor dvs. oferă o rentabilitate semnificativă a investiției dvs. În medie, imaginile reprezintă aproximativ jumătate din dimensiunea fișierului unei pagini web, astfel încât chiar și îmbunătățirile minore pot da rezultate uriașe. WebP vă poate ajuta enorm cu asta!

WebP este un format de imagine modern care vă poate ajuta să reduceți dimensiunea imaginilor dvs. fără a modifica aspectul acestora. În medie, învățarea cum să convertiți o imagine în WebP poate micșora dimensiunea fișierului cu ~25-35%, fără pierderi vizibile de calitate.

Cele mai multe browsere moderne și WordPress 5.8+ acceptă WebP din cutie. În acest articol, ne vom aprofunda în acest nou format de imagine interesant și vă vom arăta cum puteți să-i profitați de minunatia.

Gata? Să începem!

Ce este WebP?

Deci, ce este un fișier WebP? Pe scurt, WebP este un format de imagine dezvoltat de Google pentru a optimiza imaginile mai bine decât formatele de imagine populare (la acea vreme). De exemplu, aveți formate de imagine precum JPEG sau JPG și PNG.

Notă: vedeți cum diferite tipuri de fișiere imagine pot afecta viteza site-ului dvs. web.

WebP se concentrează pe livrarea aceluiași fișier imagine, doar cu fișiere de dimensiuni mai mici. Prin reducerea dimensiunii fișierelor dvs. de imagine, puteți oferi în continuare aceeași experiență vizitatorilor site-ului dvs., dar site-ul dvs. se va încărca mai repede.

De exemplu, în studiul Google de compresie WebP, Google a descoperit că un fișier imagine WebP este în medie:

• 25-34% mai mică decât o imagine JPEG comparabilă.
• Cu 26% mai mică decât o imagine PNG comparabilă.

Acesta este motivul pentru care, dacă vă rulați site-ul prin PageSpeed ​​Insights, una dintre numeroasele recomandări este să difuzați imagini în formate de generație următoare, cum ar fi WebP :

Deci, cum reușește formatul WebP de la Google să obțină aceste reduceri ale dimensiunii fișierului?

În primul rând, acceptă compresia cu pierderi și fără pierderi, astfel încât reducerea exactă va depinde dacă utilizați compresie cu pierderi sau fără pierderi.

Cu compresie cu pierderi, WebP folosește ceva numit „codificare predictivă” pentru a reduce dimensiunea fișierului. Codarea predictivă utilizează valorile pixelilor vecini dintr-o imagine pentru a prezice valori și apoi codifică doar diferența. Se bazează pe codificarea cadrelor cheie VP8.

Lossless WebP folosește un set mult mai complicat de metode care au fost dezvoltate de echipa WebP.

Dacă doriți să aflați în detaliu despre tehnicile de compresie WebP, acest articol este un bun punct de plecare.

Ce browsere Web acceptă WebP?

Pentru ca imaginile WebP să funcționeze, browserul web al unui vizitator trebuie să le accepte. Din păcate, în timp ce suportul pentru browser a crescut mult, compatibilitatea WebP nu este încă universală .

Imaginile WebP sunt acceptate de browsere populare, cum ar fi:

• Chrome ( desktop și mobil )
• Firefox ( desktop și mobil )
• Microsoft Edge
• iOS și macOS Safari ( numai macOS 11 Big Sur și mai târziu )
• Opera ( desktop și mobil )

În momentul în care scriem această postare, Safari acceptă doar parțial imaginile WebP.

De asemenea, Internet Explorer nu are suport pentru WebP (dar Edge acceptă WebP deoarece se bazează pe Chromium). Cu toate acestea, utilizarea IE a scăzut la mai puțin de 1% din totalul utilizatorilor de internet. Este un avantaj pentru toată lumea de pe web!

În total, aproximativ 95% dintre utilizatorii de Internet folosesc un browser care acceptă WebP. Deci, deși cu siguranță are suport majoritar, acel 5% este un obstacol minor, mai ales când este vorba de utilizatorii Safari pe versiuni mai vechi de macOS. În tutorialul nostru WordPress WebP de mai jos, vă vom arăta cum să gestionați acest lucru, astfel încât toți vizitatorii dvs. să aibă o experiență grozavă.

Comparația dimensiunilor WebP vs JPG vs PNG

Conform testelor Google, imaginile WebP sunt:

• 25-34% mai mic decât imaginile JPEG comparabile.
• Cu 26% mai mici decât imaginile PNG similare.

Dacă doriți să aflați mai multe despre metodologia Google, puteți găsi link-uri directe către rezultatele complete de mai jos:

• JPEG
• PNG

Ambele teste se bazează pe peste 11.000 de imagini, inclusiv:

• Celebra imagine Lenna
• 24 de imagini din suita de imagini Kodak true color
• 100 de imagini de pe Tecnick.com
• Un eșantion aleatoriu de peste 11.000 de imagini din Căutare de imagini Google

Cum să utilizați imagini WebP pe WordPress

Începând cu WordPress 5.8, veți putea utiliza formatul de imagine WebP în același mod ca și formatele JPEG, PNG și GIF. Încărcați-vă imaginile în Biblioteca dvs. media și includeți-le în conținut. Deoarece WordPress 5.8+ acceptă în mod implicit formatul WebP, nu trebuie să instalați pluginuri terță parte pentru a încărca imagini WebP. Acest lucru ar trebui să fie suficient pentru cele mai comune cazuri de utilizare.

Pentru a începe imediat, puteți consulta manualul nostru rapid despre utilizarea imaginilor WebP în WordPress 5.8+. Vă sugerăm să parcurgeți avertismentele despre suportul WebP în WordPress.

Cu toate acestea, aproximativ 5% dintre oameni (în principal utilizatorii Safari pe macOS mai vechi) folosesc un browser web care nu acceptă WebP. Dacă convertiți imagini WebP și le utilizați direct în conținutul dvs., acei vizitatori nu ar putea să vă vadă imaginile, ceea ce le-ar distruge experiența de navigare.

De asemenea, generarea de imagini WebP nu este la fel de simplă precum obținerea unei imagini JPG/JPEG, care este formatul implicit de fișier imagine pe majoritatea camerelor, smartphone-urilor și bibliotecilor de imagini online. WordPress nu acceptă conversia automată a imaginilor în format WebP (încă!).

Nu te supăra! Există o soluție.

Puteți utiliza un plugin WordPress care vă convertește imaginile originale în formatul WebP și oferă, de asemenea , imaginea originală ca rezervă dacă browserul unui vizitator nu acceptă WebP.

De exemplu, dacă încărcați un fișier JPEG pe site-ul dvs., pluginul va:

• Convertiți fișierul JPEG în WebP și serviți versiunea WebP pentru Chrome, Firefox, Edge etc.
• Afișați fișierul JPEG original vizitatorilor care navighează cu Safari (pe versiuni mai vechi de macOS) și alte browsere care nu acceptă WebP.

În acest fel, toată lumea vă poate vedea imaginea și toată lumea beneficiază de cea mai rapidă experiență posibilă.

Mai jos, vom analiza unele dintre cele mai bune pluginuri WebP WordPress , toate care funcționează cu Kinsta și Kinsta CDN.

ShortPixel

ShortPixel este un plugin popular de optimizare a imaginii WordPress care vă poate ajuta să redimensionați și să comprimați automat imaginile pe care le încărcați pe site-ul dvs. WordPress.

Ca parte a listei de caracteristici, ShortPixel vă poate ajuta, de asemenea, să convertiți automat imaginile în WebP și să difuzați acele imagini către browsere care îl acceptă.

ShortPixel are un plan gratuit limitat care vă permite să optimizați gratuit ~100 de imagini pe lună. Planurile plătite încep de la 4,99 USD pe lună pentru până la 5.000 de imagini/credite sau 9,99 USD o singură dată pentru un pachet de 10.000 de credite.

ShortPixel numără fiecare dimensiune de imagine WordPress pe care o optimizați ca credit. Deci, dacă doriți să optimizați mai multe dimensiuni de miniaturi de imagine, o singură imagine ar putea folosi numeroase credite. Nu există limite pentru dimensiunea fișierelor pentru imagini.

Vă puteți distribui creditele ShortPixel pe site-uri web nelimitate – nu există limite pe site ( și toate site-urile dvs. pot folosi același cont ShortPixel ).

Pentru a folosi ShortPixel pentru a difuza imagini WebP pe WordPress, va trebui să instalați pluginul de pe WordPress.org și să adăugați cheia API ( pe care o puteți obține înregistrându-vă pentru un cont ShortPixel gratuit ).

În fila General , puteți configura setările de bază pentru modul în care funcționează optimizarea imaginii. De exemplu, ce nivel de compresie să utilizați și dacă să redimensionați sau nu imaginile:

Pentru a activa imaginile WebP, accesați fila Avansat și:

1. Bifați caseta pentru WebP Images
2. Bifați caseta pentru a livra versiunile WebP... (aceasta apare după ce bifați prima casetă)
3. Selectați butonul radio pentru Utilizarea sintaxei etichetei <PICTURE> (acesta apare după bifarea casetei anterioare)
4. Lăsați opțiunea implicită Numai prin selecția cârligelor WordPress

Apoi, salvați modificările.

Dacă găzduiți la Kinsta, ShortPixel vă va oferi un mesaj de avertizare despre configurarea fișierelor de configurare a serverului pe Nginx. Pentru a configura aceste setări, puteți contacta asistența Kinsta și vom fi bucuroși să setăm configurația serverului pentru dvs.

Imaginează

Imagify este un plugin popular de optimizare a imaginii de la același dezvoltator ca WP Rocket (unul dintre puținele pluginuri de cache care funcționează cu Kinsta).

Poate comprima și redimensiona automat imaginile pe care le încărcați pe site-ul dvs. WordPress. Apoi, vă poate ajuta, de asemenea, să le convertiți în WebP și să oferiți acele versiuni vizitatorilor cu browsere care îl acceptă.

În ceea ce privește caracteristicile, ShortPixel și Imagify au multe asemănări. Cea mai semnificativă diferență vine atunci când te uiți la prețuri. În timp ce ShortPixel vă taxează pe baza imaginilor fără limită de dimensiune pe imagine, Imagify vă taxează pe baza dimensiunii totale a fișierului, fără limită de imagine.

Deci, dacă trebuie să optimizați o mulțime de imagini mari, abordarea lui ShortPixel ar putea fi mai ieftină. Dar dacă trebuie să optimizați o mulțime de imagini mici, abordarea Imagify ar putea fi mai accesibilă.

Imagify are un nivel gratuit limitat care permite 25 MB de optimizări pe lună. După aceea, planurile plătite încep de la 4,99 USD pe lună pentru până la 1 GB sau 9,99 USD pentru un credit unic de 1 GB.

La fel ca ShortPixel, vă puteți împărți limitele contului pe site-uri web nelimitate.

Pentru a utiliza Imagify pentru a livra imagini WordPress WebP, va trebui să instalați pluginul de pe WordPress.org și să adăugați cheia API pentru a începe.

După ce ați activat pluginul, puteți utiliza caseta Setări generale pentru a alege nivelul de compresie.

Pentru a activa imaginile WebP, derulați în jos la secțiunea Optimizare și găsiți secțiunea Format WebP :

1. Bifați caseta pentru a crea versiuni webp ale imaginilor
2. Bifați caseta pentru a afișa imagini în format webp...
3. Selectați butonul radio pentru a utiliza etichetele <picture>

Ca și în cazul ShortPixel, dacă găzduiți la Kinsta, va trebui să creați o regulă Nginx pentru compartimentele cache WebP (luați legătura cu suportul Kinsta).

Optimole

Optimole este un plugin de optimizare a imaginii WordPress care funcționează puțin diferit față de Imagify și ShortPixel. Optimole vă poate comprima și redimensiona automat imaginile. Cu toate acestea, are și alte două caracteristici notabile:

1. Vă poate servi imaginile prin intermediul CDN-ului său (alimentat de Amazon CloudFront).
2. Oferă imagini adaptive în timp real, prin care Optimole va oferi imaginea de dimensiuni optime pentru fiecare vizitator. De exemplu, cineva care navighează pe un ecran mic va obține o imagine cu rezoluție mai mică decât cineva care navighează pe un ecran Retina.

Această abordare este similară cu alte servicii de optimizare/manipulare în timp real, cum ar fi Cloudinary, imgix, KeyCDN Image Processing etc.

Optimole poate livra, de asemenea, imagini WebP vizitatorilor cu browsere care îl acceptă, ca parte a acestei optimizări a imaginii în timp real.

Optimole are un plan gratuit limitat care poate gestiona difuzarea imaginilor către aproximativ 5.000 de vizitatori pe lună. După aceea, planurile plătite încep de la 19 USD pe lună pentru ~25.000 de vizitatori.

Pentru a începe, va trebui să instalați pluginul de pe WordPress.org și să îl activați cu o cheie API ( pe care o puteți obține prin înregistrarea pentru un cont Optimole gratuit ).

Odată ce faci asta, Optimole va începe să optimizeze automat imaginile și să le livreze prin CDN-ul său. Suportul WebP este activat în mod implicit, deci nu este nevoie să îl activați manual.

Pentru a configura alte setări, cum ar fi nivelurile de compresie și comportamentul de scalare, puteți accesa Media → Optimole → Setări :

Deoarece Optimole se ocupă de livrarea imaginilor dvs. prin intermediul CDN-ului său, nu este nevoie să configurați reguli Nginx dacă găzduiți la Kinsta.

rezumat

Imaginile site-ului dvs. WordPress reprezintă o mare parte din dimensiunea fișierului unei pagini medii. Dacă puteți găsi modalități de a reduce dimensiunea imaginilor, vă puteți accelera site-ul fără a afecta experiența utilizatorului. WebP este un format de imagine modern care face exact acest lucru, oferind o reducere de ~25% a dimensiunii fișierului față de fișierele JPEG sau PNG comparative.

Aproximativ 95% dintre utilizatorii de Internet folosesc deja un browser care acceptă WebP. Versiunile WordPress 5.8+ acceptă, de asemenea, WebP din cutie. Deci nu există niciun motiv să nu-l folosești.

Cu toate acestea, o minoritate de browsere, în special Safari pe versiunile mai vechi de macOS, încă nu oferă suport WebP. Prin urmare, încă nu puteți oferi imagini WebP tuturor vizitatorilor. Pentru a rezolva această problemă, puteți utiliza un plugin WordPress care convertește imaginile în WebP și oferă versiuni WebP vizitatorilor ale căror browsere îl acceptă în timp ce utilizează imaginile originale vizitatorilor ale căror browsere nu o acceptă.

Pentru mai multe tactici de optimizare a imaginilor, consultați ghidul nostru complet pentru optimizarea imaginilor pentru performanța web.

Dacă aveți întrebări despre utilizarea WebP pe WordPress, vă rugăm să ne întrebați în comentariile de mai jos!