Kako optimizirati slike za WordPress, popoln vodnik

Kako optimizirati slike za WordPress, popoln vodnik

Ljudje v spletu nimajo veliko časa za zaužitje podatkov – ker je toliko drugih. Toliko je podatkov, da preprosto nimamo časa, da bi jih vse prebrali! Kot kustos vsebin za sodobni splet je vaša naloga maksimirati pretok. Bolj ko se izražate z manj besedami, boljši ste v službi.


Zakaj so slike (tako zelo) pomembne?

Obstaja veliko in veliko razlogov, zakaj bi (in bi morali) uporabljali slike v svojih objavah in člankih:

  • Slike služijo kot vizualni dražljaji za poziv k dejanju (CTA). CTA je lahko katero koli opravilo, ki ga želite obiskati. Med pogoste CTA vključujejo naročanje na vaše novice, skupno rabo članka prek družbenih medijev ali nakup izdelka.
  • Slike izboljšujejo povezavo, ki si jo pisatelj prizadeva vzpostaviti z bralcem.
  • Slike prenašajo več skozi manj.

Zato je bistvenega pomena, da v svojih predstavitvah uporabimo prave slike (objava na blogu, neuradno poročilo, dejanska predstavitev PowerPointa itd.), Da v bralcu pustijo pečat!

Ampak počakaj! Obstaja težava!

Slike zavzemajo približno 63% pasovne širine, ki jo uporabljajo sodobna spletna mesta, zato je vse bolj pomembno, da so hitro optimizirane za hitrost.

Ena sekunda zamude pri nalaganju strani lahko zmanjša stopnjo konverzije za 7%

Ugotovili smo, da imajo ljudje kratek čas pozornosti (ena od slabih strani sodobne stopnje proizvodnje vsebine). Tudi če uporabite prave slike, če se ne naložijo v sprejemljivem časovnem okviru, se zanimanje izgubi.

10 najpogostejših napak pri optimizaciji slike

Večina spletnih mest ima težavo – uporabljajo odlične slike, vendar je način, kako sliko vroči obiskovalcu, slab. Velika velikost, slaba optimizacija, napačen format, nepotrebno velike dimenzije (velikosti), neodzivne slike in neprevidne SEO napake so nekateri najpogostejši problemi sodobnega spleta. V današnjem članku bomo obravnavali te težave!

1. Velike dimenzije

“Dodatni krompirčki” niso vedno dobri

To je klasika. Recimo, da potrebujete fotografijo velikosti 150 × 150 slikovnih pik na strani »Skupina« vašega spletnega mesta. Običajno boste uporabili 5MP lok glave, ga malo uredili in na koncu naložili.

Ste opazili težavo? Nekateri ljudje neposredno prenesejo dejansko sliko 5MP! Tema WordPress bo naložila celotno sliko 5MP (to je 5 x 10 ^ 6 pik) in od brskalnika zahtevala, da jo skrči na zahtevano dimenzijo 150x150px. V bistvu brskalnik prikaže le 0,0045% prvotne slike!

Na koncu zapravite pasovno širino svojega in obiskovalca (tudi če sliko prikazujete prek omrežja za pošiljanje vsebine, kot je Stackpath CDN), porabite več prostora na trdem disku in povečate čas nalaganja. Nobena od funkcij ni nekaj, kar bi želeli na svojem spletnem mestu.

Vedno spremenite velikost (in pod velikostjo mislim na manjšo velikost) sliko do zahtevanih dimenzij in jo nato naložite!

ImageResize.org

Za to ne potrebujete domišljijske programske opreme – obstajajo brezplačna spletna orodja, kot so ImageResize.org lahko uporabite za hitro spreminjanje velikosti in optimizacijo slik. Prenesite in nastavite fotografije. Ko končate, prenesite svojo optimizirano sliko na svoje spletno mesto. Ponudijo tudi hitro Kompresor za slike če želite le zmanjšati velikost datoteke.

Koristna orodja:

  • IrfanView je odlična brezplačna različica za spreminjanje velikosti slik z naprednimi možnostmi, kot so optimizacija, vodni žig in obrobe.
  • ImageMagick je napredno odprtokodno orodje, ki se lahko uporablja v različnih programskih jezikih in operacijskih sistemih. Lahko napišete svojo aplikacijo ali jo preprosto uporabite prek ukazne vrstice.
  • ImageOptim (Mac) omogoča vlečenje celotnih map in hitro optimizacijo več slik.
  • TinyPNG je spletno orodje za stiskanje slik z API-jem.

2. Nepravilna oblika slike

shutterstock_108312266

Oblika slike, ki se uporablja za sliko, ima ključno vlogo. Kot splošno pravilo uporabite PNG za vektorsko grafiko in računalniško ustvarjene slike, kot so grafična slika itd JPEG za fotografije ali slike z najrazličnejšimi barvami. Za podrobno razlago si oglejte to super odgovor StackOverflow.

3. Ne uporabljate progresivnih JPEG

Izhodiščni (običajni) JPG v primerjavi s progresivnim JPG

Izhodiščni (običajni) JPG v primerjavi s progresivnim JPG

Za običajnega človeka so JPEG dve vrsti – izhodiščne in progresivne. Vizualno sta oba enaka. Razlika je v tem, kako se naložijo:

  • Osnovna JPEG ima samo eno plast – vsebuje celotno sliko. Na zahtevo se celotna slika naloži naenkrat.
  • Progresivni JPEG sestavljajo sliko z več plasti. Progresivna slika JPEG se nalaga plast za plastjo, ki se postopoma povečuje v kakovosti, kar na koncu omogoča pogled brez izgub.
IrfanView podpira paketno pretvorbo s progresivnim JPEG

IrfanView podpira paketno pretvorbo s progresivnim JPEG

Vsi večji odmerniki slik vam omogočajo, da slike shranite kot progresivni JPEG.

4. Ne uporabljate Lazy Load

Lazy-Loading je odličen varčevanje z viri tehnika, pri kateri se slika naloži samo, ko se obiskovalec pomakne navzdol do okvirja slike. Oglejte si članek – “15 najbolj varčnih avtomobilov v letu 2014”. Ta članek bo seveda vseboval vsaj 15 slik. In ne glede na višino zaslonske naprave – monitorja, tabličnega računalnika ali pametnega telefona, ne morete namestiti vseh 15 slik v okvir za ogled. Za ogled vseh slik se morate pomakniti navzdol.

Če je omogočeno Lazy Loading, se slike nalagajo le, če je v bližini slike obiskovalec. Povedano drugače, slike se začnejo nalagati šele, ko se pomaknete navzdol in si jih ogledate. Prvih nekaj slik pa se naloži takoj, saj ste že v okviru ogleda. Lazy Loading prihrani pasovno širino na obeh koncih in izboljša čas nalaganja! Lazy Loading lahko v programu WordPress uporabite z BJ Lazy Load Plugin.

5. Ne uporabljajte CDN

cdn-omrežje

Z uporabo omrežja za dostavo vsebine (CDN) bo slika prikazana s strežnika, ki je fizično najbližji lokaciji obiskovalca. Če obiskovalec iz Indije zahteva sliko in ima CDN POP (točka prisotnosti ali preprosto strežnik) v Tokiu in New Yorku, bo slika vročena s strežnika, ki se nahaja v Tokiu.

Če imate velik promet, morate z WordPressom nastaviti CDN, da boste zmanjšali čas nalaganja in dosegli splošno učinkovitost. Tukaj na WPExplorer, priporočamo Cloudflare. Za novorojena spletna mesta priporočamo seznam brezplačnih storitev CDN, ki jih lahko poskusite.

6. Ne razglasitev atributa alt

Atribut ‘alt’ opisuje sliko iskalnika. Besedilo, ki ga vnesete v to polje, bo uporabniku prikazano v primeru, da slike ni mogoče naložiti. Veliko ljudi ponavadi pušča ta polja prazna. To je za SEO zelo škodljivo in izgubite promet. Vedno poskusite vključiti ključne besede svojega spletnega mesta v alt oznako svojih slik.

7. Ne optimiziranje slik

barvice s svinčnikom

Optimizirane slike so 40% lažje od običajnih slik. To izboljša čas nalaganja in prihrani pasovno širino. S seznama Freddy-jev najboljših vtičnikov za optimizacijo slike WordPress, priporočamo WPSmush.it za optimizacijo slik. Kraken.io je tudi odlična spletna možnost za stiskanje slik v trenutku. Tukaj ga uporabljamo ves čas na WPExplorerju za optimizacijo predstavljenih slik, preden jih naložimo v objave in tematske predstavitve.

8. Odzivne slike

Odziven spletni dizajn je tu

Odziven spletni dizajn je tu

Tudi če je vaše spletno mesto odzivno, to ne pomeni, da so vaše slike. To pomeni, da se glava slike, ki jo uporabljate za 22-palčni zaslon namizja, prikaže tudi 5-palčnemu iPhoneu. Ko naložite sliko, jo WordPress spremeni v več različic – sličica, srednja, polna velikost itd. To lahko razvijalec spremeni. Dobro kodirana tema bo služila “srednje” različici slike in s tem prihranila pasovno širino.

The Picturefill.WP plugin bo zamenjal slikovne oznake z novimi element, ki bi služil različnim slikam na podlagi medijskih poizvedb. Je dokaj eksperimentalna (kar pomeni, da obstajajo napake) in je ne bi smeli uporabljati na spletnem mestu v živo.

9. Napisi slike

Napisi niso vedno potrebni, čeprav so v nekaterih primerih potrebni – na primer posnetki zaslona v vadnici. Slike s podnapisi pomagajo bralcem, da bolje razumejo temo, hkrati pa povečujejo vašo SEO.

10. Ime datoteke

Pomislite na ime datoteke z vidika iskalnika. Uporabite isto besedilo, kot bi ga označili v naslovu. Poskusite vključiti tudi ključne besede, ki so najbolj pomembne za vaše spletno mesto.

Zaključek

junak-11

SEO SEO je zelo pomemben za katero koli spletno mesto – staro ali novo. Ljudje, ki izvajajo SEO SEO pravilno (včasih je lahko precej vsakdanje), stojite tako, da pridobite znatno količino organskega prometa (najboljša vrsta prometa) v dolgi rok.

Imate vrhunsko tehniko optimizacije? Ogenj proč!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me