Haluatko ladata kuvia WordPress-sivustollesi, mutta et ole varma, minkä kokoisia tai tiedostotyyppejä kuvien tulisi olla? Etkö tunne kuvien koon muuttamisen ja pakkaamisen verkkoa varten? Tässä artikkelissa selitän, miksi oikean kuvan koon käyttäminen on tärkeää verkkosivustollesi, sekä näytän, kuinka voit muuttaa kuvien kokoa ja pakata niitä ilmaisella valokuvaeditorilla GIMP.
Video: Kuvien koon muuttaminen WordPressille GIMPissä
Miksi verkkosivustosi kuvien koon muuttaminen on tärkeää?
Aloitetaan siitä, miksi verkkosivustosi kuvien koon muuttaminen on niin tärkeää.
Mukaan WordPress.org, kuvan "fyysisellä koolla" on valtava rooli verkkosivuston toiminnassa. "Tiedostokoko [kuvan] sanelee ajan, joka kuluu sivusi lataamiseen; mitä suurempi tiedostokoko… sitä kauemmin [sivun] lataaminen kestää." Toisin sanoen suuren tiedoston lataaminen verkkosivustollesi hidastaa sen sivun suorituskykyä, jolle lisäät sisällön, mikä yleensä näkyy sivustosi analytiikkatiedoissa hitaampina sivun latausnopeuksina.
"Tiedostokoko [kuvan] sanelee ajan, joka kuluu sivusi lataamiseen; mitä suurempi tiedostokoko… sitä kauemmin [sivun] lataaminen kestää."
-WordPress.org
Sivun latausnopeus, jota kutsutaan myös yksinkertaisesti "sivu nopeus”, kertoo, kuinka nopeasti sivusi sisältö latautuu SEO-sivusto Moz. Hitaammat sivut voivat johtaa korkeampiinpoistumisprosentit”, joka on hieno mittari, joka kuvaa istuntoja, joissa sivuston vierailija poistuu sivustoltasi yhden sivun katselun jälkeen.
Hitaammat sivut voivat myös vähentää aikaa, jonka vierailijat viettävät sivustosi sivuilla, koska ihmiset saattavat joutua kärsimättömiksi odottaessaan sivun sisällön latautumista ja poistumaan sivustoltasi nopeammin.
Nämä tiedot ovat tärkeitä, koska yleensä haluat käyttäjien viettävän enemmän aikaa sivustollasi ja katsovan enemmän sivujasi.
Ne ovat tärkeitä myös, koska ne vaikuttavat siihen, miten sivustosi sijoittuu hakukoneiden tulossivuilla eli "SERP:issä". SERPs ovat yksinkertaisesti tulossivuja, jotka tulevat näkyviin, kun kirjoitat sanan tai lauseen Googleen ja painat Enter-näppäintä. Koska suuremmat kuvat ovat osoitus huonoista verkkosuunnittelukäytännöistä ja vaikuttavat negatiivisesti käyttäjäkokemukseen sivustossasi, hakukoneet, kuten Google, saattavat rangaista sivustollesi näiden suurempien kuvien ja Sijoita verkkosivustosi muiden paremmin toimivien verkkosivustojen alapuolelle.
Mitä alempana sivustosi sijoittuu esimerkiksi Googlessa, sitä vähemmän liikennettä sivustosi saa ja sitä enemmän liikennettä ohjataan kilpailijoillesi, jotka sijoittuvat hakutuloksissa yläpuolellesi.
Pienentämällä verkkosivustollasi olevien kuviesi tiedostokokoa voit parantaa sivu nopeus ja siten parantaa muita mittareita, kuten poistumisprosentti ja aika sivullae parantaaksesi sijoitustasi hakukoneissa.
Huomaa, että on monia muita tärkeitä muuttujia, jotka vaikuttavat hakusijoituksiin, joten kuvien korjaaminen on vain osa kiinteää SEO (Hakukoneoptimointi) -strategia. Se on kuitenkin erittäin tärkeää, jotta sivustosi sijoittuisi korkeammalle Googlen kaltaisissa paikoissa, mikä lisää sivustosi liikennettä.
Kuvien koon muuttaminen WordPressille GIMPissä
Joten kuinka muutat kuvien kokoa oikein WordPressille?
Voit pienentää kuvan tiedostokokoa yksinkertaisesti pienentämällä kuvan kokoa käyttämällä skaalaus ja rajaus ennen kuin lataat sen verkkosivustollesi. Lisäksi voit soveltaa ns.puristus” kuvaasi pienentääksesi sen kokoa entisestään.
GIMP, ilmainen ja avoimen lähdekoodin valokuvaeditori, voi suorittaa kaikki nämä tehtävät samalla kun se vie suositeltuihin "seuraavan sukupolven" tiedostomuotoihin, mikä pienentää kuviesi tiedostokokoa entisestään ja parantaa sivustosi suorituskykyä.
Vaihe 1: Avaa kuva
Aloita tämä prosessi avaamalla kuva, jonka haluat ladata sivustollesi, GIMPissä. Voit tehdä tämän vetämällä ja pudottamalla kuvan tietokoneeltasi GIMP:n kuvaikkunaan, tai voit yksinkertaisesti siirtyä kohtaan Tiedosto>Avaa GIMP:ssä.
Jos käytät Tiedosto>Avaa -menetelmää, siirry kuvan sijaintiin tietokoneellasi avautuvasta "Avaa kuva" -valintaikkunasta ja kaksoisnapsauta kuvatiedostoa, kun olet löytänyt sen avataksesi sen GIMP:iin (tai napsauta "Avaa"-painike dialogiikkunan oikeassa alakulmassa).
Vaihe 2: Etsi kuvasi mitat
GIMP-ikkunan yläosassa on ominaisuus nimeltä "Otsikkopalkki" (punainen nuoli yllä olevassa kuvassa). Täällä näet kuvasi nykyiset mitat (suurennettu vihreä laatikko kuvassa). Kuvani on 1920×1280 – ensimmäinen numero 1920 edustaa kuvani leveyttä (pikseleinä) ja toinen numero, 1280, kuvaa kuvani korkeutta. Lopulliset kuvan mitat, joita haluat käyttää kuvassasi, riippuvat siitä, missä WordPressissä aiot käyttää kuvaa, sekä siitä, mitä teemaa käytät.
Tätä opetusohjelmaa varten muutan kuvani 1200 × 630 pikselin vakiokokoon, jota suositellaan blogitekstikuville.
Vaihe 3: Muuta kuvasi kuvasuhdetta rajaustyökalulla
Tätä silmällä pitäen haluan ensin rajata kuvani niin, että alkuperäisen kuvani kuvasuhde vastaa suositellun koon kuvasuhdetta. Tätä varten tartun rajaustyökaluun painamalla näppäinyhdistelmää Shift+c tai napsauttamalla rajaustyökalukuvaketta GIMP-työkalulaatikossa (punainen nuoli yllä olevassa kuvassa).
Seuraavaksi valitsen tämän työkalun työkalun asetuksissa "Kiinteä" (vihreä nuoli) -kohdan vieressä olevan valintaruudun ja napsautan avattavaa valikkoa valitaksesi "Kuvasuhde" (sininen nuoli).
Kirjoitan "1200:630" asettaakseni kuvasuhteeni avattavan valikon alla olevaan tekstikenttään (keltainen nuoli). Tämä vastaa suositeltua kuvakokoa, jonka haluan lopullisen kuvani olevan.
Käytän rajaustyökalua ja piirrän rajausalueen napsauttamalla ja vetämällä hiirtä kuvan yli. Kun vapautan hiiren, kaikki rajausalueen ulkopuolella on himmennetty (punainen nuoli yllä olevassa kuvassa - olettaen, että "Korosta" on valittuna työkalun asetuksissa, mikä se yleensä on oletuksena).
Oletusarvoisesti rajausalueeni apuviivat on asetettu "Keskiviivoiksi" (keltainen nuoli yllä olevassa kuvassa). Voin muuttaa tätä asetusta työkaluasetusten alareunassa olevien oppaiden pudotusvalikosta. Muutan esimerkiksi oppaani "Kolmassääntöön" (vihreä nuoli). Tässä olevat erilaiset opasvaihtoehdot perustuvat valokuvausperiaatteisiin, joten sommittelusi on helppo kehystää näillä periaatteilla.
Voit siirtää hiiren osoittimen rajausalueen minkä tahansa sivun tai kulman päälle (eli korostetun alueen, joka on merkitty punaisella nuolella yllä olevassa kuvassa), ja sitten muuttaa rajausalueen rajaa napsauttamalla ja vetämällä. Huomaa, että näet aina rajausalueen koon "Koko"-kentissä, jotka sijaitsevat Tool Options -kohdassa (merkitty vihreällä yllä olevassa kuvassa). Haluat pitää rajausalueen kokonaiskoon suurempana kuin kuvan lopullinen koko 1200 × 630.
Voit myös napsauttaa ja vetää hiirtä rajausalueen keskellä (punainen nuoli) siirtääksesi rajauksen kuvassa.
Kun olet valmis rajaamaan kuvan, napsauta kerran rajausalueen sisällä, niin kuvasi rajataan.
Huomaa, että jos työkaluasetusten Poista rajatut pikselit -vaihtoehtoa ei ole valittu (vihreä nuoli yllä olevassa kuvassa), alkuperäinen kuvaraja näkyy silti kuvan ympärillä keltaisena katkoviivana (punainen nuoli). Voit palauttaa alkuperäisen kuvan ja peruuttaa rajauksen valitsemalla Kuva > Sovita kangas tasoihin. Vain kuvasi piirtoalueen sisällä oleva alue viedään.
Vaihe 4: skaalaa kuva
Kuvamme on nyt leikattu haluamaasi kuvasuhteeseen, mutta jos katsot vielä kerran kuvamme mittoja "Otsikkopalkissa", näet kuvan olevan 1532×804 (viivattu vihreällä ja suurennettu yllä olevassa kuvassa – mitat ovat todennäköisesti hieman erilaiset sen mukaan, kuinka suureksi piirsit rajausalueen kuvaasi). Meidän on nyt skaalattava kuva vastaamaan haluamiamme mittoja.
Voit tehdä tämän siirtymällä kohtaan Kuva > Skaalaa kuva (punainen nuoli).
Varmista näkyviin tulevan "Skaalaa kuvaa" -ruudun "Kuvan koko" -kohdassa, että ketjulinkkikuvake "leveys"- ja "korkeus"-ruutujen vieressä on linkitetty (punainen nuoli yllä olevassa kuvassa). Muuta sitten kuvan "leveys" arvoon 1200 (vihreä nuoli). Paina sarkainnäppäintä. Kuvan korkeus päivittyy automaattisesti arvoon 630. Varmista, että "Laatu"-kohdassa avattava "Interpolointi"-valikko (sininen nuoli) on asetettu joko "NoHalo"- tai "LoHalo"-asetukseksi parhaan kuvanlaadun saavuttamiseksi skaalauksen jälkeen. (Lisätietoja interpoloinnista, katso opetusohjelmani aiheesta).
Paina "Skaalaa" -painiketta skaalataksesi kuvan (keltainen nuoli).
Kun skaalaus on valmis, tarkista kuvan mitat otsikkopalkista. Sinun pitäisi nyt nähdä kuvan koko 1200 × 630 – juuri haluamamme koko! Mitä me nyt teemme?
Vaihe 5: Pakkaa kuvasi viemällä
Kuvan rajaaminen ja skaalaus pienensi tiedostokokoa pienentämällä kuvan korkeutta 1920 pikselistä 1200 pikseliin ja leveyttä 1280 pikselistä 630 pikseliin, mutta voimme pienentää kuvan kokoa entisestään käyttämällä pakkausta, kun viemme kuvaa.
Joten meidän on nyt vietävä kuva tiedostomuotoon, joka käyttää kuvaa pakkausta heikentämättä kuvan laatua merkittävästi. Vaikka JPEG-tiedostot ovat aina hyvä vaihtoehto, nyt on saatavilla vielä parempi vaihtoehto: WebP.
WebP-muoto käyttää enemmän pakkausta kuin JPEG, mutta vaikuttaa kuvan laatuun vähemmän kuin JPEG. Toisin sanoen saat paremman näköisen kuvan pienemmällä tiedostokoolla. Lisäksi kaikki viisi suosituinta verkkoselainta tukevat WebP-muotoja.
Vie WebP:hen valitsemalla Tiedosto>Vie nimellä (punainen nuoli).
Napsauta mitä tahansa "Paikat"-osiossa olevaa kansiota (viivattu vihreällä) valitaksesi kuva tietokoneeltasi, johon haluat tallentaa kuvan. Voit kirjoittaa kansiota kaksoisnapsauttamalla sitä ja katsoa, missä kansiossa olet "Tallenna kansioon" -otsikon (punainen nuoli) vieressä. Nimeä sitten kuva uudelleen haluamallasi tavalla – varmista, että päätät kuvan nimen tunnisteella ".webp" (sininen nuoli) viedäksesi kuvan WebP-muotoon. Kun olet valmis, napsauta "Vie" ikkunan oikeassa alakulmassa (keltainen nuoli).
Seuraavaksi "Export Image as WebP" -valintaikkuna tulee näkyviin. Varmista, että "Lossless" ei ole valittuna (punainen nuoli). Asetan tyypillisesti "Image Quality" -asetukseksi 80 (sininen nuoli – tämä on prosentti, joten mitä pienempi prosenttiluku, sitä huonompi kuvan laatu on, mutta sitä pienempi kuvatiedoston koko on). Jos kuvasi ei sisällä läpinäkyvyyttä (eli logoa ilman taustaa), sinun ei tarvitse huolehtia "Alfa-laatu" -liukusäätimestä (itse asiassa tekemässäni kokeessa alfa-laatu alennetaan 100:sta 90:een). lisäsi läpinäkyvän taustan sisältävän kuvan tiedostokokoa 8.50 kb:sta 8.52 kb:iin). "Lähdetyyppi"-pudotusvalikon voit pitää asetukseksi "Oletus".
Voit päättää, haluatko tarkistaa minkä tahansa metatietovaihtoehdon, mukaan lukien Exif-tiedot, ITPC-tiedot ja XMP-tiedot, tai poistaa niiden valinnan. Exif- ja XMP-tiedot ovat kamerasi tyypillisesti määrittämiä metatietoja, jotka kuvaavat valokuvasi tietoja, kuten käytetyn kameramallin tai käytetyn objektiivin. Toisaalta ITPC:tä käyttävät lehdistön edustajat ja se määrittää kuvallesi tietoja, kuten omistusoikeuden, oikeudet ja lisenssit. Jos et ole varma mitä tehdä, jätä nämä vaihtoehdot valituiksi.
Samoin voit jättää "Tallenna väriprofiili" -vaihtoehdon valitsematta, koska useimmat selaimet käyttävät automaattisesti sRGB-väriavaruutta kuvan näyttämiseen, jota GIMP käyttää. Jos käytät eri väriprofiilia, tämä kannattaa jättää valituksi. Lisäksi, jos olet huolissasi siitä, että kuva ei näy oikein tietyissä selaimissa, sen jättäminen valituksi lisää vain muutaman kilotavun kuvan kokonaiskokoon.
Lopuksi "Tallenna pikkukuva" -vaihtoehto voi jäädä valitsematta, mikä säästää meille vielä kilotavuja.
Napsauta "Vie" (keltainen nuoli yllä olevassa kuvassa) viedäksesi kuvan WebP-muotoon. Kun verrataan vietyä WebP-tiedostoa JPEG-tiedostoon, joka on samankokoinen ja jonka laatu on myös "80", WebP-kuva tulee noin 30 kt eli noin 25 % pienempi kooltaan kuin JPEG.
Vaihe 6: Lataa kuvasi WordPressiin
Voit nyt kirjautua sisään WordPress-sivustollesi ja siirtyä sivulle tai viestiin, jolle haluat ladata kuvasi, tai yksinkertaisesti navigoida "Media"-osioon käyttämällä päänavigointia ja vetää ja pudottaa kuvasi Mediakirjastoon. Minun tapauksessani siirryn kohtaan "Julkaise" käyttämällä päänavigointia (punainen nuoli yllä olevassa kuvassa) ja napsautan "Blogiviesti 1" (sininen nuoli) muokataksesi blogitekstiä.
Avaan sitten Viestiasetukset-sivupalkin (punainen nuoli) ja vieritän alas "Suositeltu kuva" -osioon ja laajenna tämä osio (sininen nuoli). Napsauta sitten kuvaa korvatakseni sen uudella kuvallani.
Siirryn "Lähetä tiedostoja" -välilehdelle (punainen nuoli) ja voin vetää ja pudottaa kuvani tietokoneeltani WordPressiin (siniset nuolet).
Lopuksi napsautan "Aseta suositeltu kuva" ottaaksesi tämän muutoksen käyttöön (punainen nuoli).
Napsauta "Päivitä" (punainen nuoli) päivittääksesi sivusi uudella esittelykuvalla.
Jos napsautan "Näytä viesti" (sininen nuoli)…
…näet nyt uuden esittelykuvan blogini yläosassa.
Siinä se tälle opetusohjelmalle! Jos haluat oppia lisää WordPress-sivuston suunnittelusta, suosittelen tutustumaan sivustooni WordPress-kurssi Udemysta! Tai jos haluat oppia lisää GIMPistä, katso minun GIMP 2.10 Masterclass Udemylla!
