Kuvien optimointi verkkosivuille: oikeat koot, WebP-muunnos ja miksi puhelimen kuva on liian iso

Puhelimen kuva on noin 4000 kuvapistettä leveä, verkkosivu tarvitsee noin 2000 tai vähemmän. Tässä taulukko oikeista koosta ja tiedostokoosta paikka paikalta, työjärjestys ilman erikoisohjelmia, ja milloin kuviin ei kannata käyttää aikaa.

Lyhyt vastaus: Puhelimella otettu kuva on noin 4000 kuvapistettä leveä. Verkkosivun leveimmässä paikassa tarvitaan noin 2000 ja sisältökuvassa noin 1000. Kun kuva skaalataan oikeaan kokoon ja tallennetaan WebP-muodossa, tiedostokoko putoaa tyypillisesti murto-osaan alkuperäisestä. Alla on taulukko oikeista kokorajoista paikka paikalta.

Kuvien optimointi on pienyrityssivuston nopein yksittäinen parannus, koska kuvat ovat lähes aina sivun raskain osa ja koska korjaus ei vaadi mitään sivuston rakenteeseen koskemista. Se on myös se työ, joka jää tekemättä, koska kuvat "näyttävät hyvältä" sellaisenaan.

Näyttäminen ei ole ongelma. Ongelma on, että selain lataa täyden tiedoston riippumatta siitä, kuinka pienessä ruudussa se näytetään. Kävijä maksaa eron omalla ajallaan.

Miksi puhelimen kuva on moninkertaisesti liian iso?

Puhelimella otettu kuva on verkkosivulle moninkertaisesti liian iso, ja syy on puhtaasti matemaattinen. Tavallinen puhelinkamera tallentaa kuvan, joka on noin 4000 kuvapistettä leveä, kun verkkosivun täysleveä kuva näytetään suurimmillakin näytöillä noin 2000 kuvapisteen levyisenä. Kuvapisteiden määrä kasvaa neliöllisesti, joten kaksinkertainen leveys tarkoittaa nelinkertaista pistemäärää. Päälle tulee vielä se, että puhelimen JPEG on pakattu kevyesti laadun säilyttämiseksi, kun taas WebP pakkaa saman kuvan selvästi tiukemmin ilman että ero näkyy ruudulla. Kertoimet kertautuvat, ja käytännössä ero alkuperäisen ja oikein käsitellyn tiedoston välillä on useimmiten kymmenkertainen tai suurempi. Luku on helppo tarkistaa omista kuvistasi.

Tavallinen puhelinkamera tallentaa kuvan, joka on noin 4000 kuvapistettä leveä ja 3000 korkea. Verkkosivun täysleveä kuva näytetään suurimmillakin näytöillä noin 2000 kuvapisteen levyisenä, ja tarkkanäytöillä sekin riittää, koska kuvaa katsotaan pienemmässä fyysisessä koossa.

Kuvapisteiden määrä kasvaa neliöllisesti: 4000 leveä kuva sisältää neljä kertaa niin monta kuvapistettä kuin 2000 leveä. Kun tähän lisätään se, että puhelimen JPEG on pakattu kevyesti laadun säilyttämiseksi ja WebP pakkaa saman kuvan tiukemmin samalta näyttävänä, kertoimet kertautuvat. Käytännössä ero alkuperäisen ja oikein käsitellyn välillä on useimmiten kymmenkertainen tai suurempi.

Tarkista oma kertoimesi näin: katso yhden sivustollasi olevan kuvan tiedostokoko, käsittele se alla olevien ohjeiden mukaan ja jaa vanha koko uudella. Se luku on sinun kuvillesi todellinen, eikä siihen tarvita kenenkään tilastoa.

Mitkä ovat oikeat kuvakoot paikka paikalta?

Oikea kuvakoko riippuu siitä, missä kohtaa sivua kuva näytetään, eikä yhtä oikeaa kokoa ole. Karkea jako menee näin: yläosan täysleveä kuva tarvitsee eniten leveyttä, tekstin seassa oleva sisältökuva selvästi vähemmän, ja listassa näkyvä tuotekuva tai henkilökuva vähiten. Logo on oma tapauksensa, koska se on piirrosgrafiikkaa eikä valokuvaa. Alla oleva taulukko antaa jokaiselle käyttöpaikalle leveyden kuvapisteinä, tavoitteen tiedostokoolle ja suositellun tiedostomuodon. Tiedostokoon ylärajat ovat tavoitteita eivätkä pakkoja — mutta jos ylität ne selvästi, kuva on joko skaalattu liian isoksi tai pakattu liian kevyesti, ja kumpikin on korjattavissa minuutissa.

Logo on tässä poikkeus. Se kannattaa olla SVG-muodossa, koska se on piirrosgrafiikkaa: tiedosto on pieni ja se pysyy terävänä joka koossa. Valokuva ei koskaan kuulu SVG:ksi. Logon tiedostomuodoista on erillinen läpikäynti artikkelissa logon tiedostomuodot ja käyttöoikeudet.

Missä järjestyksessä kuvat käsitellään?

1. Rajaa ennen kuin skaalaatRajaa kuvasta pois se, mitä et näytä. Rajaaminen pienentää tiedostoa enemmän kuin mikään pakkaus ja parantaa kuvaa samalla.
2. Skaalaa taulukon leveyteenAseta leveys ja anna korkeuden seurata. Älä koskaan skaalaa ylöspäin: pienestä kuvasta ei tule tarkkaa venyttämällä.
3. Tallenna WebP-muodossaLaatuasetus 75–85 riittää valokuvalle. Vertaa lopputulosta alkuperäiseen täydessä koossa: jos et näe eroa, pakkaa vielä hieman lisää.
4. Nimeä tiedosto kuvaavastikampaamo-helsinki-leikkaus.webp kertoo hakukoneelle enemmän kuin IMG_4821.webp. Käytä pieniä kirjaimia ja väliviivoja, älä ääkkösiä tai välilyöntejä.
5. Kirjoita alt-tekstiLyhyt kuvaus siitä, mitä kuvassa on. Se on saavutettavuusvaatimus ja samalla hakukonesignaali. Koristekuvalle jätetään alt tyhjäksi tarkoituksella.
6. Määritä leveys ja korkeus koodissaNäin selain varaa tilan ennen latausta eikä sisältö hyppää. Tämä on suoraan CLS-mittariin vaikuttava korjaus.
7. Laita näkymän ulkopuoliset kuvat viivästettyyn lataukseenYläosan pääkuvaa ei viivästetä, koska se on juuri se, jota mitataan. Kaikki sen alapuolinen viivästetään.

Milloin WebP ja milloin jokin muu?

WebP on nykyään turvallinen oletusmuoto verkkosivujen kuville: kaikki yleiset selaimet tukevat sitä ja se pakkaa sekä valokuvia että piirroksia paremmin kuin vanhat muodot. Poikkeuksia on kolme, ja ne kannattaa muistaa. Piirrosgrafiikka, logot ja kuvakkeet kuuluvat SVG-muotoon, koska se on vektoria ja pysyy tarkkana kaikissa koossa. Läpinäkyvyyttä vaativa yksinkertainen grafiikka voi olla PNG, jos SVG ei ole saatavilla — tosin WebP osaa läpinäkyvyyden sekin. Sosiaalisen median jakokuva kannattaa tallentaa JPEG-muodossa, koska osa alustoista käsittelee sen luotettavimmin esikatselussa. AVIF pakkaa vielä WebP:tä tiukemmin, ja jos alustasi tekee sen automaattisesti, sen voi ottaa käyttöön.

Piirrosgrafiikka, logot ja kuvakkeet: SVG. Se on vektoria, joten se on pieni ja tarkka kaikissa koossa, ja sitä voi värittää tyyleillä.

Läpinäkyvyyttä vaativa yksinkertainen grafiikka, jos SVG ei ole saatavilla: PNG. WebP osaa läpinäkyvyyden sekin, joten PNG jää harvinaiseksi.

Jakokuva sosiaaliseen mediaan: käytä JPEG-muotoa, koska osa alustoista käsittelee sen luotettavimmin esikatselussa. Tämä on ainoa paikka, jossa vanha muoto on edelleen turvallisin valinta.

AVIF pakkaa vielä WebP:tä tiukemmin ja tuki on laaja, mutta sen tuottaminen vaatii uudempia työkaluja ja pakkaus on hitaampaa. Jos sivustoalustasi tekee sen automaattisesti, ota käyttöön; muuten WebP riittää hyvin.

Miksi kuvien latausjärjestys ratkaisee?

Sivun mitattu latausaika ei riipu vain kuvien koosta vaan myös siitä, missä järjestyksessä ne latautuvat. Selain aloittaa siitä, mitä se löytää ensin, eikä se tiedä mikä on tärkeää ellei sille kerrota. Käytännön sääntö on yksinkertainen: yläosan pääkuva ladataan ensimmäisenä ja korkealla prioriteetilla, koska juuri se on se suurin sisältö, jota LCP-mittari seuraa, ja kaikki sen alapuolinen ladataan viivästetysti. Jos viivästät myös pääkuvan, mittarisi heikkenee vaikka teit muuten kaiken oikein — se on yleisin tapa pilata muuten hyvä optimointi. Toinen järjestykseen liittyvä sudenkuoppa on kuvakaruselli, joka lataa usein kaikki kuvansa heti, vaikka kävijä näkee niistä vain ensimmäisen.

Käytännön sääntö on yksinkertainen. Yläosan pääkuva ladataan ensimmäisenä ja korkealla prioriteetilla, koska juuri se on se suurin sisältö, jota LCP-mittari seuraa. Kaikki sen alapuolinen ladataan viivästetysti. Jos viivästät myös pääkuvan, mittarisi heikkenee vaikka teit muuten kaiken oikein — tämä on yleisin tapa pilata muuten hyvä optimointi.

Toinen järjestykseen liittyvä asia on kuvakaruselli. Karuselli lataa usein kaikki kuvansa heti, vaikka kävijä näkee niistä ensimmäisen. Jos sivullasi on karuselli, tarkista mitä se lataa, ja harkitse sen korvaamista yhdellä hyvällä kuvalla. Karusellin toinen ja kolmas kuva jäävät useimmiten näkemättä kokonaan.

Mistä kuvat kannattaa hankkia?

Kuvalähde vaikuttaa sekä tiedostokokoon että siihen, saako kuvaa ylipäätään käyttää, ja tavallisia lähteitä on kolme. Omat kuvat ovat paras vaihtoehto, koska ne näyttävät sinun yritykseltäsi eivätkä keneltäkään muulta; puhelimen kamera riittää, kun valo on kunnossa ja kuva otetaan vaakasuuntaisena. Kuvapankkikuvat ovat nopeita mutta toistuvat kilpailijoiden sivuilla, ja niiden kohdalla on tarkistettava lisenssi ja kaupallisen käytön ehdot sekä säilytettävä lisenssitodistus talteen. Tekoälyllä tehdyissä kuvissa on sama yleisyyden riski kuin kuvapankissa: ne toimivat taustagrafiikkana ja kuvituksena mutteivät referenssikuvina. Generoitua kuvaa ei esitetä oikeana kuvana tiloistasi tai työstäsi.

Omat kuvat ovat paras vaihtoehto, koska ne näyttävät sinun yritykseltäsi eivätkä keneltäkään muulta. Puhelimen kamera riittää, kun valo on kunnossa: kuvaa ikkunan ääressä päivänvalossa, älä salamalla. Ota kuva vaakasuuntaisena, koska verkkosivujen paikat ovat useimmiten leveitä.

Kuvapankkikuvat ovat nopeita mutta ne toistuvat kilpailijoiden sivuilla. Jos käytät niitä, tarkista lisenssi ja se, saako kuvaa käyttää kaupallisesti ja ilman tekijänmaininta. Tallenna lisenssitodistus samaan kansioon kuvan kanssa — muutaman vuoden päästä et muista mistä kuva tuli.

Tekoälyllä tehdyt kuvat ovat kolmas vaihtoehto ja niissä on sama riski kuin kuvapankissa: ne näyttävät yleisiltä. Ne toimivat parhaiten taustagrafiikkana tai kuvituksena, eivät referenssikuvina. Älä esitä generoitua kuvaa oikeana kuvana tiloistasi tai työstäsi.

Miksi sama kuva tarvitaan useassa koossa?

Puhelin ja työpöytä eivät tarvitse samaa kuvaa, ja siksi samasta kuvasta tarjotaan selaimelle useampi versio, joista se valitsee sopivan. Käytännössä versioita on kolme: yksi noin 800 kuvapistettä leveä puhelimelle, yksi noin 1200 tabletille ja yksi noin 2000 työpöydälle. Hyöty näkyy erityisesti mobiilissa, jossa kävijä lataisi muuten työpöytäkokoisen tiedoston pienelle näytölle. Useimmat sivustoalustat tekevät versiot automaattisesti, kun kuva ladataan mediakirjastoon, mutta kaksi asiaa kannattaa tarkistaa: syntyvätkö versiot myös WebP-muodossa, ja tehdäänkö suurin versio alkuperäisestä 4000 kuvapisteen tiedostosta. Jälkimmäinen kasvattaa kirjastoa turhaan, joten kuva kannattaa skaalata ennen latausta eikä sen jälkeen.

Useimmat sivustoalustat tekevät tämän automaattisesti, kun lataat kuvan mediakirjastoon. Kaksi asiaa kannattaa silti tarkistaa. Ensimmäinen: tekeekö alusta versiot myös WebP-muodossa vai vain alkuperäisessä. Toinen: syntyykö suurin versio alkuperäisestä 4000 kuvapisteen tiedostosta, jolloin kirjastoosi kertyy turhia jättiläisiä — skaalaa siis ennen latausta, älä sen jälkeen.

Jos sivustosi on tehty käsin, sama tehdään kuvan koodissa listaamalla versiot ja kertomalla selaimelle, kuinka leveänä kuva näytetään. Se on muutaman rivin lisäys ja se on merkittävin yksittäinen mobiilinopeuden parannus, jonka kuvilla voi tehdä.

Milloin kuvien optimointiin ei kannata käyttää aikaa?

Kuvien optimointiin ei kannata käyttää aikaa kolmessa tilanteessa. Ensimmäinen on sivusto, jossa on vain muutama kuva ja ne ovat jo kevyitä — silloin kuvat eivät ole ongelmasi, ja hidaste kannattaa etsiä muualta, tyypillisesti lisäosista tai fonteista. Toinen on lähikuukausina uusittava sivusto: kuvat käsitellään joka tapauksessa uudelleen uuden ulkoasun mittoihin, joten vanhojen optimointi menee hukkaan. Silloin kannattaa sen sijaan koota lista säilytettävistä kuvista ja hankkia niistä alkuperäiset korkearesoluutioiset versiot talteen ennen vaihtoa. Kolmas on tilanne, jossa ammattikuvaaja on jo toimittanut kuvat verkkokäyttöön optimoituina; silloin riittää tiedostokokojen tarkistus kerran.

Sivustollasi on viisi kuvaa ja ne ovat jo alle sadan kilotavun. Silloin kuvat eivät ole ongelmasi. Mittaa sivu ja etsi hidaste muualta — tyypillisesti lisäosista tai fonteista. Kolme yleisintä hidastetta käydään läpi artikkelissa verkkosivun nopeus ja myynti.

Olet uusimassa sivustoa lähikuukausina. Kuvat käsitellään uudelleen joka tapauksessa uuden ulkoasun mittoihin, joten vanhojen optimointi menee hukkaan. Tee sen sijaan lista siitä, mitkä kuvat säilytetään, ja hanki niistä alkuperäiset korkearesoluutioiset versiot talteen ennen vaihtoa.

Kuvasi ovat ammattikuvaajan ottamia ja hän toimitti ne verkkokäyttöön optimoituna. Tarkista tiedostokoot kerran ja jätä asia siihen. Jos hän toimitti vain painokelpoiset versiot, pyydä verkkoversiot — se kuuluu tyypillisesti toimitukseen. Uuden sivuston kokonaisuus on kuvattu sivulla verkkosivut yritykselle ja hinnat lukevat hinnastossa.

Miten teet kolmen tunnin kuvasiivouksen?

Vuosia pystyssä olleelle sivustolle kannattaa tehdä rajattu kuvasiivous eikä koko mediakirjaston läpikäyntiä. Siivous jakautuu kolmeen kierrokseen ja vie yhteensä noin kolme tuntia. Ensimmäinen kierros koskee neljää sivua: etusivua, tärkeintä palvelusivua, yhteystietoja ja sitä sivua, jolle tulee eniten hakukoneliikennettä — nämä neljä kattavat useimmiten suurimman osan kävijöistä, ja niiltä korjataan vain selvästi ylisuuret tiedostot. Toinen kierros on mediakirjaston siivous eli käyttämättömien kuvien poisto, mikä ei nopeuta sivustoa mutta pienentää varmuuskopiota ja helpottaa oikean kuvan löytämistä. Kolmas kierros on ennaltaehkäisy: sääntö, ettei yksikään kuva mene sivustolle suoraan puhelimesta käsittelemättä.

Aloita neljästä sivusta: etusivu, tärkein palvelusivu, yhteystiedot ja se sivu, jolle tulee eniten hakukoneliikennettä. Nämä neljä kattavat useimmiten suurimman osan kävijöistä. Käy niiden kuvat läpi kehittäjätyökaluilla, korjaa kaikki yli 300 kilotavun tiedostot ja jätä loput rauhaan.

Toinen kierros koskee mediakirjastoa. Poista kuvat, jotka eivät ole käytössä millään sivulla. Ne eivät hidasta sivustoa, mutta ne kasvattavat varmuuskopion kokoa ja tekevät oikean kuvan löytämisestä vaikeaa. Useimmissa alustoissa on työkalu, joka listaa käyttämättömät liitteet.

Kolmas kierros on ennaltaehkäisy: sovi itsesi kanssa sääntö, että yksikään kuva ei mene sivustolle suoraan puhelimesta. Kuva käsitellään aina ensin taulukon mittoihin. Se on kymmenen sekunnin lisätyö kuvaa kohti ja se estää koko ongelman uusiutumisen.

Usein kysyttyä

Lue seuraavaksi

• GDPR-tarkistuslista verkkosivuille: kahdeksan kohtaa, jotka tarkistat itse selaimella
• Google-yritysprofiilin optimointi: seitsemän kenttää, jotka vaikuttavat karttanäkyvyyteen
• Yrityssovelluksen kehittämisen hinta
• WordPress-ylläpidon hinta ja mitä siihen oikeasti kuuluu
• WordPressin hakukoneoptimointi: neljä asetusta, jotka ratkaisevat teknisen puolen
• Tietoturvapoikkeaman ilmoitusvelvollisuus: 72 tuntia, päätöspuu ja oman lokin runko

Lue myös: Android-sovellus Google Playhin · yrityksen tietoturva · varmuuskopiointi · hakukoneoptimoinnin hinta · Verkkokaupan perustaminen: hinta, vaihtoehdot ja todellinen kululista · Tietosuojaseloste-malli pienyritykselle · Liiketoimintasuunnitelman pohja ja laskelmat · IT-konsultointi pienyritykselle