Kuvien optimointi WordPressille, täydellinen opas

Kuvien optimointi WordPressille, täydellinen opas

Verkossa olevilla ihmisillä ei ole paljon aikaa kuluttaa tietoa – koska jälkimmäisiä on niin paljon. Tietoja on niin paljon, että meillä ei yksinkertaisesti ole aikaa lukea kaikkea! Nykyaikaisen verkon sisällönkuraattorina sinun tehtäväsi on maksimoida suorituskyky. Mitä enemmän ilmaistaan ​​vähemmän sanoilla, sitä parempi olet työssäsi.


Miksi kuvat (niin erittäin) tärkeitä?

On monia, monia syitä, miksi käyttäisit (ja pitäisi käyttää) kuvia viesteissäsi ja artikkeleissasi:

  • Kuvat toimivat visuaalisena ärsykkeenä toimintakehotukselle (CTA). CTA voi olla mikä tahansa tehtävä, jonka haluat vierailijasi suorittavan. Yleisiä CTA-sopimuksia ovat uutiskirjeen tilaaminen, artikkelin jakaminen sosiaalisessa mediassa tai tuotteen ostaminen.
  • Kuvat parantavat yhteyttä, jonka kirjoittaja pyrkii luomaan lukijaan.
  • Kuvat välittävät enemmän vähemmän.

Siksi on olennaisen tärkeää, että käytämme esityksissämme oikeita kuvia (blogin viesti, epävirallinen raportti, varsinainen PowerPoint-esitys jne.), Jotta jäisimme jäljen lukijan mieleen!

Mutta odota! Ongelma!

Kuvat vievät noin 63% nykyaikaisten verkkosivustojen käyttämästä kaistanleveydestä, joten on yhä tärkeämpää, että ne optimoidaan nopeuden mukaan.

Sivun latausaikojen yhden sekunnin viive voisi vähentää tulosprosentteja 7%

Olemme todenneet, että ihmisillä on lyhyt huomioväli (yksi nykyaikaisen sisällöntuotannon hidastumista). Vaikka käytät oikeita kuvia, jos kuvat eivät lataudu hyväksyttävässä ajassa, kiinnostus häviää.

10 yleisintä kuvan optimointivirhettä

Suurimmalla osalla sivustoista on ongelma – ne käyttävät erinomaisia ​​kuvia, mutta kuvan tapa tarjota kävijälle on huono. Suuri koko, huono optimointi, väärä muoto, tarpeettomasti suuret mitat (koot), vastaamattomat kuvat ja huolimattomat SEO -virheet ovat joitain yleisimmistä ongelmista, joita nykyajan verkko kohtaa. Aiomme käsitellä tämänpäiväisessä artikkelissa näitä kysymyksiä!

1. Suuret mitat

”Extra Fries” eivät ole aina hyviä

Tämä on klassikko. Oletetaan, että tarvitset 150 × 150 pikselin kuvan sivustosi “Team” -sivulta. Yleensä käytät 5MP-otosta, muokkaat sitä hiukan ja lataat sen lopulta.

Huomasitko ongelman? Jotkut ihmiset lähettävät suoraan todellisen 5MP-kuvan! WordPress-teema lataa koko 5MP-kuvan (5 x 10 ^ 6 pikseliä) ja pyytää selainta kutistamaan sen vaadittuun mittaan 150x150px. Pohjimmiltaan selain näyttää vain 0,0045% alkuperäisestä kuvasta!

Loppujen lopuksi tuhlaat sekä vieraasi että vierailijasi kaistanleveyttä (vaikka tarjoat kuvaa sisällönjakeluverkon, kuten Stackpath CDN: n kautta), kulutat enemmän kiintolevytilaa ja kasvatat latausaikaa. Mikään ominaisuuksista ei ole jotain mitä haluat sivustoltasi.

Muuta kuvan kokoa (ja koon mukaan tarkoitan pienentämistä) kuvan vaadittuihin mittoihin ja lähetä se sitten!

ImageResize.org

Sinun ei tarvitse hienoa ohjelmistoa tähän – on ilmaisia ​​verkkotyökaluja, kuten ImageResize.org voit muuttaa kuvien kokoa ja optimoida nopeasti. Lataa vain ja säädä valokuva-asetuksesi. Kun olet valmis, lataa optimoitu kuva käytettäväksi sivustossasi. Ne tarjoavat myös nopean Kuvakompressori jos haluat vain pienentää tiedostokokoa.

Hyödylliset työkalut:

  • IrfanView on erinomainen ilmainen ohjelmisto, joka mahdollistaa kuvien erän koon muuttamisen edistyneillä vaihtoehdoilla, kuten optimointi, vesileima ja reunat.
  • ImageMagick on edistyksellinen avoimen lähdekoodin työkalu, jota voidaan käyttää monilla ohjelmointikielillä ja käyttöjärjestelmillä. Voit kirjoittaa oman sovelluksesi tai käyttää sitä komentorivin kautta.
  • ImageOptim (Mac) antaa sinun vetää kokonaisia ​​kansioita ja optimoida nopeasti useita kuvia.
  • TinyPNG on online-kuvanpakkaustyökalu, jossa on sovellusliittymä.

2. Väärä kuvan muoto

shutterstock_108312266

Kuvan muodossa on tärkeä rooli. Käytä yleensä nyrkkisääntönä PNG vektorigrafiikkaan ja tietokoneella luotuihin kuviin, kuten clip art jne. Käytä JPEG valokuville tai kuville, joissa on erilaisia ​​värejä. Katso yksityiskohtainen selitys tästä mahtava StackOverflow-vastaus.

3. Älä käytä progressiivisia JPEG-tiedostoja

Perustaso (normaali) JPG vs. progressiivinen JPG

Perustaso (normaali) JPG vs. progressiivinen JPG

Tavalliselle ihmiselle JPEG-tyyppejä on kahta tyyppiä – perustaso ja progressiivinen. Visuaalisesti molemmat ovat samoja. Ero on siinä, miten he lastataan:

  • Baseline JPEG: ssä on vain yksi kerros – joka sisältää koko kuvan. Pyydettäessä koko kuva ladataan yhdellä kertaa.
  • Progressiiviset JPEG-levyt muodostavat kuvan useilla kerroksilla. Progressiivinen JPEG-kuva ladataan kerros kerrallaan, jonka laatu asteittain paranee, jolloin lopulta saadaan häviötön näkymä.
IrfanView tukee erämuuntamista progressiivisella JPEG-tiedostolla

IrfanView tukee erämuuntamista progressiivisella JPEG-tiedostolla

Kaikkien tärkeimpien kuvanmuutosohjelmien avulla voit tallentaa kuvia progressiivisena JPEG-muodossa.

4. Älä käytä Lazy Load -sovellusta

Laiska lastaus on erinomainen resurssien säästö tekniikka, jossa kuva ladataan vain, kun kävijä vierittää kuvan kuvakehykseen. Mieti artikkeli – ”15 polttoainetaloudellisimmasta autosta vuonna 2014”. Tämä artikkeli sisältää luonnollisesti vähintään 15 kuvaa. Ja riippumatta näyttölaitteen – näytön, tablet-laitteen tai älypuhelimen korkeudesta – et voi sovittaa kaikkia 15 kuvaa näyttökehykseen. Selaa alaspäin nähdäksesi kaikki kuvat.

Kun Lazy Loading on käytössä, kuvia ladataan vain, kun vierailija on kuvan lähellä. Toisin sanoen kuvat alkavat latautua, kun vierität alas nähdäksesi ne. Muutamia ensimmäisiä kuvia ladataan kuitenkin heti, koska olet jo kuvakehyksessä. Lazy Loading säästää kaistanleveyttä molemmissa päissä ja parantaa latausaikaa! Voit käyttää Lazy lastausta WordPressissä -sovelluksen kanssa BJ Lazy Load -laajennus.

5. Älä käytä CDN: tä

CDN-verkko

Sisältöjakeluverkon (CDN) avulla kuva näytetään palvelimelta, joka on fyysisesti lähinnä vierailijan sijaintia. Jos intialainen vierailija pyytää kuvaa ja CDN: llä on POP (läsnäolopiste tai yksinkertaisesti palvelin) Tokiossa ja New Yorkissa, kuva toimitetaan Tokiossa sijaitsevalta palvelimelta.

Kun liikenne on huomattavaa, sinun pitäisi asentaa CDN WordPressillä, jotta lyhentäisit latausaikaa ja saadaksesi yleistä suorituskykyä. Täällä WPExplorer, suosittelemme CloudFlare. Vastasyntyneille sivustoille suosittelemme luetteloa ilmaisista CDN-palveluista, joita voit kokeilla.

6. Ei julista ”alt” -ominaisuutta

Alt-attribuutti kuvaa kuvaa hakukoneelle. Tähän kenttään kirjoittama teksti näkyy käyttäjälle, jos kuvaa ei voi ladata. Monet ihmiset yleensä jättävät nämä kentät tyhjiksi. Tämä on erittäin vahingollista SEO: lle ja menetät liikennettä. Sinun tulisi aina yrittää sisällyttää sivustosi avainsanat kuvasi alt-tunnisteeseen.

7. Ei optimoi kuvia

lyijykynä-väriliidut-pistettä

Optimoidut kuvat ovat 40% kevyempiä kuin normaalit kuvat. Tämä parantaa latausaikaa ja säästää kaistanleveyttä. Suosittelemme Freddyn parhaiden WordPress Image Optimization -laajennusten luetteloa WPSmush.it kuvien optimoimiseksi. Kraken.io on myös loistava online-vaihtoehto kuvien pakkaamiseen älykkäästi. Käytämme sitä koko ajan täällä WPExplorerissa esiteltyjen kuvien optimoimiseen ennen niiden lähettämistä viesteihin ja teemademoihin.

8. Vasteelliset kuvat

Responsiivinen web-suunnittelu on täällä

Responsiivinen web-suunnittelu on täällä

Vaikka sivustosi olisi reagoiva, se ei tarkoita, että kuvasi ovat. Tämä tarkoittaa, että otsikon kuva, jota käytät 22 ”työpöydällä, näytetään myös 5” iPhonelle. Kun lataat kuvan, WordPress muuttaa sen kokoa useaan versioon – pikkukuvaksi, keskisuureksi, täysikokoiseksi jne. Kehittäjä voi muuttaa sitä. Hyvin koodattu teema palvelee kuvan keskikokoista versiota, mikä säästää kaistanleveyttä.

Picturefill.WP plugin korvaa kuvatunnisteet uudella elementti, joka palvelisi erilaisia ​​kuvia mediakyselyjen perusteella. Se on melko kokeellinen (eli vikoja on), eikä sitä pitäisi käyttää live-sivustossa.

9. Kuvatekstit

Tekstitykset eivät ole aina välttämättömiä, vaikka joissakin tapauksissa sitä vaaditaan – kuten kuvakaappauksia opetusohjelmassa. Kuvien kuvateksti auttaa lukijoita ymmärtämään aihetta paremmin ja parantamaan samalla hakukoneoptimointia.

10. Kuvatiedostonimi

Ajattele tiedostonimeä hakukoneen kannalta. Käytä samaa tekstiä kuin kuvan “otsikkotunnisteessa”. Yritä myös sisällyttää avainsanasi, jotka ovat sivustosi kannalta parhaiten sopivia.

johtopäätös

sankari-11

Image SEO on kriittisen tärkeä kaikille verkkosivustoille – vanhoille tai uusille. Ihmiset, jotka toteuttavat kuvan SEO oikein (se voi olla toisinaan melko arkipäiväinen), saamaan merkittävän määrän orgaanista liikennettä (paras liikenteen tyyppi) pitkällä aikavälillä.

Onko sinulla mahtava optimointitekniikka? Tulipalo pois!

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