Cum să Optimizați Imaginile Pentru WordPress
Imaginile sunt un element crucial al fiecărui site web: fac postările și paginile mai interesante și mai atrăgătoare de citit, dar pot deveni rapid o povară pentru performanța și scorul dvs. PageSpeed. Google este întotdeauna precaut și gata să vă penalizeze atunci când vine vorba de performanța web și nu doriți asta, nu?
De aceea, suntem aici pentru a vă oferi toate informațiile despre cum să optimizați imaginile pentru WordPress!
Veți învăța totul despre cum să redimensionați și să comprimați imaginile, să le păstrați calitatea și cum să alegeți cei mai buni optimizatori de imagine online. Vom aprofunda și mai adânc, recomandând un plugin foarte util pentru optimizarea imaginilor WordPress, Imagify. Nu în ultimul rând, veți afla cum să îmbunătățiți performanța site-ului dvs. chiar mai mult prin lazy loading.
Imaginile Mari Sunt Unul Dintre Cei Mai Mari Inamici Din Timpul de Încărcare
Imaginile sunt de obicei una dintre cele mai mari (și trecute cu vederea) probleme de performanță. Chiar și cu stocarea în cache și un CDN, o imagine neoptimizată va mări în continuare timpul de încărcare a paginii dvs. și va afecta scorul pentru Largest Contentful Paint, una dintre valorile Core Web Vitals.
Dar, în calitate de proprietar al site-ului, imaginile sunt complet sub controlul dumneavoastră. Deci, dacă puteți afla cum să lucrați și să optimizați imaginile, puteți îmbunătăți viteza site-ului dvs. și puteți optimiza performanțele Core Web Vitals.
Pe baza experienței, știu că una dintre cele mai frecvente probleme este legată de paginile mari și încărcate, care uneori sunt aglomerate cu imagini de înaltă rezoluție, widgeturi foto și slidere cu imagini foarte mari.
Pentru a vă face o idee: imaginile contribuie, în medie, cu aproximativ 30% din timpul total de încărcare a paginii. Adesea acesta este cel mai mare factor al timpului de încărcare. În cazuri extreme, se ajunge și la 60% din timpul de încărcare.
Iată un exemplu despre ceea ce fac imaginile neoptimizate site-ului dvs.:
Timpul de încărcare este de 12 secunde, iar dimensiunea paginii este de 8 MB. Dintre acești 8 MB, imaginile reprezintă 6,7 MB. Acest lucru este scăpat de sub control!
Numărul de solicitări HTTP este de obicei citat ca factor în timpul de încărcare și deși este important, în cele din urmă, dimensiunea paginii este indicatorul real al vitezei sau al încetinirii. Puteți avea un număr mic de solicitări HTTP, dar veți avea o problemă gravă dacă solicitările respective provin de la imagini gigantice.
Reducerea dimensiunii paginii prin reducerea dimensiunii imaginii este o strategie simplă și eficientă pentru îmbunătățirea timpului de încărcare. Și poate fi un adevărat factor pentru performanța site-ului dvs. WordPress.
Dimensiunea Fișierului Este Importantă: De ce ar trebui să redimensionați și să comprimați imaginile
Înțelegerea Dimensiunilor Imaginii și a Dimensiunilor Fișierului
Dimensiunile imaginii și anume, cât spațiu pe ecran ocupă o imagine, sunt măsurate în pixeli și deși nu dictează 100% dimensiunea fișierului, acestea sunt corelate. Cu cât dimensiunile imaginii sunt mai mari, cu atât este mai mare dimensiunea fișierului.
Dimensiunea fișierului este măsurată în kilobyți (KB) și megabytes (MB)
1 MB = 1000 KB
Dacă faceți o fotografie cu smartphone-ul dvs., în funcție de setări, fotografia respectivă poate avea o lățime de 2500 pixeli (sau chiar mai mult) cu o dimensiune a fișierului de 3 MB (sau 3000 KB). Dacă ar fi să fac o fotografie cu telefonul meu și să o încarc pe acest blog fără nicio editare, voi încărca un fișier de aproximativ 3 ori mai mare decât trebuie – o risipă totală de resurse și o mare solicitare la încărcarea paginii.
Așadar, în timp ce fotografierea cu telefonul și încărcarea pe blogul dvs. ar putea fi simplă, creează o problemă reală dacă doriți un site rapid, adăugând multă greutate inutilă.
Înainte de a încărca acea fotografie, trebuie să faceți două lucruri: redimensionați-o și comprimați-o. Iată cum.
Cum să Redimensionați Imaginile Online
Deci, primul lucru pe care trebuie să-l faceți este să redimensionați imaginile la dimensiunea corectă pentru site-ul dvs. Pentru imaginile de pe blog, aflați cât de largă este zona de conținut a blogului dvs. și nu încărcați niciodată o imagine mai largă decât aceasta. Dacă va fi utilizată într-un slider, asigurați-vă că determinați mai întâi dimensiunile sliderului.
Cum Știi Cât de Largă Este Zona de Conținut?
Dacă știi cum să folosești instrumentele pentru dezvoltatori integrate în Chrome sau Firefox, poți să le folosești. Dar dacă sună înfricoșător, există instrumente mai simple disponibile.
Dacă sunteți pe un Mac, există un instrument de captare a ecranului, Grab, deja încorporat, iar când conturați o zonă de pe ecran, acesta vă va arăta pixelii.
Sau puteți instala extensia de completare: Page Ruler Redux pentru Chrome.
După ce ați aflat ce dimensiuni ar trebui să aibă imaginile dvs., puteți utiliza oricare dintre instrumentele de mai jos pentru a redimensiona imaginile în consecință:
Aplicații și Instrumente pentru Redimensionare
- Photoshop
- GIMP – gratuit, Windows și Mac
- Irfan View- Gratuit pentru Windows
- Preview for Mac – deja instalat!
- Dezvoltatorii de pe Mac pot verifica sipsurile, un instrument din linia de comandă
Instrumente Online pentru Redimensionare
- Picmonkey.com
- Pixlr.com (are și o aplicație mobilă)
- Fotor.com (are și o aplicație mobilă)
Nu contează pe care o utilizați – tot ce trebuie să faceți este să localizați caracteristica de redimensionare. Veți putea introduce lățimea dorită a pixelilor, iar aplicația se va asigura că imaginea rămâne proporțională, ajustând automat înălțimea.
Formate Comune de Imagine
Imaginile de pe web ar trebui să fie salvate fie în .jpg, .png sau, eventual, în .gif
- JPEG-urile sunt folosite cel mai bine pentru fotografii și imagini de uz general în care nu aveți nevoie de transparență. Le puteți comprima cu ușurință și puteți obține o dimensiune mai mică a fișierului, potrivită pentru web.
- PNG-urile vor genera adesea o dimensiune mai mare a fișierului, astfel încât acestea ar trebui utilizate numai atunci când aveți o imagine care necesită transparență.
- GIF-urile sunt mai puțin utilizate. Au o gamă limitată de culori, deci pot fi utilizate doar pentru imagini foarte simple, dar pot produce o dimensiune mică a fișierului.
Ar trebui să vă convertiți imaginile în formatul WebP pentru a le încărca mai repede. WordPress nu acceptă WebP și nu le puteți încărca doar – dar puteți utiliza un plugin și puteți reduce cu ușurință dimensiunea imaginilor.
Cum să Comprimați Imaginile De pe Web
Deci, ne-am ocupat de dimensiunile fizice ale imaginii, acum să ne ocupăm de „greutatea” imaginii. Vrem să comprimăm imaginea pentru a o face cât mai slabă și cu încărcare rapidă posibilă. Scopul este de a reduce dimensiunea fișierului. Nu există un număr magic pentru cum ar trebui să fie fiecare imagine, deoarece depinde de modul în care va fi folosită. Imaginile folosite într-un banner sau slider vor fi mai mari, dar trebuie reduse fiecare dintre acestea la 100 KB sau mai puțin.
Imaginile mici care vor fi utilizate pentru miniaturi, sigle etc. vor fi mult mai mici. Logo-ul din partea de sus a acestui blog, de exemplu, este de 5,8 KB.
Este posibil să existe o ușoară pierdere a calității odată cu compresia, deci căutați un echilibru între calitate și dimensiunea fișierului. Dar amintiți-vă întotdeauna: cu cât dimensiunea fișierului este mai mică, cu atât timpul de încărcare va fi mai rapid.
Aplicații Pentru Comprimarea Imaginilor
- Photoshop – asigurați-vă că utilizați opțiunea Salvare pentru web
- GIMP
- ImageOptim (Mac)
Instrumente Online
Folosirea instrumentelor profesionale de optimizare a imaginii precum Photoshop sau Gimp este într-adevăr un mod foarte eficient de a vă gestiona imaginile și de a le pregăti pentru web: dar curba de învățare a acestor instrumente poate fi uneori copleșitoare.
De cele mai multe ori, înclinarea către un instrument de optimizare a imaginii online este cea mai bună și cea mai accesibilă alegere.
Un Plugin WordPress Vă Va Face Viața Mai Ușoară
Dezavantajele majorității instrumentelor de optimizare a imaginii online sunt că nu aveți control deplin asupra imaginilor dvs. după ce sunt optimizate. După ce descărcați imaginile optimizate, va trebui să le sortați manual în foldere.
Mai mult, unele instrumente online nu clarifică modul în care imaginile dvs. sunt stocate pe serverele lor și pentru cât timp: nu este atât de cool!
Mai natural va fi să vă optimizați și să vă stocați imaginile chiar în biblioteca media de pe site-ul dvs. WordPress, nu?
De fapt, este de preferat să vă redimensionați și să comprimați imaginea înainte de a o încărca pe WordPress.
Pe de altă parte, dacă site-ul dvs. este deja live, va trebui să vă ocupați de imaginile care sunt deja acolo.
Pentru imaginile cruciale, cum ar fi siglele, anteturile și altele care se încarcă pe fiecare pagină a site-ului dvs., cel mai bine ar fi să faceți noi versiuni ale imaginilor, apoi să instalați pluginul Enable Media Replace. Acest plugin vă va permite să înlocuiți pur și simplu imaginile existente în biblioteca dvs. media cu cele noi, optimizate, fără a rupe niciun link.
Pentru celelalte imagini aflate în biblioteca dvs. media, unde nu ar fi realist să le parcurgeți și să le remediați individual, puteți arunca o privire asupra celor mai bune pluginuri de optimizare a imaginii pentru WordPress.
Să aruncăm o privire mai atentă asupra unuia dintre ele, Imagify.
Imagini Mai Ușoare Pentru un Site Web Mai Rapid cu Imagify
Optarea pentru un plugin WordPress în locul unui instrument de optimizare a imaginii online vă va economisi mult timp. Odată instalat, un bun plugin de optimizare funcționează de obicei în mod autonom, evitând modificările manuale. Imaginile dvs. ar trebui să fie optimizate la încărcare și să fie întotdeauna pregătite pentru momentul în care decideți să le adăugați la o postare sau o pagină.
Unul dintre cele mai complete pluginuri de optimizare a imaginii pentru WordPress este Imagify: este dezvoltat de WP Media, aceeași companie din spatele WP Rocket. Așadar, dacă știți și iubiți deja soluția lor de cache, nu veți fi surprinși de aceeași simplitate și utilizare pe care le-au adăugat și în Imagify.
Toate fișierele jpg, png și gif vor fi întotdeauna în formă perfectă și gata de încărcare pe paginile dvs. cu acest instrument! De asemenea, vă puteți converti imaginile în format WebP și puteți îmbunătăți performanța.
Deoarece imaginile au un impact atât de mare asupra timpilor de încărcare, un instrument de compresie este complementul perfect pentru un plugin de cache. Oferă 3 moduri de compresie a imaginii pentru a vă ajuta să obțineți un control real asupra performanței timpului de încărcare.
Imagify vă poate optimiza în bloc biblioteca media existentă sau puteți selecta manual ce imagini să optimizați.
Dacă creați site-uri pentru clienți sau aveți un site cu mai mulți utilizatori în care nu vă puteți asigura că toată lumea folosește cele mai bune practici și încarcă imagini frumos optimizate, Imagify vă poate ajuta prin comprimarea și redimensionarea automată a mai multor imagini pe măsură ce acestea sunt încărcate.
Lazy Loading Pentru a vă Face Imaginile mai Rapide
Comprimarea și redimensionarea imaginilor sunt acțiuni cruciale de întreprins înainte de a încărca fișierele pe site-ul dvs.
Dar ce se întâmplă după încărcarea imaginilor optimizate? Există încă o posibilitate de îmbunătățire în ceea ce privește performanța?
Cum puteți câștiga un pic de mai multă viteză pentru a vă încărca paginile mai repede, chiar și atunci când acestea trebuie să găzduiască mai multe imagini?
Găsirea unei tehnici care poate economisi chiar și câteva milisecunde suplimentare de așteptare pentru utilizatorii dvs. ar putea fi esențială. Amintiți-vă că atunci când navigați între site-uri, cu toții tindem să fim nerăbdători și să nu percepem aproape niciodată timpul real de încărcare a site-ului pe care îl vizităm.
Răspunsul, în acest caz, este unul: aplicați un script de lazy load la imaginile dvs.
Scriptul de Lazy Loading
Răspunsul este scriptul de lazy loading. Aceasta este o tehnică benefică care întârzie încărcarea imaginilor de pe ecran, considerate ca resurse non-critice, și le lasă „în afara ecranului” până când utilizatorul are nevoie de ele. Dacă utilizatorii nu derulează pagina, imaginile plasate în partea de jos nu vor fi încărcate.
Puteți vedea lazy loading în acțiune pe mai multe bloguri sau site-uri web populare; să luăm de exemplu, Unsplash.com: când derulați galeria lor de imagini, veți vedea ca niște flash-uri înainte de fi înlocuiți cu fotografia originală de înaltă rezoluție.
Aplicarea Lazy Loading prin WP Rocket
Scriptul lazy-load poate fi adăugat programatic: există mai multe tehnici posibile pentru a realiza acest lucru, dacă puteți modifica codul. Ghidurile Google pentru dezvoltatori, de exemplu, oferă o prezentare generală bună a diferitelor metode.
Dar, din moment ce utilizați WordPress, un plugin va fi de mai ajutor, permițându-vă să vă încărcați lazy imaginile fără a plasa un cod. De exemplu, puteți arunca o privire la cele mai bune pluginuri de lazy loading pentru WordPress.
Cu toate acestea, dacă utilizați deja WP Rocket, pluginul de cache include și caracteristica de Lazy Load, care odată activată, aplică comportamentul de lazy loading imaginilor dvs.
Imagini Optimizate cu Pluginuri WP Media
De la început, WP Media a dezvoltat pluginuri pentru WordPress, urmând trei principii de bază: simplitate, utilizare și viteză.
Pluginurile lor sunt ușor de utilizat, au un design curat și nu necesită procese de configurare complexe: WP Rocket, pluginul premium de cache pentru WordPress, a fost primul lansat și de atunci, a câștigat mii de utilizatori din întreaga lume .
Sistemul său de stocare în cache a stimulat milioane de pagini pe Internet, iar scriptul său de lazy load ajută paginile bogate în imagini să se încarce direct.
De asemenea, puteți beneficia de pluginul gratuit Lazy Load independent, care se bazează pe același script folosit de WP Rocket.
Au lansat Imagify cu scopul de a face internetul un loc mai ușor. Imagify este dedicat în totalitate optimizării imaginilor și a fost recunoscut drept unul dintre cele mai bune instrumente de optimizare pentru imagini. Puteți să folosiți aplicația sa web, să o descărcați ca un plugin gratuit pentru WordPress sau să cumpărați o cotă suplimentară dacă trebuie să optimizați mulți MB de imagini.
Se străduiesc să facă web-ul un loc mai durabil cu produsele lor, cu pagini web mai rapide datorită stocării în cache și a imaginilor optimizate: aflați mai multe despre WP Rocket și Imagify!
