Optimoi kuvat ennalta määritetyllä kuvakokolla [WordPress Vihje]

Kuvien optimointi verkkosivustolla on pelottava tehtävä. Voit valita vähemmän kuvia, pakattuja kuvia, spriittejä tai svg-tiedostoja; luettelo jatkuu. Eräs paikka, jossa monet WordPress-sivustot jäävät pois, on kuvakoon määrittäminen, joka on a olennainen osa sisällön raskaiden sivustojen optimointia.

Kuvakoot ovat elintärkeitä, koska kuvat luodaan automaattisesti niiden kuvien koon mukaan, jotka annetaan kuvien lataamisen yhteydessä. Näin varmistetaan, että vaikka 3000px: n leveä alkuperäinen kuva olisi käytössä, sitä ei koskaan käytetä, jos 600px-kuva riittää. Ihannetapauksessa 600px: n leveä tila olisi käytettävä 600px: n leveä kuva sen sijaan, että suurennettaisiin suurempaa.

Tässä artikkelissa kävelen sinua läpi mitä kuvakokoja on ja miten ne määritellään.

Miten WordPress käsittelee kuvia

Jos olet koskaan lisännyt kuvan WordPress-artikkeliin, sinun olisi pitänyt tulla kuvan koon valitsimella. Näin voit lisätä pieniä, keskisuuria ja suuria versioita kuvista. Näiden todelliset koot voidaan muuttaa WordPress-asetuksissa.

Kun lähetät kuvan WordPressin kautta, se luo versioita näistä kuvista ja tallentaa ne erikseen. Jos esimerkiksi lähetät 1200 × 800 kuvan, WordPress voi luoda 100 × 100, 600 × 400 ja 900 × 600 versiota. Kun lisäät kuvan ja valitset "keskipitkän", käytetään varsinaista keskiversiota verrattuna alkuperäisen vähentyneeseen versioon..

Tämä on erittäin hyödyllistä, koska se on säästää kaistanleveyttä palvelimessa ja käsittelyaikaa asiakastietokoneessa. Mielestäni ei ole mikään yllätys, että 600 × 400 kuvan lataaminen on nopeampaa kuin 1200 × 800 kuvan lataaminen.

Jos käytetään suurempaa kuvaa, joka on pienennettävä, selaimen on huolehdittava laskelmista jotta tämä tapahtuisi. Vaikka tämä ei vie tunteja, se voi olla huomattava kuvien raskailla verkkosivuilla.

Oikea kuva oikeassa paikassa

Lopullisena tavoitteena pitäisi olla käytä aina sopivia kuvakokoja. Jos tarvitset 440 × 380 kuvaa, tartu kuvaan, jonka koko on täsmällinen palvelimelta. On olemassa kaksi pääpaikkaa, joissa käytät ladattuja kuvia: kuvat ja postikuvat - suosittelen, että keskitymme esille otettuihin kuviin ensin.

Kaikissa paitsi visuaalisesti suunnatuissa artikkeleissa ei oikeastaan ​​ole väliä, jos post-image on 220px tai 245px leveä. Minkä tahansa käyttämäsi versio olisi yhtä käyttökelpoinen. Esitetyt kuvat näkyvät yleensä tavallisissa kooissa. Artikkeliluetteloissa voit käyttää 178 × 178 pienoiskuvaa, jolloin artikkelin otsikoissa voit käyttää 1200 × 600 leveää kuvaa.

Näiden lisäksi voit halutessasi säilyttää erillisen pikkukuvan / keskikokoisen / suuren koon, kuten asetuksissa on määritelty voit helposti käyttää tiettyjä mittoja kun lisäät kuvia viesteihin.

Joten mitä se kaikki kumoaa, on tämä: Eikö olisi hienoa, jos meillä olisi kaksi ylimääräistä kuvakokoa, joita voisimme käyttää esillä oleviin kuviin? Nämä kuvakoot luodaan oikealle loput, kun kuva ladataan. Hyvä uutinen on, että WordPress on peittänyt melko yksinkertaisen toiminnon.

Kuvan koon luominen

Käyttämällä add_image_size () -toiminto voit määrittää kaikki Web-sivuston tarvitsemasi kuvakoot. Luomme edellä mainitut kaksi esimerkkiä. Aseta alla oleva koodi teemasi funktioihin .php tai laajennustiedostoon.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Kuten näette, tämä toiminto ottaa neljä parametria. Ensimmäisen parametrin avulla voit määrittää koon nimen. Toinen parametri on maksimileveys, kolmas, maksimikorkeus. Neljäs parametri asettaa kovan rajauksen. Jos asetus on true, kuva luodaan tarkkaan määrittämäsi koon mukaan.

Kun tämä on lisätty teemaan tai pluginiin, WordPress luo jokaisesta lataamastasi tiedostosta kaksi uutta versiota.

Kuvakokojen käyttäminen

Näitä kuvakokoja voidaan käyttää useissa toiminnoissa, jotka käsittelevät median noutamista. Katsotaanpa ensin esillä olevia kuvia. the_post_thumbnail () käytetään yleisesti näyttämään viestin näkyvän kuvan. Seuraava koodi voidaan sijoittaa WordPress-silmukkaan:

 the_post_thumbnail ('featured_thumbnail'); 

Tämän toiminnon ensimmäisen parametrin avulla voit määrittää käytettävän kuvan koon. Koska olen määrittänyt "featured_thumbnail", käytetään tämän tiedoston 178 × 178 versiota.

On olemassa useita muita toimintoja, kuten wp_get_attachment_image ()ja wp_get_attachment_image_src () joka käyttää myös kuvan kokoparametria. Kun käytät tällaista toimintoa, sinun on aina määritettävä sopiva kuvan koko.

Pienoiskuvien uudistaminen

Jos sinulla on jo sivusto, et pysty optimoimaan artikkeleita takautuvasti vain määrittämällä kuvan koon. Kuvakokoja otetaan huomioon vain, kun uusi kuva ladataan, joten niitä ei sovelleta järjestelmässä jo oleviin kuviin.

Älä pelkää, Regenerate Thumbnails plugin tekee asiat paremmin! Tämä laajennus voi palauttaa kaikkien kuvien pienoiskuvat ottaen huomioon kaikki määritetyt kuvakoot. Se voi myös kohdistaa tietty kuva, mikä on hyödyllistä, jos sinulla on vain muutama tai teet joitakin testejä.

Kun pienoiskuvat on uudistettu, sinun pitäisi nähdä sivustoosi ladatut optimoidut versiot. Voit tarkistaa tämän tarkastelemalla kuvan lähdettä. Jos olet ladannut esimerkin.jpeg ja näet esimerkkisi.jpeg-näkymän oman kuvasi lähteenä, jotain ei ole oikein. Jos näet “Esimerkiksi-178 × 178.jpeg” sitten kaikki on hyvin; optimoitu kuva näytetään.

Reagoivat kuvat

Yksi vaikeus optimoidun sivuston ylläpitämisessä on reaktiivisuus. Kun katselen iPadin artikkelia, suurikokoinen post-kuva pienennetään, koska suurin leveys on 786px tai niin paljon.

Helpoin ratkaisu on käyttää Hammyn kaltaista laajennusta. Hammy toimii teeman sisällön leveyden perusteella (toisin kuin selaimen ikkunan leveys) ja voi palvella optimoituja kuvia. Tämä on erityisen kätevää mobiilikäyttäjille, joissa käsittelyteho ja kaistanleveys voivat olla ongelma.

Kuvien optimointi

Kuten mainitsin johdannossa, on olemassa lukemattomia tapoja optimoida kuvia. Spriteistä kuvien pakkaamiseen voidaan käyttää paljon tekniikoita, joilla pienennetään kuormitusaikoja, jotka tulevat käsin kuvien kanssa. Ashutosh KS on kirjoittanut suuren artikkelin, jossa esitellään 9 WordPress-laajennusta kuvan suorituskyvyn parantamiseksi.!

Suosittelen myös tarkastelemaan Hassle Free Responsive Images -ohjelmaa, jossa näytetään, miten voit lisätä kuvaelementin tukea, mitä haluat käyttää, jos haluat kirjoittaa oman koodin.