Cum să vă optimizați imaginile pentru WordPress

Există multe motive pentru care ați (și ar trebui) să includeți imagini în conținutul dvs. WordPress. Imaginile vă ajută să mențineți cititorii implicați. Sunt, de asemenea, o modalitate de a descompune bucăți lungi de conținut și de a îmbunătăți optimizarea pentru motoarele de căutare (SEO). Cu toate acestea, ele pot încetini și site-ul dvs.

Din fericire, există destul de multe resurse disponibile care vă pot ajuta să vă optimizați imaginile. Aceasta înseamnă că veți avea mai multe șanse să depășiți vitezele mici ale paginilor, care pot fi dăunătoare succesului general al site-ului dvs.

În acest articol, vom analiza de ce imaginile mari ar putea trage site-ul în jos. Apoi vom explora cum să comprimați eficient fișierele media, împreună cu câteva sfaturi fundamentale de optimizare a imaginii care pot îmbunătăți SEO-ul site-ului dvs.

De ce ar trebui să vă optimizați imaginile pentru WordPress

Imaginile sunt o piesă valoroasă și importantă a oricărei strategii de conținut. Cu toate acestea, ele pot fi, de asemenea, una dintre principalele cauze ale timpilor lenți de încărcare a paginii.

Un site web lent este o problemă, deoarece poate alunga utilizatorii. De fapt, paginile care durează cinci secunde sau mai mult pentru a se încărca văd, în medie, o creștere cu 90 la sută a probabilității ca un utilizator să renunțe (plecare după ce a vizualizat o singură pagină).

Deși există mai mulți factori care vă pot încetini site-ul, imaginile și fișierele media ocupă 63% din lățimea de bandă a site-urilor web moderne. În consecință, este important să optimizați imaginile pe care le încărcați pe site-ul dvs.

De asemenea, merită remarcat faptul că viteza site-ului este un factor de clasare Google. Aceasta înseamnă că cât de repede sau de încet se încarcă pagina dvs. va dicta, într-o oarecare măsură, cât de bine se va clasa în rezultatele căutării. Există mulți factori care vă influențează PageRank, iar imaginile se încadrează în categoria „Utilitatea paginilor web”.

Optimizarea imaginii înseamnă de fapt îmbunătățirea a două lucruri:

• Numărul de octeți utilizați pentru a codifica fiecare pixel al imaginii
• Numărul total de pixeli utilizați.

Cu alte cuvinte, optimizarea înseamnă că obțineți cea mai bună calitate posibilă din cei mai puțini pixeli și octeți. Acest lucru reduce dimensiunea fișierelor dvs. media și poate avea un impact semnificativ asupra vitezei site-ului dvs. în general.

Optimizați-vă imaginile înainte de a le încărca pe WordPress

În cele din urmă, cel mai bun scenariu pentru site-ul dvs. web este să vă optimizați imaginile înainte de a le încărca. Acest lucru este astfel încât să nu ajungeți cu duplicate sau versiuni multiple ale unei imagini. Acest lucru ar învinge scopul de a ușura încărcarea site-ului dvs. prin optimizarea imaginii.

Având în vedere acest lucru, să analizăm câteva dintre considerentele pe care va trebui să le luați atunci când decideți cum să optimizați media site-ului dvs.

Formate de fișiere imagine

Pentru a începe, să aruncăm o privire asupra diferitelor tipuri de formate de imagine care există. Înțelegerea modului în care fiecare dintre ele este diferită și când este cel mai bine să le utilizați vă poate ajuta să dezvoltați o utilizare mai eficientă a imaginilor.

Cele mai frecvente două formate de imagine utilizate online sunt JPEG și PNG. Ambele formate sunt formate din pixeli. Pixelii se întind atunci când modificați dimensiunea unei imagini, ceea ce uneori o poate face neclară. Cu toate acestea, aceste tipuri de imagini au puncte forte și puncte slabe diferite.

Când să folosiți JPEG

Fișierele JPEG sunt o alegere bună atât pentru conținut tipărit, cât și pentru conținut web. Acest tip de fișier imagine utilizează ceea ce se numește format „cu pierderi”. Când o imagine mai mare este convertită într-un JPEG, o parte din informațiile conținute în fișierul acesteia se pierde.

Aceste informații nu sunt necesare pentru simpla afișare a imaginii. Cu toate acestea, ceea ce înseamnă este că conversia într-un JPEG are ca rezultat o dimensiune mai mică a fișierului, dar poate exista unele sacrificii în calitatea generală a imaginii. Din fericire, reducerea calității nu este prea vizibilă, mai ales pentru imaginile mai mici.

Când să folosiți PNG-urile

Fișierele PNG sunt utile și pentru conținutul web, la fel ca JPEG, dar într-un mod diferit. Deoarece PNG-urile pot avea fundaluri transparente, de exemplu, sunt mai versatile și mai la îndemână pentru proiectarea grafică web.

PNG-urile folosesc un format de fișier „fără pierderi”. Aceasta înseamnă că toate informațiile despre imagine sunt reținute atunci când fișierul este comprimat. Ca urmare, acestea tind să fie de o calitate superioară, dar oferă o îmbunătățire mai mică a dimensiunilor fișierelor și a vitezei de pagină. Sunt o opțiune bună pentru grafică și pictograme și pentru imagini de foarte înaltă calitate.

Marimea imaginii

Este timpul să tăiați balonarea. Furnizarea de imagini la scară este una dintre cele mai simple și mai eficiente moduri de a vă optimiza imaginile. De ce atât de eficient? Scalarea imaginii va asigura că nu trimiteți mai mulți pixeli decât este necesar pentru a afișa materialul la dimensiunea dorită în browser.

Multe site-uri încearcă să livreze imagini mari, nescalate și se bazează pe browser pentru a le redimensiona, ceea ce duce la utilizarea de resurse suplimentare și la o viteză mai mică a site-ului. Dacă dimensiunea naturală a imaginii este de 820×820 pixeli și este afișată de browser ca 400×400 pixeli... înseamnă 32.400 pixeli inutili!

Claritatea și viteza cu care se încarcă o pagină au foarte mult de-a face cu dispozitivul pe care este afișată imaginea (mobil, desktop, etc). De exemplu, o imagine 4k poate arăta bine pe monitorul dvs. de 27 inchi.

Cu toate acestea, atunci când un vizitator încarcă o pagină cu acea imagine, browserul va reda mai întâi fișierul la rezoluția maximă, apoi îl va reduce pentru a se potrivi pe ecranul său. Dacă folosesc un dispozitiv mobil care nu poate avea mai mult de 400 de pixeli, probabil că vor pierde conținutul dvs.

Având în vedere acest lucru, unele dintre cele mai bune practici atunci când exportați imaginile dvs. includ:

• Păstrați dimensiunile fișierelor imaginii dvs. sub câteva sute de kiloocteți, salvându-le ca JPEG sau PNG „optimizate pentru web”.
• Standardul web pentru imagini este de 72 de puncte pe inch (dpi), care poate fi realizat prin salvarea imaginilor în formatul prescris mai sus.

Puteți utiliza Photoshop, Lightroom sau un editor similar pentru a reduce dimensiunea imaginii la aproximativ 1.500 de pixeli sau mai puțin în lățime. În Photoshop, pur și simplu accesați Imagine > Dimensiunea imaginii pentru a ajusta manual dimensiunile și rezoluția imaginii. De asemenea, puteți accesa Fișier > Export > Salvare pentru web pentru a optimiza imaginile pentru încărcare web:

Dacă nu doriți să afișați fotografii clare și vii pe un monitor mai mare, puteți reduce imaginea și mai mult.

Dacă lucrați cu Lightroom, accesați Fișier > Export pentru a ajusta manual dimensiunea imaginii la export:

Dimensiunea și rezoluția imaginii sunt doar o parte a puzzle-ului. Când vine vorba de optimizarea imaginilor, veți dori, de asemenea, să înțelegeți compresia și să o utilizați eficient.

Compresia imaginii

Pe scurt, compresia imaginii este o modalitate de a minimiza dimensiunea (în octeți) a unui fișier grafic, fără a degrada calitatea imaginii la un nivel inacceptabil. După cum am discutat, imaginile de înaltă rezoluție care sunt inutil de mari în dimensiunea fișierului pot afecta dramatic viteza paginii.

Pe de altă parte, imaginile optimizate sunt în medie cu 40 la sută mai ușoare decât imaginile neoptimizate. Ca regulă generală, veți dori să optimizați toate imaginile și alte conținuturi media pe care le încărcați pe site-ul dvs. web, fie înainte, fie în timpul procesului de încărcare.

Compresie cu pierderi vs fără pierderi

După cum am menționat mai devreme, JPEG și PNG-urile folosesc două tipuri diferite de compresie a imaginii. Compresia fără pierderi păstrează toate datele din fișierul original, fără a sacrifica calitatea.

Cu o compresie fără pierderi, de obicei spargeți un fișier într-o formă „mai mică” pentru transmisie sau stocare. Apoi informațiile sunt puse la loc la celălalt capăt, astfel încât să poată fi utilizate din nou.

Pe de altă parte, compresia cu pierderi elimină unele dintre datele conținute în fișierul imagine. Acest lucru poate duce la o scădere mai mare a calității, dar și o îmbunătățire mai semnificativă a vitezei paginii. Puteți chiar personaliza cantitatea de compresie, pentru a obține un echilibru între calitate și performanță.

Pluginuri de compresie a imaginii

Imaginile încărcate rapid înseamnă un site mai rapid și un SEO mai bun. Iată câteva pluginuri de optimizare a imaginii care vă vor ajuta cu compresia imaginii.

Comprimarea și optimizarea imaginii Smush

Pluginul de compresie a imaginilor de la Smush funcționează pentru a redimensiona, optimiza și comprima toate imaginile dvs. pentru web, astfel încât acestea să se încarce mai repede decât înainte. Dacă site-ul dvs. este bogat în fotografii, atunci acest plugin este un must-have.

ShortPixel Image Optimizer

Pluginul Optimizator de imagini de la ShortPixel comprimă toate imaginile și fișierele PDF din trecut și viitoare încărcate în biblioteca dvs. media. Pluginul oferă atât compresie cu pierderi, cât și fără pierderi pentru majoritatea tipurilor de fișiere. Dacă sunteți fotograf, ați putea opta pentru compresia JPEG lucioasă, care utilizează un algoritm de optimizare cu pierderi de înaltă calitate.

Comprimați imaginile JPEG și PNG

Doriți să optimizați doar fișierele JPEG și PNG? Acest plugin folosește serviciile de compresie a imaginilor TinyJPG și TinyPNG pentru a vă ajuta cu compresia imaginii. În medie, imaginile JPEG sunt comprimate cu 40-60%, iar imaginile PNG cu 50-80%, fără o pierdere vizibilă a calității.

EWWW Image Optimizer

EWWW Image Optimizer are o activitate dublă. Atât optimizează imaginile existente pe site-ul dvs., cât și se ocupă și de cele noi pe care le încărcați. În plus, vă oferă mult control asupra modului în care (și cât de mult) sunt comprimate imaginile dvs.

Optimizator de imagine Kraken.io

Nu în ultimul rând, Kraken.io Image Optimizer este, de asemenea, la îndemână pentru optimizarea conținutului media nou și existent. Acceptă compresia fără pierderi și „inteligentă” cu pierderi, facilitând obținerea de imagini de înaltă calitate cu fișiere de dimensiuni mai mici.

Imagine prezentată

Imaginea prezentată nu este inserată în corpul unei postări WordPress, ci este utilizată structural pe întreaga temă. Poate apărea ca o miniatură lângă titlul postării, de exemplu, sau în antet atunci când vizualizați o anumită postare.

Cele mai multe teme și widget-uri se bazează pe imaginile prezentate, așa că nu este ceva la care veți dori să omiteți. Imaginile prezentate permit o personalizare mai mare; veți avea posibilitatea de a afișa imagini de antet personalizate unice pentru anumite postări și pagini sau de a seta miniaturi pentru caracteristici speciale ale temei dvs.

Odată ce v-ați hotărât asupra dimensiunii pe care doriți să fie imaginea prezentată, acea dimensiune va rămâne setată pentru toate imaginile prezentate viitoare. Dimensiunea pe care ar trebui să o selectați depinde de tema site-ului dvs. WordPress și de aspectul postărilor dvs.

Imaginile prezentate sunt de obicei mai largi decât atunci sunt înalte, variind oriunde între 500 și 900 de pixeli lățime. De asemenea, cel mai bine este să alegeți o imagine de înaltă rezoluție și nu una pixelată.

Sfat: pentru a controla conținutul media care este afișat ori de câte ori o postare sau o pagină este partajată pe Facebook sau Twitter, instalați pluginul Yoast SEO. Nu numai că veți putea personaliza titlul și descrierea, ci și să încărcați dimensiunile corecte ale imaginii pentru fiecare canal social.

Optimizați-vă imaginile după încărcare pe WordPress

Vă recomandăm să vă optimizați imaginile înainte de a le încărca. Cu toate acestea, dacă acest lucru nu este posibil sau dacă doriți să optimizați imaginile care sunt deja pe site-ul dvs., puteți face asta. Există câteva metode care vă pot ajuta să vă optimizați conținutul live.

Imagini de încărcare lenenă

În mod normal, când cineva vizitează o pagină web, tot conținutul acesteia începe să se încarce. Aceasta înseamnă că, pentru o pagină cu conținut greoi, poate dura ceva timp pentru ca totul să apară.

„Încărcarea leneră” implică modificarea modului în care site-ul dvs. încarcă conținut. Îți indică site-ul să se concentreze pe prima încărcare a textului, imaginilor și a altor elemente care sunt vizibile imediat. Abia după aceea va începe să se încarce conținut care este accesibil doar prin derularea în jos a paginii. Aceasta este o modalitate excelentă de a vă accelera site-ul și de a îmbunătăți experiența vizitatorilor.

Cel mai simplu mod de a adăuga încărcare leneră pe site-ul dvs. este printr-un plugin precum Lazy Load.

Acesta este un instrument de la WP Rocket care ajută la reducerea volumului de solicitări trimise simultan către serverul web al site-ului dvs. Înlocuiește chiar și imaginile de substituent pentru videoclipurile de pe YouTube, astfel încât videoclipul real se va încărca numai după cum este necesar.

Cache imagini

O altă modalitate de a îmbunătăți viteza pe site-ul dvs. este prin „caching”. Aceasta implică salvarea unora dintre datele site-ului dvs. într-un loc care este mai ușor și mai rapid de accesat pentru un vizitator, deseori fie pe un server terță parte mai aproape de locul în care se află, fie în browserul său.

Există o mulțime de moduri de a realiza memorarea în cache prin codificare, pluginuri și alte instrumente. Aici, la WP Engine, implementăm implicit memorarea în cache pe toate site-urile noastre. Acest lucru este benefic pentru reducerea impactului pe care îl are întregul conținut asupra vitezei paginii, nu doar asupra imaginilor.

Eliminați datele EXIF

Datele EXIF ​​sunt stocate ca parte a unui fișier imagine și conțin informații despre locul și cum a fost făcută o fotografie. Este adăugat automat imaginilor de către camere și, în general, nu este necesar pentru fișierele dvs. web.

Prin urmare, eliminarea acestor date din imaginile dvs. vă poate accelera paginile, deși impactul nu este probabil să fie mare. În prezent, nu există pluginuri actualizate care să vă ajute să faceți acest lucru, din păcate. Deci, dacă folosiți multe fotografii pe site-ul dvs. și vă îngrijorează datele EXIF, veți dori să contactați un dezvoltator pentru ajutor.

Evitați redirecționările URL ale imaginilor

În cele din urmă, un alt element care vă poate încetini paginile este atunci când imaginile dvs. provoacă redirecționări. Acest lucru se întâmplă cel mai frecvent atunci când se conectează în altă parte.

Din acest motiv, ar trebui să evitați încorporarea imaginilor din surse externe pe site-ul dvs. În schimb, salvați și încărcați fiecare imagine sau bucată de conținut media direct pe site-ul dvs., dacă este posibil. De asemenea, vă recomandăm să vă asigurați că imaginile dvs. nu trimit la nimic, cum ar fi o pagină media separată.

Optimizarea imaginilor pentru motoarele de căutare

Formatarea titlurilor imaginilor este un alt pas important în optimizarea imaginii. Aceasta înseamnă că numele fișierului imagine este relevant pentru conținutul său. Când faceți acest lucru, este mai probabil ca acestea să apară în rezultatele căutării de imagini asociate prin intermediul motoarelor de căutare.

Acest lucru va crește vizibilitatea și accesibilitatea mărcii dvs., precum și traficul către site-ul dvs., prin afișarea mai frecventă a imaginilor site-ului dvs. în căutările de imagini Google. Optimizarea imaginii necesită foarte puțin timp și poate face o diferență enormă în traficul site-ului dvs.

Iată câteva sfaturi suplimentare pentru a vă ajuta imaginile să se claseze mai sus.

Alt text

Textul alternativ, altfel cunoscut ca „text alternativ” sau „etichetă alt”, este un atribut adăugat unei imagini în HTML. Textul alternativ ajută motoarele de căutare să înțeleagă despre ce este imaginea ta, descriind ce include și care este scopul ei.

Google se bazează pe text alternativ pentru a determina ce este o imagine, deoarece tot ceea ce „vede” este ceea ce este în eticheta HTML. Atunci când utilizați text alternativ puternic și descriptiv pentru imaginile dvs., este mai probabil să vedeți site-ul dvs. listat corespunzător în rezultatele căutării.

În WordPress, puteți adăuga text alternativ imaginilor dvs. în două moduri. În primul rând, îl puteți adăuga la imaginile care au fost plasate în postări, făcând clic pe imagine și utilizând opțiunea Setări imagine din partea dreaptă a ecranului.

De asemenea, puteți adăuga text alternativ la o imagine vizitând Media > Bibliotecă și alegând imaginea dorită. Apoi, pur și simplu adăugați textul dvs. alternativ în câmpul Text alternativ pentru imaginea respectivă.

Etichete de titlu

Etichetele de titlu sunt similare cu etichetele alt, dar sunt pentru cititori umani, nu pentru roboții motoarelor de căutare. O bună optimizare a etichetei de titlu poate ajuta utilizatorii cu deficiențe de vedere să vă acceseze site-ul web.

Creați sitemap-uri cu imagini XML

O altă modalitate de a vă observa imaginile de către Google este să creați un sitemap și să îl trimiteți. Aceasta este o opțiune bună pentru imaginile care nu pot fi accesate cu crawlere de motoarele de căutare.

Vorbim de imagini încărcate de JavaScript, de exemplu. Sitemaps-urile oferă motoarelor de căutare mai multe informații despre imaginile disponibile pe site-ul dvs., astfel încât acestea să poată înțelege și indexa conținutul dvs. mai precis.

În WordPress, următoarele plugin-uri vă pot ajuta să creați un sitemap:

• Google XML Sitemaps
• Yoast SEO
• Pachet SEO All-in-One
• Udinra All Image Sitemap

Pentru site-urile web non-WordPress, există și instrumente care pot ajuta la crearea unei hărți de site, inclusiv Screaming Frog, Dynomapper și multe altele. După ce ați creat un sitemap, veți dori să îl trimiteți prin instrumentele Google pentru webmasteri.

Plasarea imaginilor și legendele

Nu în ultimul rând, să ne uităm la plasarea elementelor vizuale într-o postare de blog sau o pagină web. Acolo unde vă puneți imaginile într-o postare poate avea un impact semnificativ asupra modului în care se clasează pe Google.

De exemplu, dacă plasați o imagine mai aproape de expresiile dvs. cheie, este probabil ca aceasta să se claseze mai bine. De asemenea, rețineți că adăugarea unei subtitrări bogate în cuvinte cheie la imaginea dvs. contează drept text de căutare și poate ajuta la un SEO mai bun pentru imagini.

Optimizați-vă site-ul WordPress cu WP Engine

Optimizarea imaginii acoperă o mulțime de teren atunci când vine vorba de îmbunătățirea site-ului dvs. Optimizarea poate ajuta la creșterea experienței utilizatorilor și la menținerea timpilor de încărcare sub acel marcaj de cinci secunde. Aici, la WP Engine, înțelegem valoarea pe care optimizarea imaginii o aduce site-ului dvs. De aceea oferim medii de găzduire WordPress gestionate specializate. Aceasta înseamnă că veți avea la îndemână asistență de specialitate și instrumente și resurse complete de optimizare!