Kuvat ovat tärkeä osa mitä tahansa verkkosivustoa tai sovellusta. Ne auttavat tekemään sisällöstä houkuttelevampaa ja visuaalisesti houkuttelevampaa.
Jos kuvia ei kuitenkaan ole optimoitu oikein, ne voivat myös hidastaa sivuston tai sovelluksen toimintaa.
Miksi kuvat kannattaa optimoida?
On muutamia syitä, miksi kuvien optimointi on tärkeää.
- Se voi auttaa parantamaan sivuston tai sovelluksen latausaikaa.
- Se voi vähentää asiakkaan ladattavan tiedon määrää, mikä voi säästää kaistanleveyskustannuksissa.
- Se voi auttaa parantamaan sivuston tai sovelluksen yleistä suorituskykyä.
Kuvien optimointi Next.js: ssä
On useita tapoja optimoida kuvia Next.js: ssä. Yksi on käyttää Image-komponenttia. Tämä komponentti optimoi kuvat automaattisesti suorituskykyä varten.
Toinen tapa optimoida kuvia on käyttää sisäänrakennettuja kuvankäsittelyominaisuuksia. Next.js voi automaattisesti muuttaa kuvien kokoa, pakata ja optimoida niiden suorituskykyä.
Lopuksi voit käyttää kolmannen osapuolen kirjastoa, kuten react-optimized-image. Tämä kirjasto tarjoaa useita kuvan optimointiominaisuuksia.
Kuvakomponentin käyttäminen
Kuvakomponentti on helpoin tapa optimoida kuvat Next.js: ssä. Voit käyttää sitä tuomalla komponentin sovelluksesta seuraava/kuva paketti.
Kun olet tuonut komponentin, voit käyttää sitä kuten mitä tahansa muuta Reactissa. Image-komponentissa on muutamia rekvisiitta, joiden avulla voit hallita, kuinka se renderöi kuvia.
tuonti Kuva alkaen 'seuraava/kuva'viedäoletuksenatoimintoOma kuva() {
palata (
<Kuva
src="/my-image.jpg"
leveys ="200"
korkeus ="200"
laatu ="100"
alt="Minun kuvani"
/>
)
}
Tässä esimerkissä Image-komponentti hahmontaa kuvan, jonka leveys on 200 pikseliä ja korkeus 200 pikseliä. Voit myös käyttää CSS- tai puitteet kuten Tailwind sovelluksesi ja kuviesi tyyliin.
Jotkut Image-komponentin vaadituista rekvisiittauksista ovat leveys, korkeus, src ja alt. src prop on käytettävän kuvan URL-osoite. Aseta kuvan leveys ja korkeus pikseleinä leveys- ja korkeuspalkkien avulla. Alt prop on vaihtoehtoinen teksti kuvalle.
Joitakin valinnaisia Image-komponentin lisäominaisuuksia ovat asettelu, latausohjelma, paikkamerkki ja prioriteetti. Asetteluehdotus määrittää kuvan asettelun. Voit käyttää latauspalkkia määrittääksesi mukautetun kuvanlatausohjelman. Paikkamerkkiehdotus määrittää mukautetun kuvan paikkamerkin. Prioriteetti-ehdotus määrittää kuvan prioriteetin.
Jotkut Image-komponentin käytön eduista ovat:
- Parannettu suorituskyky: Yksi Image-komponentin käytön tärkeimmistä eduista on parempi suorituskyky. Komponentti optimoi kuvat automaattisesti suorituskykyä varten.
- Automaattinen kuvan koon muuttaminen: Toinen Image-komponentin käytön etu on automaattinen kuvan koon muuttaminen. Komponentti voi automaattisesti muuttaa kuvien kokoa sopimaan leveys- ja korkeuspalkkiin.
- Automaattinen kuvan pakkaus: Kuvakomponentti voi myös automaattisesti pakata kuvat tiedostokoon pienentämiseksi.
- Laiska lataustuki: Image-komponentti tukee myös laiskalatausta. Tämä tarkoittaa, että se lataa kuvia vain, kun ne näkyvät näytöllä.
Kolmannen osapuolen kirjaston käyttäminen
Jos tarvitset enemmän kuvan optimointia, voit käyttää kolmannen osapuolen kirjastoa, kuten reagoi-optimoitu-kuva. Tämä kirjasto tarjoaa useita kuvan optimointiominaisuuksia.
Joitakin reagoimaan optimoidun kuvan ominaisuuksia ovat:
- Optimoi kuvat asiakkaalla ja palvelimella: react-optimized-image voi optimoida kuvia asiakkaalla ja palvelimella. Tämä tarkoittaa, että kuvat on optimoitu suorituskyvyn ja tiedostokoon mukaan.
- Automaattinen kuvan koon muuttaminen: react-optimized-image voi automaattisesti muuttaa kuvien kokoa sopimaan leveys- ja korkeuspalkkiin.
- Automaattinen kuvan pakkaus: react-optimized-image voi myös automaattisesti pakata kuvat pienentääkseen tiedostokokoa.
- Laiska lataustuki: React-optimized-image tukee myös laiskalatausta. Tämä tarkoittaa, että se lataa kuvia vain, kun ne näkyvät näytöllä.
- Tuki useille kuvamuodoille: React-optimized-image tukee useita kuvamuotoja, mukaan lukien JPEG, PNG ja WebP.
Jos haluat käyttää reagoimaan optimoitua kuvaa, asenna kirjasto npm: llä.
Kun olet asentanut kirjaston, voit tuoda sen projektiisi.
tuonti Kuva alkaen 'react-optimized-image'viedäoletuksenatoimintoSeuraava kuva() {
palata (
<Kuva
src="/my-image.jpg"
koot={[400, 800]}
alt="Minun kuvani"
/>
)
}
Voit myös käyttää SVG-tiedostoja react-optimized-image-kuvan kanssa.
tuonti {Svg} alkaen 'react-optimized-image'viedäoletuksenatoimintoSeuraava kuva() {
palata (
<Svg
src="/my-image.svg"
luokannimi=“täytetty-punainen”
/>
)
}
Tässä esimerkissä käytetään luokanName-propaania luokan nimen määrittämiseen SVG: lle. Voit käyttää tätä luokan nimeä SVG: n tyyliin CSS: llä tai vuorovaikutuksessa sen kanssa JavaScriptin avulla.
react-optimized-image tarjoaa myös muutamia muita etuja sisäänrakennettujen kuvan optimointiominaisuuksien lisäksi.
Yksi paketin käytön etu sisäisiin ominaisuuksiin verrattuna on, että se voi automaattisesti luoda erikokoisia kuvia. Tämä tarkoittaa, että sinun ei tarvitse luoda eri versioita samasta kuvasta.
Toinen etu on, että se pystyy automaattisesti näyttämään oikeankokoista kuvaa käyttäjän laitteelle. Tämä tarkoittaa, että laitteet, joissa on korkearesoluutioinen näyttö, saavat korkearesoluutioisen kuvan, ja laitteet, joissa on matalaresoluutioinen näyttö, saavat matalan resoluution kuvan.
Lopuksi reagoi-optimoitu-kuva on täysin avoimen lähdekoodin projekti. Tämä tarkoittaa, että voit osallistua kirjastoon, jos tarvitset tietyn ominaisuuden tai virheenkorjauksen.
Mitä menetelmää sinun tulisi käyttää?
Joten mitä menetelmää sinun tulisi käyttää kuvien optimointiin Next.js: ssä?
Jos tarvitset peruskuvan optimointia, voit käyttää sisäänrakennettuja kuvankäsittelyominaisuuksia. Tämä on helpoin tapa aloittaa kuvan optimointi.
Jos tarvitset enemmän kuvan optimointia, voit käyttää kolmannen osapuolen kirjastoa, kuten react-optimized-image. Tämä kirjasto tarjoaa edistyneempiä kuvan optimointiominaisuuksia.
Jos tarvitset ehdottomasti parasta suorituskykyä, voit käyttää sisäänrakennettujen kuvankäsittelyominaisuuksien ja kolmannen osapuolen kirjaston yhdistelmää. Tämä antaa sinulle molempien maailmojen parhaat puolet. Tätä lähestymistapaa ei kuitenkaan suositella aloittelijoille, koska se vaatii enemmän asetuksia.
Paranna hakukoneoptimointia optimoiduilla kuvilla
Optimoimalla verkkosivustosi tai sovelluksesi kuvat voit parantaa hakukoneoptimointiasi. Googlen algoritmi ottaa huomioon verkkosivustojen ja sovellusten latausnopeuden. Jos verkkosivustosi tai sovelluksesi latautuu hitaasti, se vaikuttaa negatiivisesti hakukoneoptimointiisi.
Optimoiduilla kuvilla voit parantaa verkkosivustosi tai sovelluksesi latausaikaa, mikä voi parantaa hakukoneoptimointiasi. Sen jälkeen voit myös lisätä avoimen kaavioprotokollan parantaaksesi suorituskykyä.
