Kysy keneltä tahansa verkkokehittäjältä, mikä hidastaa useimpia verkkosivustoja, ja vastaus on lähes aina sama. Kuvat. Kuvien optimointi verkkoon tarkoittaa kuvatiedostojen koon pienentämistä menettämättä visuaalista laatua, jotta sivut latautuvat nopeammin näyttämättä huonommilta. Yksi pakkaamaton valokuva voi olla useita megatavuja. Sama kuva oikein muotoiltuna ja pakattuna voi olla alle 100 kilotavua ilman näkyvää eroa näytöllä. Tässä artikkelissa käydään läpi oikeat tiedostomuodot, miten pakkaus toimii, milloin kuvan kokoa kannattaa muuttaa ennen lataamista, miten lazy loading liittyy asiaan ja mikä tekee suurimman käytännön eron sivusi latausnopeuteen.
Kuvat ovat suurin yksittäinen sivun painoon vaikuttava tekijä useimmilla verkkosivustoilla. Sivu, jolla on viisi optimoimatonta valokuvaa, voi painaa kymmenen kertaa enemmän kuin tarpeen. Tuo paino näkyy suoraan hitaampana latauksena, huonompana Largest Contentful Paint -arvona ja kävijöinä, jotka lähtevät ennen kuin sivu on piirtynyt valmiiksi. Taustaa sille, miksi latausnopeus vaikuttaa liiketoimintaasi ja hakusijoituksiisi, löydät artikkelista miksi verkkosivuston nopeus on tärkeää.
Miksi kuvat hidastavat verkkosivustoja?
Kun kävijä avaa sivun, selain lataa jokaisen sen resurssin ennen sivun näyttämistä. Kuvat ovat yleensä näistä suurimpia. Jokainen kuva vaatii oman pyyntönsä, ja selaimen on odotettava pyyntöjen valmistumista ennen kuin se voi piirtää sisällön kokonaan.
Miten kuvat vaikuttavat latausmittareihin
- Kuvat vaikuttavat suoraan Largest Contentful Paint -arvoon (LCP). Jos sivun suurin näkyvä elementti on pääkuva, LCP on aika, joka kuvan latautumiseen kokonaan kuluu
- Optimoimattomat kuvat lisäävät sivun kokonaispainoa, mikä viivästyttää jokaista muuta mittaria latausaikajanalla
- Mobiiliyhteyksillä vaikutus vahvistuu. 3 MB:n pääkuva, joka latautuu kahdessa sekunnissa laajakaistalla, voi kestää kahdeksan sekuntia tai enemmän keskimääräisessä mobiiliverkossa
- Useat suuret kuvat pahentavat ongelmaa. Galleria tai tuotesivu, jolla on kymmenen pakkaamatonta valokuvaa, voi olla vaikea käyttää hitaammilla yhteyksillä
Mitä tiedostomuotoja verkkokuville kannattaa käyttää?
JPEG
- Valokuvien ja kuvien vakiomuoto, joissa on liukuvärejä ja paljon värejä
- Tukee häviöllistä pakkausta, mikä tarkoittaa, että osa kuvadatasta poistetaan pysyvästi tiedostokoon pienentämiseksi
- Kaikki selaimet ja laitteet tukevat sitä poikkeuksetta
- Laatuasetus 75 - 85 tuottaa tiedostoja, jotka ovat 60 - 80 prosenttia alkuperäistä pienempiä ilman näkyvää laadun heikkenemistä useimmissa valokuvissa
PNG
- Muoto kuville, jotka tarvitsevat läpinäkyvän taustan, mukaan lukien logot, kuvakkeet ja tasaisia väripintoja sisältävät grafiikat
- Käyttää häviötöntä pakkausta, mikä tarkoittaa, että dataa ei poisteta ja kuva säilyy täsmälleen sellaisena kuin se on
- PNG-tiedostot ovat valokuvissa huomattavasti suurempia kuin JPEG. Käytä PNG:tä vain, kun läpinäkyvyys on tarpeen; käytä valokuville JPEGiä tai WebP:tä
WebP
- Moderni muoto, joka on kehitetty korvaamaan sekä JPEG että PNG paremmalla pakkauksella samalla laadulla
- WebP-kuvat ovat tyypillisesti 25 - 35 prosenttia pienempiä kuin vastaavat JPEG-tiedostot
- Tukee sekä häviöllistä että häviötöntä pakkausta ja läpinäkyvyyttä
- Kaikki suuret selaimet tukevat sitä. Jos verkkosivurakentimesi ei muunna kuvia automaattisesti WebP:ksi, muunna ne itse ennen lataamista
AVIF
- Uudempi muoto, joka pakkaa paremmin kuin WebP, usein 50 prosenttia pienemmäksi kuin JPEG vertailukelpoisella laadulla
- Selaintuki kasvaa mutta ei ole vielä yleinen. Käytä AVIFia siellä, missä se on tuettu, ja automaattista varavaihtoehtoa WebP:hen tai JPEGiin selaimille, jotka eivät tue sitä
Mitä kuvan pakkaus on ja miten se toimii?
Pakkaus pienentää tiedostokokoa poistamalla tai yksinkertaistamalla kuvadataa. Tyyppejä on kaksi, ja ero ratkaisee, milloin kumpaakin käytetään.
Häviöllinen pakkaus
- Poistaa osan kuvadatasta pysyvästi pienemmän tiedostokoon saavuttamiseksi
- Poistettava data valitaan sen mukaan, mitä ihmissilmä huomaa vähiten, tyypillisesti hienovaraisia värivaihteluita ja hienoja pintakuvioita
- Käytössä JPEGissä ja häviöllisessä WebP:ssä
- Laatuasetus 75 - 85 tuottaa dramaattisesti pienempiä tiedostoja, joiden kuvat näyttävät useimmissa käytännön tarkoituksissa identtisiltä pakkaamattoman alkuperäisen kanssa
- Vältä jo pakatun JPEGin tallentamista uudelleen alemmalla laatuasetuksella. Se kasaa pakkausartefakteja ja heikentää kuvaa jokaisella tallennuksella
Häviötön pakkaus
- Pienentää tiedostokokoa poistamatta kuvadataa lainkaan. Jokainen pikseli säilyy täsmälleen
- Käytössä PNG:ssä ja häviöttömässä WebP:ssä
- Pienemmät tiedostokokosäästöt kuin häviöllisessä pakkauksessa, mutta ilman minkäänlaista laadun heikkenemistä
- Sopii parhaiten tuotekaavioihin, kuvakaappauksiin, tekstipainotteisiin grafiikoihin tai mihin tahansa kuvaan, jossa pakkausartefaktit olisivat näkyviä tai hyväksymättömiä
Pitääkö kuvien kokoa muuttaa ennen lataamista?
Tiedostokoko ja pikselimitat ovat erillisiä asioita, ja molemmat vaikuttavat latausnopeuteen. 4 000 pikselin levyisen kuvan pakkaamisesta ei ole apua, jos selaimen tarvitsee näyttää se vain 800 pikselin leveydellä. Selain lataa koko 4 000 pikselin kuvan ja skaalaa sen pienemmäksi näkymässä, mikä tuhlaa kaistaa ja hidastaa sivua jokaiselle kävijälle.
Miten mitoitat kuvat oikein ennen lataamista
- Selvitä suurin leveys, jolla kuva koskaan näytetään. Koko leveyden työpöytäkuville se on tyypillisesti 1 440 - 1 920 pikseliä
- Palstoissa tai korteissa olevilla kuvilla näytettävä leveys on pienempi, usein 400 - 800 pikseliä
- Muuta kuvan koko suurimpaan näyttökokoonsa ennen lataamista
- Retina- ja tiheäpikselisille näytöille kerro näyttöleveys luvulla 1,5 - 2. 400 pikselin levyinen korttikuva hyötyy 600 - 800 pikselin levyisestä lähdetiedostosta näyttääkseen terävältä retina-näytöillä
Mitä lazy loading on ja miten se vaikuttaa kuvien optimointiin?
Lazy loading viivästyttää kuvien latausta, jotka eivät ole vielä näkyvissä näkymässä. Sen sijaan että jokainen sivun kuva ladattaisiin kerralla, selain lataa kuvat vasta, kun kävijät vierittävät niiden lähelle. Sivuilla, joilla on paljon kuvia, tämä pienentää alkuvaiheen sivun painoa merkittävästi ja parantaa Time to Interactive -arvoa vierittämättä näkyvälle sisällölle.
- Kaikki suuret selaimet tukevat lazy loadingia natiivisti kuvatagien
loading="lazy"-attribuutilla - Älä käytä lazy loadingia ilman vierittämistä näkyvillä kuville. Pääkuvan ja kaiken vierittämättä näkyvän sisällön pitäisi latautua heti
- Käytä lazy loadingia kaikkiin kuviin ilman vierittämistä näkymättömällä alueella, mukaan lukien tuotegalleriat, blogin pikkukuvat ja kuvapainotteiset osiot sivun alempana
Täydellisen läpikäynnin siitä, miten lazy loading toimii ja milloin sitä käytetään, löydät artikkelista mitä lazy loading on ja miten se toimii.
Mitä responsiiviset kuvat ovat ja miksi niillä on merkitystä?
Responsiivinen kuva on sellainen, joka tarjoaa eri kokoisen tiedoston kävijän näytön koon mukaan. Sen sijaan että jokaiselle laitteelle lähetettäisiin 1 920 pikselin kuva, myös kävijälle, jolla on 375 pikselin levyinen mobiilinäyttö, responsiiviset kuvat antavat selaimen pyytää vain tarvitsemansa.
Miten responsiiviset kuvat lyhentävät mobiilin latausaikaa
- Mobiilikävijä saa kuvasta 400 pikselin version koko työpöytätiedoston sijaan, mikä pienentää latauskokoa dramaattisesti
- Responsiiviset kuvat käyttävät
srcset-attribuuttia määrittelemään useita lähdetiedostoja eri leveyksillä, jotta selain voi valita sopivan - Verkkosivurakentimet, jotka hoitavat tämän automaattisesti, säästävät sinut useiden kuvakokojen luomiselta käsin
- Responsiiviset kuvat parantavat suoraan Core Web Vitals -mittareita mobiilissa, jossa kuvien optimoinnilla on suurin vaikutus LCP:hen
Läpikäynnin Core Web Vitalsista ja siitä, miten LCP pisteytetään, löydät artikkelista mitä Core Web Vitals ovat.
Miten optimoit kuvat vaihe vaiheelta?
Ennen lataamista
- Muuta kuvan koko oikeisiin näyttömittoihin
- Valitse oikea muoto: WebP valokuville ja yleisgrafiikalle, PNG vain kun läpinäkyvyys on tarpeen
- Pakkaa käyttäen laatuasetusta 75 - 85 häviöllisille muodoille
- Tarkista tiedostokoko. Tyypillisen verkkokuvan pitäisi olla alle 200 kt. Työpöydän pääkuvat voivat olla 400 kt:hen asti; kaikki sen yli kannattaa tarkistaa uudelleen ennen lataamista
Latauksen jälkeen
- Lisää kuvaava alt-teksti jokaiseen kuvaan. Se on tärkeää saavutettavuudelle ja edistää hakunäkyvyyttä. Täydellisen oppaan löydät artikkelista miten käytät kuvia verkkosivustollasi
- Käytä lazy loadingia kaikkiin kuviin ilman vierittämistä näkymättömällä alueella
- Aja sivun nopeustesti uusien kuvien lisäämisen jälkeen. Yksi optimoimaton kuva voi kumota kaikki muut sivun nopeusparannukset
Jatkuvasti
- Tarkista uudet kuvat ennen jokaista latausta. Optimoimattomat kuvat pääsevät helposti läpi, kun työskentelee nopeasti
- Aja nopeustesti aina, kun merkittävä erä uusia kuvia on julkaistu
- Käy vanhemmat kuvat läpi, jos sivusto on tehty ennen nykyisiä optimointikäytäntöjä. Vanhat kuvakirjastot ovat yleinen ja huomaamatta jäävä nopeusongelmien lähde
Oppaan koko sivustosi suorituskyvyn testaamiseen löydät artikkelista miten testaat verkkosivustosi nopeuden.
Miten WEMASY hoitaa kuvien optimoinnin
WEMASYn Websitebuilder pakkaa ja muuntaa kuvat automaattisesti, kun ne ladataan. Kuvat tarjoillaan WebP-muodossa, kun selain tukee sitä, ja varamuodoilla vanhemmille laitteille. Latauksen yhteydessä luodaan useita kokoja, jotta mobiilikävijät saavat sopivan kokoiset tiedostot ilman manuaalista määritystä.
Lazy loading on oletuksena käytössä kaikilla WEMASYlla rakennetuilla sivuilla ilman vierittämistä näkymättömän alueen kuvissa. Alt-tekstin voi lisätä alustan kuvaeditorissa. Sivun nopeuspisteet, LCP mukaan lukien, näkyvät WEMASYn analytiikkapaneelissa, ja kuviin liittyvät ongelmat merkitään sivukohtaisesti täsmällisten suositusten kera.
Katso, mitä kaikkea mukana on, WEMASYn Websitebuilderista, tai vertaile pakettivaihtoehtoja hinnastosta.
Usein kysytyt kysymykset
Mitä kuvien optimointi verkkoon on?
Kuvien optimointi verkkoon on prosessi, jossa kuvan tiedostokokoa pienennetään säilyttäen visuaalinen laatu riittävänä näytöllä katsottaessa. Siihen kuuluu oikean tiedostomuodon valinta, kuvan pakkaaminen sopivalle laatutasolle, koon muuttaminen todellisiin näyttömittoihin sekä sellaisten tekniikoiden kuin lazy loadingin ja responsiivisten kuvien käyttö, jotta kävijät lataavat vain sen tiedostoversion, jota heidän laitteensa ja yhteytensä tarvitsevat. WEMASYn Websitebuilderilla voit tehdä tämän suoraan omalla verkkosivustollasi.
Mikä on paras kuvamuoto verkkosivustolle?
WebP on paras muoto useimmille verkkokuville. Se pakkaa merkittävästi paremmin kuin JPEG vertailukelpoisella visuaalisella laadulla, tukee läpinäkyvyyttä kuten PNG ja kaikki suuret selaimet tukevat sitä. Kuville, jotka tarvitsevat läpinäkyvän taustan ja pikselintarkkuuden, PNG on oikea valinta. AVIF pakkaa vielä paremmin kuin WebP, mutta sen selaintuki on rajallisempi ja se toimii parhaiten automaattisen varamuodon kanssa.
Kuinka paljon kuvan pakkaus voi pienentää tiedostokokoa?
Häviöllinen pakkaus laatuasetuksella 75 - 85 pienentää JPEG-tiedoston kokoa tyypillisesti 60 - 80 prosenttia ilman näkyvää laatueroa useimmissa valokuvissa. JPEGistä WebP:hen muuntaminen samalla laatutasolla pienentää tiedostokokoa vielä 25 - 35 prosenttia. Kuva, joka alkaa 4 MB:n kokoisena, voidaan usein pienentää alle 150 kt:hen oikean koon muuttamisen, muodon muunnoksen ja pakkausasetusten yhdistelmällä.
Vaikuttaako kuvien optimointi SEO:hon?
Kyllä. Optimoimattomat kuvat ovat yksi yleisimmistä syistä hitaaseen Largest Contentful Paint -arvoon, joka on Core Web Vital ja jota hakukoneet käyttävät sijoitussignaalina. Sivut, joilla on suuria pakkaamattomia kuvia, saavat usein huonot LCP-pisteet verrattuna sivuihin, joilla on sama sisältö optimoidussa muodossa. Lisäksi kuvien kuvaava alt-teksti edistää kuvahaun näkyvyyttä ja sivun yleistä saavutettavuutta.
Pitäisikö lazy loadingia käyttää kaikkiin kuviin?
Ei. Lazy loadingia pitäisi käyttää vain kuviin, jotka näkyvät ilman vierittämistä näkymättömällä alueella, eli sisältöön, joka ei ole näkyvissä sivun avautuessa. Kuvien ilman vierittämistä näkyvällä alueella, pääkuva tai muu näkyvä visuaali sivun yläosassa mukaan lukien, pitäisi latautua heti. Lazy loadingin käyttö ilman vierittämistä näkyvillä kuvilla viivästyttää LCP:tä, mikä heikentää Core Web Vitals -pisteitä ja kävijöiden kokemusta.
Kuinka suuria verkkosivuston kuvien pitäisi olla?
Tyypillisen verkkokuvan pitäisi olla alle 200 kt. Työpöydän pääkuvat ja koko leveyden kuvat voivat olla jopa 400 kt ilman merkittävää vaikutusta latausaikaan, jos ne ovat WebP-muodossa ja pakattu oikein. Korteissa, pikkukuvissa ja pienemmissä säiliöissä käytettävät kuvat pitäisi mitoittaa todelliseen näyttöleveyteensä. 1 920 pikselin kuvan tarjoaminen 400 pikselin säiliössä tuhlaa kaistaa jokaiselta kävijältä jokaisella laitteella.