Bilder er en viktig del av enhver nettside eller applikasjon. De bidrar til å gjøre innholdet mer engasjerende og visuelt tiltalende.
Men hvis bilder ikke er riktig optimalisert, kan de også redusere hastigheten på et nettsted eller en app.
Hvorfor optimalisere bilder?
Det er noen få grunner til at det er viktig å optimalisere bilder.
- Det kan bidra til å forbedre lastetiden til nettstedet eller applikasjonen.
- Det kan redusere mengden data som en klient trenger å laste ned, noe som kan spare båndbreddekostnader.
- Det kan bidra til å forbedre den generelle ytelsen til nettstedet eller applikasjonen.
Hvordan optimalisere bilder i Next.js
Det er flere måter du kan optimalisere bilder i Next.js. Den ene er å bruke Image-komponenten. Denne komponenten optimerer automatisk bilder for ytelse.
En annen måte å optimalisere bilder på er å bruke innebygde bildebehandlingsmuligheter. Next.js kan automatisk endre størrelse, komprimere og optimalisere bilder for ytelse.
Til slutt kan du bruke et tredjepartsbibliotek som react-optimized-image. Dette biblioteket tilbyr en rekke bildeoptimaliseringsmuligheter.
Bruke bildekomponenten
Bildekomponenten er den enkleste måten å optimalisere bilder i Next.js. For å bruke den, importerer du bare komponenten fra neste/bilde pakke.
Når du har importert komponenten, kan du bruke den som alle andre i React. Bildekomponenten har noen få rekvisitter som du kan bruke til å kontrollere hvordan den gjengir bilder.
import Bilde fra 'neste/bilde'eksportmisligholdefunksjonMitt bilde() {
komme tilbake (
<Bilde
src="/my-image.jpg"
bredde="200"
høyde="200"
kvalitet="100"
alt="Mitt bilde"
/>
)
}
I dette eksemplet gjengir bildekomponenten et bilde med en bredde på 200px og en høyde på 200px. Du kan også bruke CSS eller et rammeverk som Tailwind for å style appen og bildene dine.
Noen av de nødvendige rekvisittene for bildekomponenten er bredde, høyde, src og alt. src prop er URL-en til bildet du vil bruke. Bruk bredde- og høyderekvisittene til å angi bredden og høyden på bildet, i piksler. Alt prop er den alternative teksten for bildet.
Noen valgfrie rekvisitter for bildekomponenten er layout, laster, plassholder og prioritet. Layout-rekvisitten spesifiserer layouten til bildet. Du kan bruke loader-rekvisitten til å spesifisere en tilpasset bildelaster. Plassholderrekvisiten spesifiserer en egendefinert bildeplassholder. Prioritetsrekvisitten spesifiserer prioriteten til bildet.
Noen av fordelene med å bruke bildekomponenten er:
- Forbedret ytelse: En av hovedfordelene med å bruke Image-komponenten er forbedret ytelse. Komponenten optimerer automatisk bilder for ytelse.
- Automatisk bildeendring: En annen fordel med å bruke bildekomponenten er automatisk bildestørrelse. Komponenten kan automatisk endre størrelsen på bilder for å passe til bredden og høyden.
- Automatisk bildekomprimering: Bildekomponenten kan også komprimere bilder automatisk for å redusere filstørrelsen.
- Lazy Loading Support: Bildekomponenten støtter også lat lasting. Dette betyr at den kun vil laste inn bilder når de er synlige på skjermen.
Bruke et tredjepartsbibliotek
Hvis du trenger mer kontroll over bildeoptimalisering, kan du bruke et tredjepartsbibliotek som reagere-optimalisert-bilde. Dette biblioteket tilbyr en rekke bildeoptimaliseringsmuligheter.
Noen av funksjonene til react-optimized-image inkluderer:
- Optimaliser bilder på klienten og serveren: react-optimized-image kan optimere bilder på klienten og serveren. Dette betyr at bilder er optimalisert for ytelse så vel som filstørrelse.
- Automatisk bildestørrelse: react-optimized-image kan automatisk endre størrelse på bilder for å passe til bredde- og høyderekvisittene.
- Automatisk bildekomprimering: react-optimized-image kan også automatisk komprimere bilder for å redusere filstørrelsen.
- Støtte for lat lasting: react-optimized-image støtter også lat lasting. Dette betyr at den kun vil laste inn bilder når de er synlige på skjermen.
- Støtte for flere bildeformater: react-optimized-image støtter flere bildeformater, inkludert JPEG, PNG og WebP.
For å bruke react-optimized-image, installer bare biblioteket med npm.
Når du har installert biblioteket, kan du importere det til prosjektet ditt.
import Img fra 'reager-optimalisert-bilde'eksportmisligholdefunksjonNextImg() {
komme tilbake (
<Img
src="/my-image.jpg"
størrelser={[400, 800]}
alt="Mitt bilde"
/>
)
}
Du kan også bruke SVG-filer med react-optimized-image.
import {Svg} fra 'reager-optimalisert-bilde'eksportmisligholdefunksjonNextImg() {
komme tilbake (
<Svg
src="/my-image.svg"
klassenavn=“fylt-rød”
/>
)
}
Dette eksemplet bruker className prop for å spesifisere et klassenavn for SVG. Du kan bruke det klassenavnet til å style SVG med CSS eller samhandle med det ved hjelp av JavaScript.
react-optimized-image gir også noen andre fordeler i forhold til de innebygde bildeoptimaliseringsmulighetene.
En fordel med å bruke en pakke fremfor innebygde funksjoner er at den automatisk kan generere forskjellige størrelser på bilder. Dette betyr at du ikke trenger å lage forskjellige versjoner av det samme bildet.
En annen fordel er at den automatisk kan vise riktig bildestørrelse for brukerens enhet. Dette betyr at enheter med høyoppløselige skjermer vil få et høyoppløselig bilde, og enheter med lavoppløselige skjermer vil få et lavoppløselig bilde.
Til slutt, reager-optimalisert-bilde er en fullstendig åpen kildekode-prosjekt. Dette betyr at du kan bidra til biblioteket hvis du trenger en spesifikk funksjon eller feilretting.
Hvilken metode bør du bruke?
Så hvilken metode bør du bruke for å optimalisere bilder i Next.js?
Hvis du trenger grunnleggende bildeoptimalisering, kan du bruke de innebygde bildebehandlingsmulighetene. Dette er den enkleste måten å komme i gang med bildeoptimalisering.
Hvis du trenger mer kontroll over bildeoptimalisering, kan du bruke et tredjepartsbibliotek som react-optimized-image. Dette biblioteket gir mer avanserte bildeoptimaliseringsmuligheter.
Hvis du trenger den absolutt beste ytelsen, kan du bruke en kombinasjon av de innebygde bildebehandlingsmulighetene og et tredjepartsbibliotek. Dette vil gi deg det beste fra to verdener. Denne tilnærmingen anbefales imidlertid ikke for nybegynnere siden den krever mer oppsett.
Forbedre SEO med optimaliserte bilder
Ved å optimalisere bildene på nettstedet eller appen din kan du forbedre SEO. Googles algoritme tar hensyn til lastehastigheten til nettsteder og apper. Hvis nettstedet eller appen din laster sakte, vil det påvirke SEO negativt.
Med optimaliserte bilder kan du forbedre lastetiden til nettstedet eller appen din, noe som kan forbedre SEO-en din. Etter det kan du også legge til åpen grafprotokoll for enda bedre ytelse.
