Cum să faceți imagini încărcați mai rapid pe site-ul dvs. WordPress

Deci doriți ca imaginile dvs. să se încarce mai repede?


Ei bine, nu voi fi prost. Haideți să ne cufundăm corect în lucrurile bune!

Există trei moduri de a face ca imaginile să se încarce mai repede în WordPress:

  • Redimensionarea
  • Comprima
  • Sarcină leneșă

În această postare, voi explica cum funcționează fiecare dintre aceste tehnici și de ce vor face ca site-ul dvs. să se încarce mai rapid. Vă voi arăta, de asemenea, cum să implementați fiecare tactică, atât cu soluții manuale, cât și cu recomandări de plugin.

Această primă tehnică este extrem de simplă, dar deseori este trecută cu vederea de newbies WordPress.

Cum să optimizați imaginile în WordPress

Redimensionați-vă imaginile

Cel mai simplu mod absolut de a face ca imaginile dvs. să se încarce mai repede este redimensionarea lor. Lasă-mă să explic.

Ce este redimensionarea?

Când spun „redimensionare” vreau să schimb dimensiunile unei imagini și, în acest caz, doriți să reduceți dimensiunile imaginilor prea mari.

Ca exemplu, bloggerii fac uneori fotografii pe telefoanele lor sau pe camera digitală și le încarcă pe blogurile lor. Copiile needitate ale fotografiilor pot avea o lățime de 5.000px. Acum gândiți-vă la asta …

Lățimea secțiunii de postare pe site-ul dvs. este probabil nu mai mare de 800px. Textul pe care îl citiți în acest moment se întinde doar pe 700px pe întreaga pagină, deci imaginați-vă că adăugați o imagine cu 5.000px lățime aici. Ar fi mult mai mare decât trebuie și deși ar fi redus pentru a se potrivi paginii, fișierul de imagine încărcat este încă masiv și extrem de risipitor. Și asta pentru că …

Imaginile care au dimensiuni mai mari au și dimensiuni de fișiere mai mari.

Când vine vorba de performanță și de a face ca imaginile să se încarce mai repede, reducerea dimensiunilor imaginii este o modalitate excelentă de a reduce drastic dimensiunea fișierului, iar acest lucru face ca imaginea să se încarce mai repede.

Să revenim la exemplul meu și să presupunem că imaginea are 5.000px lățime și înălțime. Dacă ați reduce-o de la 5.000px la doar 700px, imaginea ar utiliza de fapt cu 99% mai puțini pixeli. Cu alte cuvinte, dimensiunea fișierului ar scădea cu aproximativ 99%. Dacă imaginea ar fi de 5mb, s-ar ajunge la doar 50kb și s-ar încărca cu 99% mai rapid pe site-ul dvs..

Redimensionați imaginile

Dacă nu vă referiți la redimensionarea cu atenție a imaginilor, aproape sigur sunt câteva câștiguri.

Există câteva moduri în care vă puteți redimensiona imaginile pentru a se potrivi perfect pe site.

Redimensionați manual imaginile

Înainte de a încărca o nouă imagine pe site-ul dvs., redimensionați-o manual folosind instrumentele de editare a imaginilor încorporate pe computer.

Dacă aveți o imagine extrem de mare ca în exemplul meu, aceasta va face imediat o mare diferență. După ce imaginea a fost redimensionată, atunci o puteți încărca în Media Media.

Chiar dacă veți folosi imaginea într-o cutie de lumină sau un glisor, în mod normal nu există niciun motiv pentru ca aceasta să fie mai largă de 2.000px. Dacă imaginea va fi într-o zonă de conținut pentru o postare sau o pagină, probabil că vă puteți descurca bine cu imaginea de 800px.

Această metodă de redimensionare a imaginilor funcționează bine, dar nu ajută la imaginile încărcate deja pe site-ul dvs. O tehnică ușoară pentru imaginile existente este alegerea pur și simplu a unei dimensiuni diferite.

Folosiți dimensiuni mai mici

Când încărcați o imagine în Media Library, WordPress creează până la 3 versiuni suplimentare: Miniatură, Mediu și Mare.

Dacă accesați pagina cu setările media, veți vedea că puteți alege aceste dimensiuni aici:

Setări WordPress Media

În timp ce puteți modifica setările, dimensiunea mare implicită este 1024px, care este suficient de mare pentru a fi folosită pentru postări, fără a fi prea risipitoare. Puteți utiliza această dimensiune pentru toate imaginile pe care le includeți în postările dvs..

Pentru a schimba dimensiunea unei imagini pe care ați adăugat-o într-o postare, faceți clic pe ea în editor și veți vedea derularea Dimensiunii imaginii în bara laterală din dreapta.

Redimensionare imagine WordPress

Selectați dimensiunea „Mare” și actualizați postarea. Dacă aveți imagini supradimensionate, această tehnică vă va permite să serviți rapid o dimensiune mai potrivită, care se va încărca mai repede fără a fi nevoie să reîncărcați și să înlocuiți originalul.

Acestea fiind spuse, acest lucru poate fi extraordinar de obositor dacă ai zeci de postări cu zeci de imagini. Există o metodă și mai rapidă și mai eficientă.

Redimensionarea automată cu un plugin

În loc să redimensionați singur imaginile, puteți lăsa un plugin să o facă automat pentru dvs. Când vine vorba de redimensionarea automată a imaginii, nimic nu bate Optimole conecteaza.

Optimole Image Optimizer

Nu funcționează așa cum vă așteptați.

În loc să editeze imaginile din Media Library, Optimole păstrează propriile copii ale imaginilor dvs. și le servește de pe un CDN de înaltă performanță. În acest fel, originalele dvs. nu sunt modificate în niciun fel.

În plus, nu trebuie să acordați Optimole o singură dimensiune pentru a o utiliza pentru imaginile dvs. Mai degrabă, capătă dimensiunea ecranului vizitatorului și generează o versiune optimă pentru fiecare imagine din mers. Asta înseamnă că cineva de pe un dispozitiv mobil ar putea încărca o versiune 400px a unei imagini în timp ce un alt vizitator de pe un laptop primește o versiune 700px a aceleiași imagini.

Această metodă de redimensionare este mult mai ușor de implementat și mai eficientă pentru dispozitivele mobile, ceea ce este deosebit de important deoarece vizitatorii mobili tind adesea să aibă conexiuni mai lente.

Dacă doriți să aflați cum să utilizați Optimole, puteți urma videoclipul meu complet:

V-am recomandat să redimensionați mai întâi, deoarece dacă îl faceți manual sau îl automatizați cu un plugin, este simplu și poate oferi câștiguri uriașe.

Dacă imaginile dvs. sunt deja dimensionate corespunzător pentru site-ul dvs., puteți îmbunătăți performanțele site-ului dvs. cu mult mai mult prin compresie.

Compresează-ți imaginile

Compresia este o modalitate de a reduce dimensiunea fișierului unei imagini fără a-i modifica dimensiunile.

Există două tipuri de compresie de imagini disponibile.

Primul tip de compresie a imaginii se numește compresie „fără pierderi”.

Compresie fără pierderi

Cu o optimizare fără pierderi, imaginea însăși nu este de fapt modificată. Mai degrabă, această tehnică elimină toate metadatele stocate în fișierul imagine. De exemplu, imaginile stochează adesea numele dispozitivului folosit pentru a realiza imaginea, data la care a fost făcută fotografia și uneori chiar și coordonatele GPS ale fotografierii.

Deoarece aceste date sunt de obicei destul de limitate, optimizarea fără pierderi ar putea reduce dimensiunea imaginii dvs. cu 1-5%, dar nu există niciun motiv să nu o utilizați, deoarece nu are impact asupra calității imaginii.

Câștigurile reale provin din optimizarea cu pierderi.

Compresie pierdută

După cum vă așteptați, compresia cu pierderi optimizează imaginea în sine și duce la degradarea calității. Dar iată lucrul …

Algoritmii de compresie sunt atât de buni în aceste zile încât puteți reduce adesea dimensiunea fișierului cu 50-70%, fără nicio diferență vizibilă. Dacă nu sunteți fotograf profesionist și nu aveți nevoie ca imaginile dvs. să fie perfect clare pe monitoarele 4k, nici nu veți observa pierderea calității.

Cum să vă comprimați imaginile

Puteți comprima manual imaginile cu un instrument de genul TinyPNG înainte de a le încărca sau utilizați un plugin pentru a automatiza lucrurile.

ShortPixel este un plugin excelent pentru optimizarea imaginilor de pe site-ul dvs. Le poate optimiza imediat când le încărcați și optimizează în mare masă toate imaginile care există deja în Media Media.

shortpixel

Am recomandat Optimole pentru redimensionarea imaginii și comprimă și imaginile foarte eficient. Încă o dată, nu optimizează originalele stocate în Media Media, ci comprima mai degrabă copiile pe care le servește vizitatorilor..

Puteți găsi mai multe pluginuri de optimizare a imaginii aici.

Cu imaginile redimensionate și comprimate, site-ul dvs. se va încărca mult mai rapid, dar există o ultimă optimizare pentru imaginile pe care le puteți realiza.

Implementați încărcarea leneșă

Încărcarea leneșă este un mod cu adevărat inteligent de a vă optimiza în continuare imaginile.

Să presupunem că aveți o postare pe blog cu 12 imagini. Când cineva vă vizitează site-ul, nu toate aceste imagini vor fi vizibile imediat pe ecranul său. Va trebui să deruleze în jos pentru a se afișa majoritatea. Deci, de ce să încărcați toate cele 12 imediat?

Cu încărcarea leneșă, se încarcă doar imaginile care apar pe ecran. În loc să se încarce 12 imagini, este posibil să se încarce doar 2-3. Apoi, pe măsură ce vizitatorul derulează în josul paginii, imaginile rămase sunt încărcate pe măsură ce intră pe ecran. Acest lucru înseamnă că încărcarea inițială este mult mai rapidă și, din moment ce majoritatea vizitatorilor nu vor defila până la sfârșitul paginii, o mulțime de imagini nu sunt niciodată încărcate, ceea ce vă economisește resurse de valoare.

Acest videoclip are o vizualizare care o explică mai bine dacă doriți o imagine mai clară a modului în care funcționează încărcarea leneșă:

Acum că ați vândut conceptul, iată cum puteți implementa încărcarea leneșă pe site-ul dvs..

Cum se folosește încărcarea leneșă

Încă o dată, această tehnică de optimizare a performanței este adăugată cu ușurință la WordPress cu un plugin.

Dacă sunteți în căutarea unei opțiuni gratuite, încercați Optimole sau a3 Încărcarea leneșă.

Cu Optimole, încărcarea leneșă este activată automat, iar pluginul a3 este ușor de configurat.

În plus, dacă nu te superi să plătești, atunci mergi Racheta WP. Are cache de înaltă performanță și o varietate de alte instrumente de viteză.

Pentru a activa încărcarea leneșă cu WP Rocket, tot ce trebuie să faceți este să rotiți acest comutator:

WP Rocket Media

Nu ar putea fi mai ușor!

Bucurați-vă de încărcarea rapidă a imaginilor

Pentru a rezuma ceea ce tocmai ați învățat …

Imaginile supradimensionate încărcate pe site-ul dvs. sunt extrem de lente. Doar una dintre aceste imagini poate duce site-ul tău la capăt.

Cel mai important lucru pe care îl puteți face pentru a accelera imaginile este să redimensionați imagini prea mari, astfel încât acestea să fie de dimensiuni adecvate pentru site-ul dvs. Puteți face acest lucru manual sau îl puteți automatiza cu Optimole.

În continuare, algoritmii de compresie a imaginii au parcurs și în aceste zile, puteți reduce dimensiunea fișierului unei imagini cu 50-70%, fără a afecta calitatea într-un mod vizibil. Acesta nu este un creier. Utilizați ShortPixel sau Optimole pentru a comprima fiecare imagine de pe site-ul dvs..

În sfârșit, încărcarea leneșă este o modalitate excelentă de a încărca selectiv imaginile. Puteți utiliza Optimole, a3 Lazy Load sau WP Rocket pentru a implementa instantaneu încărcarea leneșă pe site-ul dvs..

Dacă nu ați utilizat niciuna dintre aceste tehnici, site-ul dvs. se va încărca dramatic mai rapid odată implementat. Te va exploda.

Aveți întrebări despre conceptele și tehnicile din acest post? Ai un alt sfat de distribuit? Postați în secțiunea de comentarii de mai jos!

Ați putea dori, de asemenea,

Cum să rezolvați un site WordPress lent și un panou de administrare (permanent)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map