Cum să optimizați imaginile pentru WordPress [Ghid final]

Dacă ai un site WordPress, ești conștient de dificultățile de a-l menține. Uneori s-ar putea să petreci ore întregi cu ceva care ar trebui să dureze doar câteva minute pentru a fi realizat. Acest lucru se poate întâmpla dacă site-ul dvs. este lent și umflat din cauza imaginilor prea mari sau prost optimizate.

În plus, utilizarea tehnicilor de optimizare pentru motoarele de căutare va ajuta vizitatorii să vă găsească și să-i păstreze pe site-ul dvs. Optimizarea imaginilor pentru web este una dintre aceste practici.

Luați în considerare fiecare pixel ca o zonă posibilă de optimizare ori de câte ori proiectați sau editați o imagine. Este nevoie de timp și efort pentru a considera pixelii ca piese individuale, dar merită efortul.

Cu toate acestea, există mai multe moduri de a optimiza imaginile în WordPress. Amintiți-vă că scopul este de a reduce dimensiunea fișierului fără a compromite calitatea imaginii.

Această postare vă va învăța cum să vă optimizați imaginile WordPress și să eliberați mai mult timp pentru alte activități.

Ce este Optimizarea imaginii?

Este un proces de reducere a dimensiunii fișierului unei imagini fără a afecta calitatea acesteia și aplicarea unor tehnici adecvate de SEO pentru imagini. Imaginile optimizate sunt mai ușor de stocat pe un hard disk sau de încărcat pe Internet. În plus, are mai puține probleme potențiale din cauza vitezei reduse de descărcare.

Dimensiunea imaginilor dvs. are un impact semnificativ asupra timpului de încărcare a site-ului dvs. În general, cu cât imaginea este mai mare, cu atât va dura mai mult până când browserul vizitatorului se încarcă. Poate fi frustrant pentru vizitatorii dvs. și îi poate determina să părăsească site-ul dvs.

Ar trebui să urmați câteva sfaturi esențiale de optimizare pentru a vă asigura că imaginile sunt optimizate pentru performanță.

Beneficiile optimizării imaginii

Pentru a deveni un webmaster de succes, trebuie să înțelegeți cum funcționează imaginile pe un site web. De asemenea, vi se poate cere să optimizați unele imagini din când în când.

Beneficiile optimizării imaginii sunt:

• Timpi mai rapid de încărcare a paginii: imaginile optimizate se încarcă rapid, transformându-se într-un site cu încărcare mai rapidă. Acest lucru este important în special pentru utilizatorii de telefonie mobilă, care au șanse mai mari să abandoneze un site web care durează prea mult să se încarce.
• Clasament SEO îmbunătățit: imaginile optimizate ajută, de asemenea, clasamentul SEO al site-ului dvs. Google folosește viteza de încărcare a paginii dvs. ca factor de clasare, astfel încât optimizarea imaginilor vă poate ajuta să vă poziționați mai sus în rezultatele căutării.
• Utilizare redusă a lățimii de bandă: imaginile optimizate folosesc mai puțină lățime de bandă, ceea ce vă poate economisi bani la factura de găzduire.
• Experiență îmbunătățită a utilizatorului: un site web bine optimizat oferă o experiență mai bună pentru utilizator, cu încărcări mai rapide ale paginilor și performanțe mai bune ale motorului de căutare.
• Reducerea timpilor de descărcare pe dispozitive mobile: imaginile optimizate pot ajuta, de asemenea, să faceți site-ul dvs. prietenos pentru dispozitive mobile, crucial pentru clasarea Google în căutările mobile.
• Satisfacția clienților: o experiență mai bună a utilizatorului crește satisfacția clienților, ceea ce duce la vânzări mai mari și la mai mulți clienți repetați.

14 lucruri esențiale pentru optimizarea imaginilor pentru web

Cel mai bine ar fi să luați în considerare mulți factori atunci când optimizați o imagine pentru utilizarea web. Există multe tipuri diferite de fișiere și mai multe moduri diferite de a le optimiza. Următoarele sunt câteva lucruri de luat în considerare atunci când optimizați imaginile pentru web.

Calitate vs dimensiune:

Calitatea unei imagini este întotdeauna importantă, dar ar trebui să luați în considerare și dimensiunea fișierului atunci când vine vorba de optimizare pentru utilizarea web. Cel mai bine ar fi să păstrați dimensiunea fișierului imaginilor dvs. cât mai mică posibil, fără a sacrifica calitatea pentru a accelera timpul de încărcare pe paginile web.

Rezoluția standard pentru imaginile de pe web este de 72 DPI (Dots Per Inch). Prin urmare, este recomandat să salvați imaginile ca JPG, mai degrabă decât PNG, deoarece acest tip de fișier este mai mic.

În plus, cel mai bine ar fi să utilizați cea mai mică adâncime posibilă de culoare fără a compromite calitatea imaginii. Adâncimea standard de culoare este de 24 de biți , care poate fi modificată în proprietățile fișierului.

Format fișier imagine:

Pentru a determina ce format de imagine să alegeți, este necesar să înțelegeți diferitele imagini și scopurile acestora. Ar trebui să salvați fișierul ca JPG , dar când optimizați imaginile pentru web, alegeți PNG-8 sau PNG-24.

În general, fișierele PNG sunt cele mai bune pentru imagini cu multe culori și fundaluri transparente, în timp ce fișierele JPEG sunt cele mai bune pentru imagini cu multe detalii.

Prin urmare, ar trebui să utilizați formatul PNG pentru imagini cu fundal transparent și JPEG pentru imagini cu multe detalii pentru a optimiza fișierele de imagine pentru web.

Dimensiunea și dimensiunile fișierului:

Când optimizați o imagine pentru web, doi factori principali de luat în considerare sunt dimensiunea fișierului și dimensiunile. Este mai bine să experimentați cu unul dintre acești factori înainte de a-l schimba pe celălalt, astfel încât să puteți vedea ce vă ajută obiectivul de a avea o dimensiune mai mică a fișierului sau o imagine mai mare.

Fișierele de imagine mari pot face ca un site să ruleze lent , așa că este necesar să redimensionați imaginile înainte de a le încărca. Dimensiunile recomandate pentru imaginile de pe o pagină web sunt 600-800 pixeli lățime și 500-600 pixeli înălțime.

Orice mai semnificativă decât aceasta va cauza cel mai probabil ca imaginea să fie redimensionată de către browser, rezultând o pierdere a calității.

Rank Math este perfect pentru ajustarea automată a rezoluției imaginilor dvs. Va adăuga dimensiunile imaginii pentru dvs., astfel încât să nu vă faceți griji cu privire la dimensiunile acesteia.

Îmbunătățiți SEO pentru imagini:

Fiecare imagine pe care o încărcați pe site-ul dvs. ar trebui să servească drept sursă de informații pentru motoarele de căutare. Fișierele imagine cu mai multe detalii sunt mai bune pentru optimizarea motorului de căutare.

Cele mai convingătoare practici SEO pentru imagini sunt:

• Optimizați textul titlului imaginii: atunci când salvați imaginile, asigurați-vă că le oferiți titluri informative. Va apărea ca un sfat explicativ atunci când cursorul trece peste imagine. Mai mult, este benefic ca motoarele de căutare să învețe imaginea.
• Utilizați etichete Alt: motoarele de căutare folosesc și etichete alt atunci când indexează imaginile. Textul etichetei alt ar trebui să fie adaptat pentru fiecare imagine și să descrie ceea ce este în imagine cât mai precis posibil.
• Utilizați nume adecvate de fișiere de imagine: dacă este posibil, numele fișierelor dvs. de imagine ar trebui să fie, de asemenea, descriptive și să includă cuvinte cheie. Când lucrați cu un software de editare a imaginilor, salvați imaginile cu un nume de fișier descriptiv.

Notă - Dacă utilizați pluginul WordPress Rank Math, imaginile dvs. vor fi optimizate pentru SEO, iar numele fișierului imaginilor și eticheta alt vor include automat cuvinte cheie.

Compresie adecvată:

Acesta este un alt factor cheie de luat în considerare atunci când vă optimizați imaginile. Ar trebui să comprimați cât mai mult posibil imaginile înainte de a le încărca pe server.

Pentru a face acest lucru, trebuie să utilizați un instrument de compresie, cum ar fi Photoshop sau GIMP. Alternativ, puteți utiliza instrumente gratuite, cum ar fi TinyJPG și ImageOptim . Este întotdeauna recomandat să aveți imagini comprimate pe site-ul dvs. pentru a accelera timpul de încărcare.

Alternativ, puteți utiliza un plugin precum ShortPixel sau WP-Optimize pentru a vă comprima automat imaginile pe măsură ce sunt încărcate pe site-ul dvs. web. Aceste plugin-uri sunt recomandate oricui caută să optimizeze imaginile de pe site-ul lor.

Ar trebui să țineți cont de următoarele fapte atunci când comprimați imagini:

• Cu pierdere : compresia cu pierdere este un tip de compresie care elimină unele date dintr-o imagine pentru a face fișierul mai mic. Acest tip de compresie este adesea folosit pentru imagini care nu vor avea nicio pierdere vizibilă de calitate.
• Lossless : o compresie lossless este o formă de compresie care elimină unele informații redundante fără a reduce calitatea conținutului. Acest tip de compresie este adesea folosit pentru imaginile care trebuie să-și păstreze calitatea după comprimare, cum ar fi imaginile JPEG fără pierderi.

Puteți afla mai multe detalii despre compresia fără pierderi de anunțuri de pe blogul lui ShortPixel.

Serviți imagini în formate de generație următoare:

În mod implicit, browserele vor încerca să încarce imagini în același format în care au fost salvate. De exemplu, o imagine JPEG este încărcată atunci când adresa URL conține .jpg. Cu toate acestea, puteți forța browserele să încarce un alt format de imagine folosind extensia de fișier corectă.

De exemplu, dacă aveți o imagine JPEG, puteți schimba extensia în .png, iar browserul va încărca acea imagine.

Puteți face acest lucru utilizând pluginul WordPress JPG în PNG. Cu acest plugin, veți converti automat toate imaginile dvs. JPG în fișiere PNG. Puteți urma un ghid despre cum să convertiți imagini PNG în JPG în WordPress.

Puteți găsi cu ușurință imagini de servire în formatul de nouă generație folosind GtMatrix sau instrumentul de analiză a vitezei paginii Google.

Notă - În general, este înțelept să salvați imaginile ca ambele tipuri de fișiere pentru a fi vizualizate de browsere care recunosc diferite extensii de fișiere. Procedând astfel, dacă un fișier nu se încarcă, puteți înlocui JPEG rupt cu un PNG fără a fi nevoie să încărcați din nou imaginea.

Combinați imagini folosind sprite-uri CSS:

Combinația de imagini a fost realizată în mod tradițional folosind un software de editare a imaginilor. Cu toate acestea, acum s-a descoperit că metoda sprites CSS ar putea fi folosită și pentru a combina imagini.

Procesul implică crearea unei imagini goale și încărcarea imaginilor pe care doriți să le combinați în ea în diferite poziții. Apoi, folosind CSS, fiecare dintre aceste imagini individuale poate fi poziționată pe aceeași zonă a noii imagini.

Prin urmare, browserul poate descărca un singur fișier imagine, mai degrabă decât mai multe imagini. Acest lucru este deosebit de important pentru dispozitivele mobile, deoarece acestea au de obicei conexiuni la internet mai lente. Puteți face acest lucru cu un generator de sprite CSS.

Dezactivați legătura directă imagini:

Conectarea unei imagini implică faptul că oricine vă poate lua imaginile și le poate publica pe site-ul său web. Ca urmare, veți experimenta o pierdere enervantă a lățimii de bandă, deoarece imaginile vor fi descărcate de pe serverul dvs. pe alt server. Puteți preveni acest lucru utilizând protecția prin legături rapide pentru imaginile dvs.

Puteți configura protecția prin legături prin intermediul contului dvs. cPanel. Procesul este foarte simplu.

• Veți vedea o pictogramă etichetată Hotlink Protection în fila Securitate.
• Faceți clic pe această pictogramă pentru a accesa următoarea fereastră.
• Faceți clic pe butonul Activare pentru a preveni conectarea directă a imaginilor dvs.

Notă - Dacă sunteți utilizator Cloudflare, puteți împiedica conectarea imaginilor dvs. prin activarea opțiunii „ Protecție Hotlink ”.

Cache imagini:

Pentru orice site, acest lucru este esențial. Ar trebui să vă păstrați imaginile în cache, astfel încât oamenii să le poată vizualiza mai rapid. În cele mai multe cazuri, vizitatorii site-ului existenți au acest lucru în cache în browserul lor, dar dacă există o problemă cu găzduirea dvs., este posibil să doriți să o configurați separat.

Ori de câte ori instalați WordPress utilizând un serviciu de găzduire, furnizorul de găzduire se ocupă de toată stocarea în cache pentru dvs. De asemenea, puteți instala un plugin de cache.

WP Rocket este un plugin ideal pentru stocarea în cache a imaginilor, deoarece este ușor de utilizat și instalat. Doar îl instalezi și îl activezi și apoi ești gata. Desigur, există și alte pluginuri de cache, dar WP Rocket este alegerea de top în acest scop.

Cache Gravatars:

Un gravatar este o pictogramă mică care urmează adresa ta de e-mail pe web. De exemplu, când lăsați un comentariu pe un alt blog WordPress, Gravatar-ul dvs. va apărea lângă el.

Serviciul Gravatar generează Gravatar, care le memorează în cache pe serverele sale. Prin urmare, dacă comentați un număr mare de bloguri, sau chiar câteva bloguri cu trafic ridicat, Gravatar-ul dvs. va fi stocat în cache pe serverele lui Gravatar.

Ca rezultat, Gravatar-ul tău se va încărca rapid pe toate aceste bloguri. Dar, pe de altă parte, poate fi și un dezavantaj, deoarece dacă serviciul Gravatar nu este disponibil sau Gravatar-ul tău este eliminat de pe unul dintre blogurile pe care le-ai comentat, Gravatar-ul tău va dispărea de pe toate blogurile respective.

Este incredibil de neatractiv să personalizezi un Gravatar cu o imagine cuprinzătoare. Acest lucru se datorează faptului că, dacă Gravatar personalizat nu apare pe acele bloguri, gravatarul implicit va fi folosit în schimb, ceea ce ar putea să nu fie adecvat.

Există două soluții posibile la această problemă:

• Fă-ți Gravatarul cât mai mic posibil. Imaginile mai mici se vor încărca mai repede și vor consuma mai puțină lățime de bandă decât cele mai mari.
• Ar trebui să găzduiți propria versiune a serviciului Gravatar pe un domeniu pe care îl controlați. Acest lucru va necesita un server web Apache, PHP și o bază de date MySQL pentru a stoca Gravatar-urile local, în loc să le memoreze în cache pe serverele Gravatar.

Serviți imagini dintr-un CDN:

Dacă imaginile dvs. sunt difuzate de o rețea de livrare a conținutului (CDN), asigurați-vă că activați stocarea în cache. Drept urmare, browserele și alte dispozitive nu vor trebui să descarce aceeași imagine de mai multe ori.

Cel mai bine ar fi să luați în considerare modul în care vor fi afișate imaginile dvs. atunci când configurați un CDN. În plus, o rescriere CDN ar trebui să fie activată pe imaginile dvs. Puteți face acest lucru cu pluginul Perfmatters

Folosind acest plugin, vă puteți conecta cu ușurință site-ul la o rețea CDN. Ca urmare, dacă site-ul dvs. poate difuza conținut printr-o rețea de livrare de conținut, imaginile dvs. vor fi realizate de serverele CDN.

Puteți utiliza oricare dintre următoarele rețele CDN.

• CloudFlare
• BunnyCDN

Ce nu ar trebui să faceți când optimizați imagini pentru site-ul dvs

Evitați redirecționările URL ale imaginii:

Dacă utilizați o redirecționare URL pe site-ul dvs. web, aceasta întârzie apariția imaginii. De asemenea, imaginea nu este memorată în cache de browser, ceea ce poate provoca o întârziere la încărcarea paginii.

Deci, atunci când vă optimizați imaginile pentru web, ar trebui să evitați să utilizați orice redirecționare URL.

Antetul Evitați expirarea:

Dacă utilizați un antet expiră pe imaginile dvs., este posibil ca browserul să nu le memoreze în cache. De asemenea, face ca browserul să solicite din nou imaginea de fiecare dată când este încărcată într-o pagină.

Ar trebui să evitați să setați anteturi expirate pe imaginile site-ului dvs. dacă doriți să le optimizați.

Evitați încorporarea imaginilor:

Este important să nu încorporați imagini în pagină atunci când optimizați imagini pentru web. Acest lucru se datorează faptului că atunci când încorporați o imagine, browserul descarcă întreaga imagine înainte de a o afișa.

Acest lucru poate face ca site-ul dvs. să se încarce lent și să vă frustreze vizitatorii. În schimb, utilizați fie o etichetă <img>, fie o etichetă <object> pentru a include un link către imaginea de pe serverul dvs. Astfel, browserul poate descărca doar fișierul imagine, nu întreaga pagină.

Cele mai bune instrumente de optimizare a imaginii:

Conținutul de înaltă calitate este esențial pentru dezvoltarea blogurilor profesionale. În plus, imaginile de calitate sunt necesare pentru ca un blog să pară atractiv. Cu toate acestea, este dificil să găsești instrumente gratuite pentru optimizarea imaginilor fără a pierde rezoluția și imaginile frumos proiectate.

Drept urmare, am compilat o listă cu unele dintre cele mai eficiente instrumente de optimizare a imaginii pentru a ne facilita munca.

• TinyJPG: TinyJPG este un instrument online util pentru comprimarea imaginilor JPEG. Rata de compresie a acestui instrument este foarte mare, iar calitatea imaginii este încă excelentă.
• Toolur: Toolur este un instrument online util pentru optimizarea imaginilor pentru web. Optimizează imaginile prin reducerea dimensiunii fișierului fără a afecta calitatea imaginii.
• ImageOptim: ImageOptim este unul dintre cele mai importante instrumente de optimizare a imaginii. Acest instrument vă ajută să îmbunătățiți viteza de încărcare a site-ului dvs. prin optimizarea imaginilor de pe pagina web. Poate chiar optimiza imaginile care au fost deja comprimate.
• GIMP: GIMP este un editor de imagini grozav care vă permite să reduceți dimensiunea fișierului imaginii, păstrând în același timp calitatea imaginii. Este o alternativă demnă la Adobe Photoshop.

Cele mai bune pluginuri de optimizare a imaginii pentru WordPress

Există mai multe plugin-uri diferite de optimizare a imaginii disponibile pentru WordPress. Alegerea celui mai potrivit pentru nevoile tale poate fi dificilă. Iată o listă a pluginurilor de top.

• EWWW Image Optimizer
• Imaginează de WP Rocket Team
• ShortPixel Image Optimizer
• WP Smush
• reSmush.it

Puteți utiliza pluginurile EWWW Image Optimizer , Imagify by WP Rocket Team și ShortPixel Image Optimizer din lista de mai sus.

Ar trebui să utilizați un plugin premium pentru optimizarea imaginii pentru a obține rezultatul optim. Dacă doriți să economisiți niște bani, încercați EWWW Image Optimizer .

Întrebări frecvente

Cum creez imagini WebP în WordPress?

Când utilizați WP Rocket pentru a optimiza imaginile de pe site-ul dvs., le va salva automat ca WebP. În schimb, dacă doriți să convertiți o imagine JPG sau PNG într-o imagine WebP, puteți face acest lucru cu un plugin.

Puteți utiliza oricare dintre următoarele pluginuri pentru aceasta.

• WebP Converter pentru Media
• WebP Express

Un plugin grozav pe care îl folosesc pentru WebP este Flying Images by WP Speed ​​Matters. Funcționează cu orice temă și se ocupă de orice. În plus, vă permite să creați imagini WebP de orice dimensiune doriți și oferă un serviciu CDN gratuit pentru imagini, ceea ce reprezintă un beneficiu semnificativ.

Cum amân imaginile în afara ecranului?

Atributul defer poate fi folosit în JavaScript pentru a încărca imagini în afara ecranului, permițând browserului să redă încărcarea paginii inițiale mai rapid. Acest lucru necesită etichetele de început și de sfârșit. De exemplu:

<img src="image-source.png” alt="” width=”100px” height=”100px” title=”Un text din sfatul instrumentului” data-defer=”offscreen-image.jpg” />

Notă - Amânarea este acceptată numai în HTML5, nu în XHTML.

Folosind un plugin JavaScript, cum ar fi Perfmatters, puteți amâna încărcarea imaginilor dvs. Ca rezultat, puteți schimba eticheta img cu orice element doriți, cum ar fi un div.

<div data-defer="offscreen-image.jpg"></div>

Cum să remediați Amânarea imaginilor în afara ecranului?

• Imagini de încărcare leneșă.
• Încărcare leneșă imagini de fundal.

Imaginile de deasupra pliului ar trebui excluse de la încărcare leneșă pentru a se asigura că utilizatorii le observă rapid. Cu toate acestea, pentru a rezolva imaginile amânate în afara ecranului sau cu încărcare leneșă pe un site WordPress, puteți utiliza pluginul Perfmatters. Pluginul vă permite să îmbunătățiți viteza de încărcare a site-ului dvs. WordPress prin amânarea încărcării imaginilor offscreen.

Notă - Puteți activa încărcarea leneră a imaginii folosind pluginul WP Rocket. Deci, puteți folosi oricare dintre ele.

În concluzie

WordPress este un sistem puternic de gestionare a conținutului care vă permite să vă creați și să gestionați propriul site web. Cu toate acestea, optimizarea imaginilor pentru WordPress poate fi dificilă fără instrumentele adecvate.

Problema cu optimizarea imaginilor pentru WordPress este că sunt disponibile atât de multe metode diferite. De exemplu, puteți utiliza un plugin, un instrument online sau chiar propriul software.

Cea mai eficientă metodă de optimizare a imaginilor pentru WordPress este combinarea tuturor acestor tehnici . În plus, puteți utiliza un plugin care va identifica ce imagini trebuie redimensionate și le puteți redimensiona și manual.

Pe lângă optimizarea dimensiunilor imaginilor pentru WordPress, ar trebui să optimizați și numărul de fișiere pe postare. Încercați să utilizați pluginuri premium pentru a optimiza imaginea și viteza site-ului. Ca rezultat, veți putea dezvolta un site web ușor de utilizat, rapid și eficient.