Kuvien optimointi
Kuvien optimointi on prosessi, jossa kuvien tiedostokoot pienennetään ja ne toimitetaan tehokkaasti ilman näkyvää laatuhäviötä, mikä parantaa sivunopeutta ja käyttäjäkokemusta.
Kuvat muodostavat tyypillisesti 50–70 % verkkosivun kokonaistiedostokokoista, joten kuvien optimointi on yksi suurinta vaikutusta tuottavista suorituskyvyn parannuksista. Tavoitteena on toimittaa pienin mahdollinen tiedostokoko, joka näyttää hyvältä käyttäjän laitteella ja näytöllä. Nykyajan kuvien optimointi sisältää useita tekniikoita.
Responsiiviset kuvat tarjoavat eri kokoisia versioita käyttäjän näytön mukaan (puhelimelle ei tarvitse 4K-kuvaa). Liska lataus (lazy loading) viivästyttää kuvien lataamista, kun ne ovat lähellä vieritysnäkyvyyttä. Pakkaus pienentää tiedostokoa poistamalla tarpeetonta dataa.
Käytännössä
- Verkkokauppa muutti 10 000 tuotekuvaa JPEG-muodosta WebP-muotoon ja vähensi kuvien kaistanleveyden kulutusta 45 %, säästäen 500 dollaria kuukaudessa pelkästään CDN-kuluissa
- Kiinteistösivusto otti käyttöön responsiiviset kuvat, tarjoamalla mobiiliversiossa 400 px leveitä kuvia sen sijaan, että olisi ladattu 2400 px:n työpöytäversioita, mikä lyhensi mobiilin sivun latausaikaa 4 sekunnilla
- Matkablogi pienensi etusivunsa koon 15 Mt:stä 1,2 Mt:iin käyttämällä laiskaa latausta (lazy loading) galleriakuvissa ja modernimuotoja, parantaen Google PageSpeed -pistemääräänsä 28:sta 92:een
- Uutislaitos otti käyttöön kuvien CDN:n, joka automaattisesti muuntaa ja skaalaa kuvia, eliminoimalla tarpeen toimitustiimin manuaaliselle kuvien optimoinnille ennen julkaisua
Et ole varma, miten tämä koskee sinua?
Kokenut insinööri käy läpi kohteen, hakukoneesi esiintymisen ja yhteydenottojen saannin, ja kirjoittaa kolme asiaa, jotka kannattaa korjata ensin. Pidät dokumentin joka tapauksessa.