Ghidul suprem pentru optimizarea imaginilor pentru WordPress

1 … 2 … 3 … – clientul dvs. potențial tocmai a închis site-ul dvs. deoarece încă se încarcă. Sună cunoscut? Cred că ai fost acel vizitator nerăbdător și frustrat de multe ori. Știu că am fost. De aceea am alcătuit o listă definitivă de lucruri pe care trebuie să le știți despre optimizarea imaginii. Va fi lung, dar sper că veți găsi că merită citit.

Cuprins

• Conținutul acestui articol în videoclip de 3 min
• Beneficii de optimizare a imaginii
• Formate de imagine
• Redimensionați imaginile înainte de încărcare
  • Plugin WordPress Imsanity pentru redimensionarea automată a imaginilor
• Comprimarea imaginilor
  • Cele mai bune instrumente online pentru compresia imaginilor
    • TinyPNG
    • Optimizilla
    • Compresor
    • ImageOptim
    • ImageMaler
    • Kraken
    • JPEG.io
    • PageSpeed ​​Insights
    • Rezultate pentru Cel mai bun instrument de compresie online
    • Cel mai bun instrument de compresie online pentru JPEG
    • Cel mai bun instrument de compresie online pentru PNG-uri
    • Cel mai bun instrument de compresie a imaginilor online în general
  • Cele mai bune pluginuri WordPress pentru comprimarea imaginilor
    • WP Smush (versiunea gratuită)
    • Comprimați imaginile JPEG și PNG de TinyPNG
    • ShortPixel
    • Imaginează
    • EWWW Image Optimizer (versiunea gratuită)
    • Rezultate pentru cel mai bun plugin WordPress pentru comprimarea imaginilor
    • Cel mai bun plugin WordPress pentru comprimarea fișierelor JPEG
    • Cel mai bun plugin WordPress pentru comprimarea PNG-urilor
    • Cel mai bun plugin WordPress pentru comprimarea imaginilor în general
• Concluzie

Conținutul acestui articol în videoclip de 3 min

Iată o prezentare video foarte rapidă a acestui articol. Recomand totuși să citești, dar doar pentru a te tachina suficient, iată-ne:

Beneficii de optimizare a imaginii

Încă nu sunteți vândut pentru tot chestia cu optimizarea imaginii? Să ne uităm la toate beneficiile pe care le veți obține, dacă remediați acea problemă mică și banală:

• Site-ul dvs. va fi mai rapid
• Scorul dvs. Google PageSpeed ​​va fi mai bun
• Google vă va plăcea mai mult și clasamentul în motoarele dvs. de căutare se va îmbunătăți
• Rata de respingere va fi mai mică și mai mulți vizitatori vă vor vedea pagina
• Veți avea nevoie de mai puțin spațiu de stocare pe serverele dvs. și veți cheltui mai puține resurse pe servere, ceea ce vă va economisi bani
• Veți economisi bani din planul de date mobile pentru dvs. și vizitatorii dvs

Ți-am atras atenția acum, nu? Acum putem începe cu munca adevărată.

Formate de imagine

Optimizarea imaginii începe cu câteva cunoștințe de bază despre formatele de imagine. Cele mai comune două formate de pe internet sunt PNG cu extensia .png și JPEG cu extensia .jpg . Voi folosi JPEG în majoritatea cazurilor, deoarece este cel mai bun format pentru fotografii, imagini cu degrade și imagini cu milioane de culori. Pe de altă parte, PNG este mai bun cu imagini color limitate, cum ar fi logo-uri, și cu imaginile cu transparență.

Următorul exemplu vă va arăta cât de important este să alegeți formatul de imagine potrivit pentru cea mai bună optimizare a imaginii.

Voi salva imaginea noastră child.jpg neoptimizată în ambele formate .jpg și .png . Putem vedea că imaginea child-saved-as-jpeg.jpg are 3,1 MB mare, iar imaginea child-saved-as-png.png este de 4,5 MB. În acest caz, imaginea PNG a devenit cu 45% mai mare decât imaginea JPEG, o diferență care derivă pur și simplu din alegerea unui anumit format de imagine. Nu există o modalitate mai ușoară de a economisi atât de mult spațiu cu atât de puțin efort. Ei bine, poate că există. Să aruncăm o privire la pasul următor.

Redimensionați imaginile înainte de încărcare

Am economisit puțin spațiu prin alegerea formatului de imagine corect în exemplul nostru anterior, dar putem economisi și mai mult spațiu dacă redimensionăm imaginea înainte de a o încărca. Dar cât de mult ar trebui să-l redimensionăm? Depinde foarte mult de lățimea și containerul site-ului dvs.

Pe site-ul nostru ProteusThemes, lățimea maximă pentru imagine este de 1110 px, așa că voi redimensiona imaginea curentă child.jpg , care are 1800 px lățime, la 1110 px în lățime. În acest caz, tocmai am trecut de la 3,1 MB la 1,1 MB, ceea ce reprezintă încă 65% din spațiul economisit și redus .

Sugestie: Puteți redimensiona imaginile direct în Biblioteca dvs. media WordPress. Faceți clic pe Media -> Selectați imaginea -> Editați imaginea și alegeți noi dimensiuni pentru imaginea dvs.:

Plugin WordPress Imsanity pentru redimensionarea automată a imaginilor

Dacă nu doriți să vă gândiți la redimensionarea imaginii sau dacă mulți utilizatori diferiți încarcă imagini pe site-ul dvs., atunci pluginul Imsanity ar trebui să funcționeze perfect pentru dvs. În setările pluginului, puteți alege lățimea sau înălțimea maximă pe care ar trebui să le aibă imaginile și pluginul va redimensiona toate imaginile mai mari la acea dimensiune. De asemenea, puteți selecta funcția de redimensionare în bloc pentru a redimensiona toate imaginile existente. Recomand cu siguranță acest plugin oricui, care are probleme cu redimensionarea fiecărei imagini separat înainte de a o încărca. Puteți descărca gratuit pluginul Imsanity.

Comprimarea imaginilor

Acum că am învățat elementele de bază ale optimizării imaginii, să vedem cum ne putem îmbunătăți jocul. Putem găsi numeroase instrumente online de compresie a imaginii pe internet și chiar pluginuri WordPress , care vor reduce dimensiunea imaginii tale. Dar trebuie să fim atenți aici, unele instrumente nu vor face nicio diferență și unele dintre setări ne vor distruge imaginea și o vor face inutilă. Deci, cum să găsești echilibrul perfect? Nu vă faceți griji, la momentul scrierii acestui articol (iunie 2017, actualizat 2018), am testat toate cele mai populare instrumente/servicii online și plugin-uri WordPress pentru optimizarea imaginii și am făcut o selecție dintre cele mai bune.

Am folosit 3 imagini JPEG diferite și 1 imagine PNG pentru a ne efectua testul.

Toate cele 3 imagini JPEG sunt de la Unsplash, de la autorii Mi Pham, Breather, Denise Chan și Niko Virtanen. Au fost decupate și redimensionate la 1110 x 624 px în scopuri de testare.

Pentru imaginea PNG, am creat propria noastră imagine cu logo-ul ProteusThemes și un model în spate. La fel ca și imaginile de testare JPEG, și aceasta este redimensionată la 1110 x 624 px.

Vom trece acum toate imaginile prin toate instrumentele și pluginurile selectate pentru compresie și vom afla care este cel mai bun pentru tine. Să începem cu instrumentele online.

Cele mai bune instrumente online pentru compresia imaginilor

La momentul redactării acestui articol (iunie 2017, actualizată în 2018), iată o listă completă a celor mai populare instrumente și servicii online pentru compresia imaginilor:

• TinyPNG
• Optimizilla
• Compresor
• ImageOptim
• ImageMaler
• Kraken
• JPEG.io
• PageSpeed ​​Insights

Dacă credeți că un alt instrument merită să fie pe lista respectivă, anunțați-ne, îl vom testa și îl vom adăuga pe listă. Puteți găsi recenziile mele pentru fiecare instrument mai jos, plus evaluarea mea asupra celor mai bune. Dacă nu doriți să citiți despre fiecare instrument în parte, faceți clic aici – Arată-mi câștigătorii!

TinyPNG

TinyPNG a fost unul dintre primele instrumente de compresie a imaginilor pe care le-am folosit și încă îl folosesc uneori. Nu există opțiuni, doar încărcați imaginile și le veți obține comprimate. Cu acest instrument online, puteți încărca în bloc până la 20 de imagini cu dimensiunea de 5 MB.

Optimizilla

Optimizilla este un alt instrument online simplu, dar puternic. Este gratuit de utilizat și are opțiunea de a încărca în bloc până la 20 de imagini. Pentru cel mai bun raport compresie/calitate, lăsăm setarea de calitate la 90, așa cum este implicit. Dacă doriți să împingeți și mai mult compresia, schimbați doar această setare și veți vedea imediat modificări ale calității.

Compresor

Compresorul are potențialul de a deveni unul dintre cele mai bune instrumente pentru compresia imaginii, dar are un mare defect. Momentan, nu există nicio opțiune pentru încărcare în bloc, ceea ce înseamnă că puteți comprima doar o imagine simultan. În afară de asta, este gratuit, ușor de utilizat și cu două opțiuni de comprimare. Folosim opțiunea cu pierderi în testul nostru, deoarece calitatea imaginii rămâne în continuare aceeași după compresie.

ImageOptim

ImageOptim este un instrument cu o mulțime de setări. Puteți alege între 3 opțiuni diferite de calitate și 3 opțiuni diferite de calitate a culorii. Am aflat că cele mai bune rezultate de compresie/calitate sunt cu setările implicite. Setați calitatea la medie și calitatea culorii la automat. Lucrul care m-a deranjat cel mai mult cu ImageOptim , alături de designul puțin învechit, a fost că exportă JPEG chiar dacă încărc PNG-uri . I-am trimis lui Kornel (creatorul ImageOptim) un e-mail despre această problemă și el a rezolvat-o deja.

ImageMaler

La fel ca și în cazul Compressor , ImageSmaller are același defect. Nu există nicio opțiune pentru încărcare în bloc. Cu toate acestea, are una dintre cele mai mari limite de încărcare, cu cei 50 MB. Dacă aveți fișiere mai mari de optimizat, atunci ImageSmaller ar putea fi instrumentul potrivit pentru dvs.

Kraken

Kraken este un instrument premium de compresie a imaginii, cu cel mai bun tablou de bord dintre toate instrumentele pe care le-am testat. Veți găsi o interfață web frumoasă pentru încărcarea imaginilor și o mulțime de setări diferite pentru cele mai bune rezultate. Am folosit setările lor implicite cu pierderi în testul nostru.

JPEG.io

JPEG.io este o versiune gratuită a aceluiași instrument ca Kraken . Are aceleași capacități de compresie, dar așa cum ne spune adresa URL a site-ului web, este doar pentru JPEG.

PageSpeed ​​Insights

Nu te așteptai să-l vezi aici, nu? PageSpeed ​​Insights ne oferă, de asemenea, un .zip de fișiere comprimate atunci când testăm site-ul nostru. Acesta nu este cel mai ușor de utilizat, deoarece va trebui să aveți deja site-ul dvs. online cu toate imaginile și apoi să le înlocuiți cu cele noi comprimate, dar veți obține imaginile comprimate așa cum le dorește Google.

Rezultate pentru Cel mai bun instrument de compresie online

Mai jos veți găsi grafice cu rezultatele tuturor testelor noastre. De asemenea, puteți verifica foaia noastră de calcul detaliată pentru mai multe informații.

Cel mai bun instrument de compresie online pentru JPEG

Majoritatea instrumentelor au comprimat JPEG-urile noastre de testare pentru aproximativ 80% . Să aruncăm o privire la imaginea copilului nostru.jpg . Am început cu o imagine de 3,1 MB și după redimensionare și comprimare imaginea noastră a fost de numai 165 KB, ceea ce înseamnă cu 95% mai mică ca dimensiune . Acum, asta e o diferență! Am reușit să obținem aceleași rezultate cu Compressor și ImageOptim . Deci, se pare că avem doi câștigători aici.

Cel mai bun instrument de compresie online pentru PNG-uri

Pentru testul nostru PNG am obținut o dimensiune redusă în medie cu 50% cu toate instrumentele. Cu toate acestea, Optimizilla a fost puțin mai bună decât restul, cu dimensiunea redusă cu 56% a imaginii noastre pt-logo.png .

Cel mai bun instrument de compresie a imaginilor online în general

Chiar dacă Optimizilla nu ar fi fost cel mai bun instrument de compresie pentru JPEG, l-aș fi recomandat ca fiind cel mai bun instrument de compresie disponibil în prezent online. JPEG-urile comprimate cu 79% sunt încă minunate și le puteți împinge și mai sus, cu o setare simplă de calitate pe pagină. De asemenea, are o opțiune pentru încărcare în bloc, unde Compressor lipsește și încărcare mai fiabilă, decât ImageOptim , unde toate imaginile sunt exportate ca JPEG, chiar dacă PNG-urile se numără printre ele. Din cauza tuturor acestor lucruri, cred că Optimizilla merită titlul de cel mai bun instrument de compresie a imaginilor online.

În continuare, să vedem dacă pluginurile WordPress pot depăși instrumentele online de compresie a imaginilor.

Cele mai bune pluginuri WordPress pentru comprimarea imaginilor

Care este diferența dintre instrumentele de imagine online și pluginurile WordPress? Ei bine, dacă utilizați instrumente de imagine online pentru compresia imaginilor, va trebui totuși să încărcați acele imagini pe site-ul dvs. WordPress și apoi să le utilizați. Dacă preferați să aveți totul într-un singur loc, atunci pluginul WordPress pentru compresia imaginilor ar putea fi calea de urmat. Majoritatea pluginurilor au, de asemenea, o opțiune de optimizare a imaginilor cu încărcarea, astfel încât să puteți activa acea setare și să uitați de orice muncă suplimentară.

Am făcut un nou site WordPress pentru fiecare plugin și am încărcat aceleași 4 imagini de fiecare dată. Pluginurile diferite au setări diferite, așa că căutam echilibrul perfect între compresie și calitatea imaginii.

Am testat următoarele pluginuri:

• WP Smush (versiunea gratuită)
• Comprimați imagini JPEG și PNG de TinyPNG
• ShortPixel
• Imaginează
• EWWW Image Optimizer (versiunea gratuită)

După cum am menționat mai devreme, dacă cunoașteți orice alt plugin pe care ar trebui să-l testăm, anunțați-ne și îl vom adăuga pe listă. Dacă nu doriți să aflați mai multe despre aceste plugin-uri, faceți clic aici – Arată-mi câștigătorii!

WP Smush (versiunea gratuită)

WP Smush este unul dintre cele mai vechi pluginuri pentru compresia imaginilor pe care le cunosc. Are un avantaj frumos față de toate celelalte plugin-uri, deoarece nu este nevoie de înregistrare pentru a utiliza o versiune gratuită. De asemenea, are o opțiune pentru comprimarea automată a imaginilor nou încărcate, așa că odată ce pluginul este setat, puteți uita de el și va face toată munca pentru dvs. în fundal. Din păcate, rezultatele compresiei au fost una dintre cele mai proaste din versiunea gratuită, așa că nu aș recomanda utilizarea acestuia. Ei au declarat pe site-ul lor că versiunea pro se comprimă mult mai bine, așa că o voi testa și pe aceasta în următoarea actualizare a articolului.

Comprimați imaginile JPEG și PNG de TinyPNG

La fel ca instrumentul de compresie online TinyPNG , pluginul WordPress este, de asemenea, foarte simplu. Odată ce parcurgeți înregistrarea, are setări minime și, practic, funcționează de la cutie. Toate imaginile nou încărcate pot fi, de asemenea, comprimate automat, astfel încât să puteți activa pluginul și să uitați de el.

ShortPixel

ShortPixel a fost, personal, una dintre cele mai mari surprize. Nu am auzit niciodată de el înainte de cercetarea mea și am fost cu adevărat impresionat. Cu setări implicite recomandate cu pierderi, are cele mai bune rezultate de compresie între pluginurile WordPress și are, de asemenea, o opțiune lucioasă. Această opțiune este pentru fotografi sau orice alți profesioniști, care au nevoie de imagini de foarte înaltă calitate și nu pot face compromisuri cu pierderea calității.

Imaginează

Imagify este un plugin, realizat de mâinile unor autori celebri de plugin -uri WP Rocket . După înregistrare, veți avea câteva opțiuni clare din care să alegeți. Pentru cea mai bună compresie a rației și calitate a imaginii, alegeți modul agresiv. Un lucru frumos în setări este, de asemenea, opțiunea de a avea un folder separat pentru imaginile originale, în cazul în care ceva nu a mers prost cu compresia. Singurul lucru pe care nu l-am înțeles complet este de ce trebuie să trecem la vizualizarea listă în media pentru a vedea rezultatele compresiei. În afară de asta, Imagify este un plugin foarte frumos și solid.

EWWW Image Optimizer (versiunea gratuită)

EWWW Image Optimizer a fost singurul plugin, care mi-a dat câteva erori. În primul rând, l-am încercat pe propria găzduire și am primit o eroare, că EWWW Image Optimizer necesită cheia exec() sau API. Data viitoare când am încercat pluginul pe site-ul meu WordPress de dezvoltare locală și am primit o eroare că îmi lipsește pngout. Am urmat instrucțiunile despre cum să-l instalez și pluginul a fost în sfârșit gata pentru testare. De când am testat versiunea gratuită, a existat doar o opțiune fără pierderi, care nu a condus la cele mai bune rezultate. La fel ca și cu WP Smush, voi testa și versiunea pro EWWW Image Optimizer în următoarea actualizare a articolului și vom vedea dacă va funcționa mai bine.

Rezultate pentru cel mai bun plugin WordPress pentru comprimarea imaginilor

La fel ca înainte, veți găsi mai jos grafice cu rezultatele tuturor testelor noastre. De asemenea, puteți verifica foaia noastră de calcul detaliată pentru mai multe informații.

Cel mai bun plugin WordPress pentru comprimarea fișierelor JPEG

ShortPixel a fost câștigătorul, cu o medie de compresie de 84% . La fel ca Compressor și ImageOptim în categoria pentru cel mai bun instrument de compresie online. Al doilea cel mai bun plugin a fost Imagify , cu o medie de compresie de 70% . Declar că ShortPixel este în prezent câștigătorul absolut al acelei categorii.

Cel mai bun plugin WordPress pentru comprimarea PNG-urilor

Cel mai bun plugin de compresie PNG se numește Comprimare imagini JPEG și PNG de TinyPNG , cu o compresie de 56% . Interesant este că cel mai bun rezultat este, din nou, același ca în categoria pentru cel mai bun instrument de compresie online. Cu toate acestea, alte plugin-uri au fost puțin mai competitive aici, cu o compresie de aproximativ 50% .

Cel mai bun plugin WordPress pentru comprimarea imaginilor în general

În opinia mea, cel mai bun raport între experiența utilizatorului, setări diferite și compresie, a fost de la pluginul ShortPixel . În general, este un plugin foarte solid, cu multe opțiuni, dar și cu setări implicite deja excelente. Puteți începe să utilizați pluginul imediat după înregistrare și, cel mai important, compresia este excelentă. Momentan, aș merge cu pluginul ShortPixel pentru propriul site web, mai ales dacă majoritatea imaginilor sunt JPEG.

Concluzie

A fost o călătorie lungă, nu? Între timp, am reușit să ne comprimăm imaginea child.jpg până la 95% . Site-ul dvs. poate funcționa mult mai repede, dacă urmați doar acești 3 pași simpli . Să le repetăm ​​din nou:

• Selectați formatul corect de imagine
• Redimensionați imaginea înainte de încărcare
• Comprimați imaginea cu instrumentele online sau cu pluginurile WordPress

Un alt lucru important este că utilizați un singur instrument sau un plugin WordPress pentru fiecare imagine, deoarece majoritatea dintre ele au un fel de compresie cu pierderi, ceea ce înseamnă că calitatea imaginii dvs. s-ar putea înrăutăți cu fiecare compresie suplimentară și asta este ceva pe care îl facem. nu vreau. De asemenea, am adăugat toate imaginile de testare pe GitHub dacă doriți să verificați comparația calității între ele sau să testați singur alte instrumente și pluginuri.

Nu ar trebui să mai ai scuze pentru a nu comprima imaginile. Există multe instrumente și moduri diferite de a face acest lucru și am dovedit că, în cele din urmă, merită. Alege-ți propriul câștigător personal pentru compresia online sau pluginul WordPress și verifică site-ul tău scorul Google PageSpeed ​​înainte și după optimizare. Distribuiți informațiile despre viteza site-ului dvs. și îmbunătățirea scorului în secțiunea noastră de comentarii. As vrea sa stiu si daca acest articol v-a ajutat cu optimizarea imaginii si ce parere aveti despre aceasta.