Näin optimoit kuvat Elementorissa

Kuva voi näyttää Elementor-editorissa pieneltä, vaikka sen lataaminen siirtää paljon dataa. Editorissa säädetään ulkoasua, kun taas WordPress, palvelinympäristö ja optimointilisäosat vaikuttavat siihen, minkä tiedoston kävijä saa. Tässä oppaassa käydään läpi näiden yhteys erityisesti kuvaelementtien, säilöjen taustakuvien ja sivun ensimmäisen suuren kuvan osalta.

Valitse kuvaelementille sopiva tarkkuus

Valitse Image-kuvaelementti ja avaa Content-välilehti. Etsi asetus Image Resolution. Joissakin elementeissä ja vanhemmissa versioissa sen nimi on Image Size. Asetuksella valitaan WordPressin kuvakoko, kuten Medium, Large tai Full. Erilliset Width- ja Max Width -asetukset määräävät, paljonko tilaa kuva vie sivulla. Asetukset esitellään Elementorin Image-elementin ohjeessa.

Full ei tarkoita samaa kuin ”täytä sarake”. Se valitsee kuvan lähteeksi täysikokoisen liitetiedoston. Suuresta kuvasta WordPress on kuitenkin saattanut jo tehdä pienennetyn täysikokoisen version, joten kyse ei aina ole kameran alkuperäisestä tiedostosta. Toiminta kuvataan WordPressin kuvakokojen muodostamisen ohjeessa.

Myös selain vaikuttaa valintaan. Jos julkaistun kuvan tiedoissa ovat srcset- ja sizes-attribuutit, selain voi valita tarjolla olevista kuvaversioista asettelun, näytön pikselitiheyden ja oman latauslogiikkansa perusteella. Full ei siis takaa, että jokainen kävijä lataa suurimman tiedoston. Sopiva kuvaelementin tarkkuus ja järkevästi mitoitettu alkuperäinen ovat silti parempi lähtökohta kuin pelkkään automatiikkaan luottaminen.

Mitat ovat esimerkkejä, eivät Elementorin vaatimuksia. WordPressiin määritetyt kuvakoot riippuvat asetuksista, teemasta ja lisäosista. Myös korkeuden on riitettävä suunniteltuun rajaukseen. Näyttöleveyden kaksinkertaistaminen voi auttaa tiheäpikselisellä näytöllä, mutta valinta tehdään laadun ja tiedostokoon välillä. Kaikkia kuvia ei tarvitse tallentaa kaksinkertaisissa mitoissa.

Custom-tarkkuudesta voi olla hyötyä, jos vakiokoot eivät sovi käyttöpaikkaan. Tarkista rajaus ja se, että julkaistulle kuvalle on edelleen tarjolla sopivia eri näyttökokoihin tarkoitettuja versioita. Custom ei automaattisesti paranna latausta eikä toisaalta aina estä responsiivisten kuvien toimintaa.

Asetusten Style → Width tai Max Width muuttaminen ei pienennä tallennetun tiedoston mittoja eikä pakkaa sitä uudelleen. Responsiivinen kuvamerkintä voi auttaa selainta valitsemaan pienemmän version, mutta pelkkä näkyvän leveyden muuttaminen ei osoita ladattavan datan vähentyneen.

Optimoi säilöjen taustakuvat mobiiliin

Säilön tai osion Style → Background-asetuksissa lisätty kuva toteutetaan yleensä CSS-taustakuvana. Sillä ei ole HTML-kuvan srcset- tai sizes-attribuutteja. Jos muu kuvien jakelujärjestelmä ei tarjoa vaihtoehtoja, tietokoneelle tarkoitettu taustakuva voidaan siksi ladata myös puhelimeen.

Mieti ensin, kuuluuko kuva taustalle. Koristeellinen tekstuuri tai tunnelmakuva voi sopia siihen hyvin. Tuotekuva, kaavio tai olennainen tieto kannattaa yleensä lisätä Image-elementtinä, jolloin kuvalle voidaan antaa vaihtoehtoinen teksti ja tarjota eri näyttökokoihin sopivia versioita.

Jos taustakuva tarvitsee mobiilissa erilaisen sommittelun:

1. Valitse säilö tai osio ja avaa Style → Background.
2. Siirry mobiilin näkymään taustakuvan responsiivisella säätimellä, jos editoriversiosi tarjoaa sen.
3. Valitse kyseisen säilön mittasuhteisiin rajattu mobiilikopio. Korkea pääkuva-alue voi tarvita pystyrajauksen, mutta matalaan banneriin voi edelleen sopia vaakakuva.
4. Valitse Cover, kun kuvan tulee täyttää alue vääristymättä. Cover säilyttää mittasuhteet ja rajaa säilön ulkopuolelle jäävät osat pois.
5. Säädä taustakuvan sijaintia niin, että kohde pysyy näkyvissä. Tarkista myös näkymän vaihtumiskohdan lähellä olevat näyttöleveydet.

Tarkista julkaistulta mobiilisivulta säilön korkeus, tekstin kontrasti ja ladattava kuvatiedosto. Erillinen rajaus voi parantaa sommittelua, mutta ladattava data vähenee vain, jos mobiiliversio todella korvaa suuremman tiedoston. Erillisen tietokoneosion piilottaminen ei takaa, ettei sen kuvia ladata.

Lataa tärkein pääkuva viivyttelemättä

Largest Contentful Paint (LCP) mittaa, milloin alkunäkymän suurin näkyvä sisältöelementti ilmestyy. Se voi olla pääkuva, taustakuva tai tekstialue. Selvitä suorituskykyraportista todellinen LCP-elementti ennen kuin muutat kuvien latausprioriteetteja.

Viivästetty lataus eli lazy loading sopii sivun alempana oleville kuville. Tärkeän pääkuvan kohdalla se voi kuitenkin viivyttää latausta, koska selain odottaa päätöstä kuvan tarpeellisuudesta. Googlen LCP-optimoinnin ohje suosittelee, että selain löytää LCP-kuvan ajoissa eikä sen latausta viivästetä.

• Aloita Elementorin automatiikasta: Ota Optimized Image Loading käyttöön jäljempänä kuvatuissa suorituskykyasetuksissa ja tarkista julkaistun sivun toiminta.
• Tarkista muut latausta viivästävät järjestelmät: Välimuisti- tai kuvien optimointilisäosa voi muuttaa lopputulosta. Jos se viivästää pääkuvaa, lisää kyseinen kuva tai elementti lisäosan poikkeuksiin.
• Erota välitön lataus ja latausprioriteetti: HTML-kuvan lataus voi alkaa normaalisti ilman viivästystä. loading="eager" pyytää tätä erikseen, kun taas fetchpriority="high" antaa selaimelle vihjeen latauksen tärkeydestä. Kaikkien kuvien nostaminen tärkeiksi vie priorisoinnilta hyödyn.
• Tarkista taustana käytetty pääkuva erikseen: Se ei käytä kuvaelementin latausattribuutteja. Jos taustakuva on LCP-elementti ja lataus alkaa myöhään, selvitä, milloin CSS tai latausta viivästävä skripti tuo kuvan osoitteen selaimen saataville. Pelkkä koon pienentäminen ei poista tätä viivettä.
• Arvioi pääkuva-alueen kuvakaruselli: Yksittäisen kuvan priorisointi on helpompaa. Jos säilytät karusellin, tarkista, kilpailevatko piilossa olevat kuvat latausresursseista ensimmäisen näkyvän kuvan kanssa.

Varaa kuvalle tila ennen latautumista

Cumulative Layout Shift (CLS) mittaa näkyvän sisällön odottamatonta liikkumista. Jos selain ei tiedä kuvan tarvitsemaa tilaa, tekstit ja painikkeet voivat siirtyä kuvan ilmestyessä. Kuvan mitat auttavat varaamaan tilan etukäteen.

1. Säilytä leveys- ja korkeusattribuutit: WordPress lisää ne tavallisesti kuvan HTML-merkintään. Ne kertovat mittasuhteet ja voivat toimia yhdessä responsiivisen CSS:n kanssa.
2. Määritä kuvalle sopiva kehys: Varaa yhtenäisesti rajatuille korteille tila kuvasuhteella tai asettelun mitoilla. Käytä elementin omia asetuksia tai tarvittaessa CSS:n aspect-ratio-ominaisuutta. Kun kuvan on täytettävä kiinteä kehys, object-fit: cover säilyttää mittasuhteet rajatessaan.
3. Testaa sivupohjia erilaisella sisällöllä: Esikatsele Theme Builder- tai Loop Grid -asetteluissa julkaisuja, joiden artikkelikuva on vaaka- tai pystymallinen tai puuttuu kokonaan. Määritä kortille johdonmukainen kuva-alue ja tarvittaessa varakuva.

CSS-taustakuva ei anna säilölleen luontaista korkeutta. Tila määräytyy asettelun, sisällön, sisämarginaalien tai vähimmäiskorkeuden perusteella. Tarkista asetukset kaikissa näkymissä sen sijaan, että odottaisit taustakuvan pitävän osion avoinna.

Tarkista galleriat, karusellit ja suurennusnäkymät erikseen

Gallerialla on kaksi tehtävää: näyttää kuvista tiivis yleiskatsaus ja tarjota riittävästi yksityiskohtia kuvaa avattaessa. Näihin voidaan tarvita eri tiedostot.

• Valitse tarkkuus näkyvän kuvan tai kortin mukaan: Neljää pientä kuvaa näyttävä karuselli ei tarvitse samaa tarkkuutta kuin yksi koko sivun levyinen kuva. Tarkista myös mobiili, jossa pienempi yhtäaikaisten kuvien määrä voi tehdä yksittäisestä kuvasta leveämmän.
• Erota esikatselukuva ja suurennettava kuva: Valitse ruudukkoon sopiva tarkkuus ja määritä Media File -linkitys sekä Lightbox, jos kävijän pitää voida avata kuva suurempana. Optimoi myös suurempi tiedosto. Tarkista latauspyynnöt ennen suurennusnäkymän avaamista ja sen jälkeen, sillä ennakkolataus voi vaihdella.
• Tarkista toistuvan kortin pohja: Säädä arkistokorttien ja Loop Grid -ruudukkojen Featured Image -elementtiä itse korttipohjassa. Toistuva liian suuri kuva voi kasvattaa koko arkistosivun latausmäärää, vaikka kortit näyttävät pieniltä.

Valitse kuvalle sopiva tiedostomuoto

Vertaa kuvamuotoja samoilla mitoilla ja sellaisella laadulla, jonka voisit julkaista. Yhtä kaikkiin kuviin pätevää säästöprosenttia ei ole.

• WebP: Hyvä lähtökohta valokuville ja monille kuvituksille. Tukee häviöllistä ja häviötöntä pakkausta sekä läpinäkyvyyttä. Kokeile työkaluja JPG WebP:ksi tai PNG WebP:ksi ja tarkista pienet yksityiskohdat sekä reunat.
• JPG: Käytännöllinen valokuvamuoto, kun muu työnkulku sitä vaatii. Säädä laatua vertailemalla tuloksia sen sijaan, että pitäisit yhtä prosenttia yleisasetuksena.
• PNG: Sopii häviöttömään grafiikkaan, kuvakaappauksiin ja sitä vaativiin työnkulkuihin. Pelkkä läpinäkyvyys ei edellytä PNG:tä WebP:n sijaan. PNG-valokuvat ovat usein paljon suurempia kuin sopivasti pakatut häviölliset versiot.
• AVIF: Kannattaa ottaa valokuvien vertailuun, jos WordPress-asennus, palvelin ja optimointityönkulku tukevat sitä. Testaa sekä palvelimelle lataamisen jälkeinen käsittely että julkaistun sivun tiedostot ennen koko kirjaston muuntamista.
• SVG: Sopii vektorilogoihin ja kuvakkeisiin. Käytä luotettavista lähteistä saatuja tiedostoja ja noudata Elementorin SVG-latausohjetta, mukaan lukien tiedostojen puhdistaminen ja lataamiseen liittyvät varotoimet.

Lue verkkokuvien tiedostomuotojen oppaasta tarkemmin eri vaihtoehtojen eduista ja rajoituksista.

Valmistele kuva sen käyttöpaikkaa varten

Säilytä alkuperäinen erikseen ja tallenna verkkosivulle oma kopio. Näin myös täysikokoinen tiedosto pysyy kohtuullisena, mikä on tärkeää taustakuvissa ja galleriasta avattavissa kuvissa.

1. Mittaa suurin tarvittava näyttökoko: Tarkista tietokone- ja mobiiliasettelut. Tietokoneella tekstin vieressä oleva kuva voi täyttää tabletilla koko rivin ja olla leveämpi.
2. Rajaa asettelun mukaan: Poista tarpeeton tila rajaustyökalulla ja pidä kohde mukana. Jätä tilaa mahdolliselle kuvan päälle tulevalle tekstille.
3. Muuta kopion kokoa: Vertaa käyttöpaikkaan sopivia mittoja kuvakoon muuttajalla. Älä suurenna pientä lähdekuvaa vain saavuttaaksesi ennalta valitun leveyden.
4. Pakkaa ja tarkista: Käytä kuvanpakkaajaa ja vertaa tallennettua kopiota lopullisessa näyttökoossa. Pääkuvalle 100–200 kt ja sisältökuvalle alle 100 kt voivat olla lähtötavoitteita, mutta sopiva koko riippuu yksityiskohdista, mitoista ja koko sivun latausmäärästä.
5. Nimeä ja kuvaile: Käytä kuvaavaa tiedostonimeä, esimerkiksi office-reception.webp. Lisää merkitykselliselle kuvalle sen tarkoituksen välittävä alt-teksti. Koristekuvan alt-teksti jätetään tavallisesti tyhjäksi. Noudata Googlen kuvahaun optimointiohjeita täyttämättä kumpaakaan kenttää avainsanalistoilla.

Jos lisäosa optimoi kuvan uudelleen lataamisen jälkeen, vertaa lopulta kävijälle toimitettua versiota. Toistuva häviöllinen pakkaus voi vaurioittaa hienoja tekstuureja ja tekstiä, vaikka jokainen yksittäinen laatuasetus vaikuttaisi kohtuulliselta.

Tarkista Elementorin kuvien suorituskykyasetukset

Elementorin nykyisen ohjeen mukaan asetukset löytyvät WordPressin hallinnasta kohdasta Elementor → Editor → Settings → Performance. Vanhemmissa asennuksissa valikkorakenne voi poiketa tästä. Virallinen suorituskykyasetusten ohje erottaa Performance- ja Features-välilehdet toisistaan.

• Optimized Image Loading: Auttaa priorisoimaan todennäköisen LCP-kuvan ja hallitsee sivun alempana olevien kuvien viivästettyä latausta. Katso Elementorin latauksen optimointiohje. Varmista todellinen toiminta etenkin, jos muutkin lisäosat muuttavat kuvien HTML-merkintää.
• Lazy Load Background Images: Viivästää taustakuvien latausta lukuun ottamatta ensimmäistä kuvaa Elementorin dokumentoidun toiminnan mukaan. Tarkista, että oman sivusi alussa näkyvä tausta latautuu ajoissa.

Tee yksi muutos kerrallaan, tyhjennä asiaankuuluvat välimuistit ja testaa julkaistu sivu. Asetukset vaikuttavat lataustapaan, mutta eivät korvaa sopivien mittojen valintaa tai tiedostojen pakkaamista.

Tarkista julkaistu sivu

Aloita ulkoasusta kirjautumatta sivustolle: onko rajaus oikea, erottuuko teksti ja pysyykö asettelu vakaana kuvien ilmestyessä? Tutki ladattavia tiedostoja tarkemmin, jos kuva on yhä suuri, sumea tai hidas.

1. Avaa julkaistu sivu yksityisessä ikkunassa. Avaa selaimen kehittäjätyökalut, valitse Network-välilehti, rajaa näkymä Img-suodattimella ja ota Disable cache käyttöön työkalujen ollessa auki.
2. Lataa sivu uudelleen ja järjestä kuvapyynnöt siirretyn tiedostokoon mukaan. Aloita suurimmista sekä heti näkyvistä kuvista.
3. Selvitä kuvan todelliset mitat pyynnön osoitteesta ja esikatselusta. Vertaa niitä näyttökokoon ja näytön pikselitiheyteen. 2400 pikselin tiedosto 350 pikselin kortissa kannattaa tutkia, kun taas 700 pikselin versio voi sopia 2×-näytölle.
4. Tarkista HTML-kuvan srcset- ja sizes-attribuutit, jos selain valitsee jatkuvasti liian suuren version. Katso lataus- ja prioriteettiattribuutit varsinaisesta <img>-elementistä, älä vain sitä ympäröivästä kuvaelementin rakenteesta.
5. Vaihda mobiiliemulointiin ennen uutta latausta ja tarkista pyydetyt tausta- ja sisältökuvaversiot. Varmista ulkoasu myös oikealla puhelimella.

Aja PageSpeed Insights ennen muutosta ja sen jälkeen mahdollisimman samanlaisissa oloissa. Katso LCP-elementtiä ja kuviin liittyviä havaintoja yksittäisen kokonaispistemäärän sijaan. Pienen pääkuvan myöhäinen lataus on eri ongelma kuin suuren kuvan ajoissa alkava lataus.

Jos vanha kuva näkyy edelleen, tarkista ensin elementin tiedostovalinta ja eri näkymien asetukset. Tyhjennä sitten sivun, optimoinnin ja CDN:n välimuistit tarpeen mukaan. Jos vanha taustakuvan osoite tulee Elementorin CSS:stä, muodosta tiedostot tai CSS uudelleen Tools-asetuksista; toiminnon nimi vaihtelee versioittain. CSS:n uudelleenmuodostus ei luo puuttuvia WordPressin pikkukuvakokoja.

Esimerkki: kuva tekstipalstan vieressä

Oletetaan, että tiimikuva on aluksi 4800 × 3200 pikseliä ja 5,4 Mt. Sen sarake on tietokoneella noin 550 pikseliä leveä, mutta tabletin näkymässä kuva siirtyy koko rivin levyiseksi.

1. Tarkista levein käyttöpaikka: Jos kuva näkyy tabletilla noin 700 pikselin levyisenä, käytä sitä vertailun lähtökohtana kapeamman tietokonesarakkeen sijaan.
2. Valmistele rajaus ja mitat: Jos 4:3-rajaus sopii sommitteluun, vertaa kokoja 1000 × 750 ja 1400 × 1050. Tarkista kasvot ja muut tärkeät yksityiskohdat lopullisessa näyttökoossa.
3. Vertaa pakkausta: Kokeile WebP:tä keskitason laatuasetuksella ja tarkista tulos. Kirjaa todellinen tiedostokoko: yksityiskohtainen ryhmäkuva voi vaatia enemmän dataa kuin samoihin mittoihin tallennettu yksinkertainen henkilökuva.
4. Määritä kuvaelementin asetukset: Lataa valittu versio, lisää sopiva alt-teksti ja valitse Image Resolution. 1400 pikselin kuvalle voidaan tarvita Full, jotta suurempi versio on käytettävissä. Tarkista sivun tarjoamat responsiiviset kuvaversiot.
5. Varmista lopputulos: Tarkista tietokoneen ja mobiilin latauspyynnöt, terävyys ja asettelun vakaus. Alempana sivulla olevalle kuvalle viivästetty lataus voi sopia. LCP-kuvan tulee latautua ajoissa.

Yleisten Elementor-kuvaongelmien ratkaiseminen

Miksi kuva näyttää sumealta?

Tarkista kuvaelementin Image Resolution, lähdekuvan mitat ja selaimen todella valitsema tiedosto. 300 pikselin pikkukuva pehmenee venytettäessä 600 pikselin sarakkeeseen, mutta suurempi tarkkuusasetus ei palauta alkuperäisestä puuttuvaa yksityiskohtaa. Tarkista myös pakkaus ja rajaukset, joissa pieni osa alkuperäisestä suurennetaan. Lue sumeiden verkkokuvien opas.

Miksi mobiilin taustakuva puuttuu tai rajautuu huonosti?

Tarkista mobiilinäkymän kuva, periytyvät asetukset, näkyvyysvalinnat ja säilön korkeus. Cover rajaa kuvan täyttämään säilön. Jos kohde katoaa, muuta sijaintia tai tee sopivampi rajaus. Mittasuhteiden ei pitäisi vääristyä. Jos tiedosto ei lataudu lainkaan, tarkista latauspyynnön virhe ennen rajauksen muuttamista.

Miksi kuvamuutokset eivät näy julkaistulla sivulla?

Varmista, että päivitit oikean kuvaelementin, sivupohjan ja näkymän. Tarkista julkaistun kuvan osoite, jotta erotat vanhan tiedoston vanhoista tyyleistä. Tyhjennä tarvittavat välimuistit ja muodosta Elementorin CSS uudelleen, jos se viittaa edelleen vanhaan taustaan. Toistuva lataaminen mediakirjastoon ilman syyn selvittämistä voi jättää turhia kopioita.

Usein kysytyt kysymykset

Pitääkö Full-tarkkuutta aina välttää?

Ei. Full voi sopia kuvaan, jonka olet valmistellut kyseistä käyttöpaikkaa varten. Tarkista lähdekuvan mitat, saatavilla olevat kuvaversiot ja ladattava tiedosto. Full ei tarkoita sarakkeen täyttämistä, sillä se säädetään asetteluasetuksilla.

Pakkaako Elementor ladatut kuvat automaattisesti?

Sivunrakentajan tarkkuus- ja latausasetukset eivät pakkaa palvelimelle lataamaasi tiedostoa. WordPress muodostaa kuvakokoja ja käyttää tiedostomuotokohtaisia laatuasetuksia, mutta se ei takaa optimoitua mediakirjastoa. Elementor tarjoaa myös erillisen Image Optimizer -tuotteen, ja palveluntarjoaja tai lisäosat voivat käsitellä kuvia vastaavasti. Tarkista käytössä oleva järjestelmä ennen uuden lisäämistä.

Voinko ladata WebP-kuvia suoraan mediakirjastoon?

WordPress tukee WebP-latauksia. Palvelimen kuvankäsittelyn on tuettava muotoa myös pienennettyjen versioiden luomiseksi. Testaa siksi yksi tiedosto mediakirjastoon lataamisesta kuvaelementin asetuksiin ja julkaistuun sivuun ennen koko kirjaston muuntamista.

Mitkä mitat pääkuvalle kannattaa valita?

Valitse mitat pääkuvan suurimman näyttökoon ja rajauksen perusteella. Monessa tietokoneasettelussa 1600–1920 pikselin leveys on järkevä vertailun lähtökohta, mutta se ei ole Elementorin raja eikä takaa terävyyttä kaikilla näytöillä. Tarkista mobiilin erillisen rajauksen tarve ja vertaa tiedostokokoa näkyviin yksityiskohtiin.

Parantaako kuvien optimointi Google-sijoituksia?

Se voi nopeuttaa latausta ja parantaa käyttökokemusta, mutta parempia hakusijoituksia ei voida luvata. Googlen sivukokemuksen ohje kertoo Core Web Vitals -mittareiden kuuluvan sijoitusjärjestelmiin, vaikka hyvät pisteet yksin eivät takaa kärkisijoja. Aiheeseen sopivat kuvat, kuvaavat tiedostonimet ja hyödylliset alt-tekstit auttavat myös hakukoneita ymmärtämään sisältöä. Lue alt-tekstien ja tiedostonimien opas.