Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Billeder er en vigtig del af enhver hjemmeside eller applikation. De er med til at gøre indholdet mere engagerende og visuelt tiltalende.

Men hvis billeder ikke er korrekt optimeret, kan de også bremse et websted eller en app.

Hvorfor optimere billeder?

Der er et par grunde til, at det er vigtigt at optimere billeder.

  • Det kan hjælpe med at forbedre indlæsningstiden for webstedet eller applikationen.
  • Det kan reducere mængden af ​​data, som en klient skal downloade, hvilket kan spare på båndbreddeomkostninger.
  • Det kan hjælpe med at forbedre webstedets eller applikationens overordnede ydeevne.

Sådan optimerer du billeder i Next.js

Der er flere måder, du kan optimere billeder på i Next.js. Den ene er at bruge Image-komponenten. Denne komponent optimerer automatisk billeder til ydeevne.

En anden måde at optimere billeder på er at bruge indbyggede billedbehandlingsfunktioner. Next.js kan automatisk ændre størrelse, komprimere og optimere billeder til ydeevne.

instagram viewer

Endelig kan du bruge et tredjepartsbibliotek som react-optimized-image. Dette bibliotek giver en række billedoptimeringsmuligheder.

Brug af billedkomponenten

Image-komponenten er den nemmeste måde at optimere billeder i Next.js. For at bruge det skal du blot importere komponenten fra næste/billede pakke.

Når du har importeret komponenten, kan du bruge den som enhver anden i React. Billedkomponenten har et par rekvisitter, som du kan bruge til at styre, hvordan den gengiver billeder.

importere Billede fra 'næste/billede'

eksportStandardfungereMit billede() {
Vend tilbage (
<Billede
src="/my-image.jpg"
bredde ="200"
højde="200"
kvalitet="100"
alt="Mit billede"
/>
)
}

I dette eksempel gengiver billedkomponenten et billede med en bredde på 200px og en højde på 200px. Du kan også bruge CSS eller en ramme som Tailwind for at style din app og dine billeder.

Nogle af de nødvendige rekvisitter til billedkomponenten er bredde, højde, src og alt. src prop er URL'en på det billede, du vil bruge. Brug bredden og højden til at indstille bredden og højden af ​​billedet i pixels. Alt prop er den alternative tekst til billedet.

Nogle valgfri rekvisitter til billedkomponenten er layout, loader, pladsholder og prioritet. Layout-prop specificerer billedets layout. Du kan bruge loader-propen til at angive en brugerdefineret billedindlæser. Pladsholderrekvisiten angiver en tilpasset billedpladsholder. Prioritetsprop angiver billedets prioritet.

Nogle af fordelene ved at bruge billedkomponenten er:

  • Forbedret ydeevne: En af de vigtigste fordele ved at bruge Image-komponenten er forbedret ydeevne. Komponenten optimerer automatisk billeder til ydeevne.
  • Automatisk billedstørrelse: En anden fordel ved at bruge billedkomponenten er automatisk billedstørrelse. Komponenten kan automatisk ændre størrelsen på billeder, så de passer til bredden og højden.
  • Automatisk billedkomprimering: Billedkomponenten kan også automatisk komprimere billeder for at reducere filstørrelsen.
  • Lazy Loading Support: Image-komponenten understøtter også doven indlæsning. Det betyder, at den kun vil indlæse billeder, når de er synlige på skærmen.

Brug af et tredjepartsbibliotek

Hvis du har brug for mere kontrol over billedoptimering, kan du bruge et tredjepartsbibliotek som f.eks reagere-optimeret-billede. Dette bibliotek giver en række billedoptimeringsmuligheder.

Nogle af funktionerne i react-optimized-image inkluderer:

  • Optimer billeder på klienten og serveren: react-optimized-image kan optimere billeder på klienten og serveren. Det betyder, at billeder er optimeret til ydeevne såvel som filstørrelse.
  • Automatisk billedstørrelse: react-optimized-image kan automatisk ændre størrelsen på billeder, så de passer til bredden og højden.
  • Automatisk billedkomprimering: react-optimized-image kan også automatisk komprimere billeder for at reducere filstørrelsen.
  • Understøttelse af doven indlæsning: react-optimized-image understøtter også lazy loading. Det betyder, at den kun vil indlæse billeder, når de er synlige på skærmen.
  • Understøttelse af flere billedformater: react-optimized-image understøtter flere billedformater, inklusive JPEG, PNG og WebP.

For at bruge react-optimized-image skal du blot installere biblioteket med npm.

Når du har installeret biblioteket, kan du importere det til dit projekt.

importere Img fra 'reager-optimeret-billede'

eksportStandardfungereNextImg() {
Vend tilbage (
<Img
src="/my-image.jpg"
størrelser={[400, 800]}
alt="Mit billede"
/>
)
}

Du kan også bruge SVG-filer med react-optimized-image.

importere {Svg} fra 'reager-optimeret-billede'

eksportStandardfungereNextImg() {
Vend tilbage (
<Svg
src="/my-image.svg"
klassenavn=“fyldt-rød”
/>
)
}

Dette eksempel bruger className prop til at angive et klassenavn for SVG. Du kan bruge det klassenavn til at style SVG'et med CSS eller interagere med det ved hjælp af JavaScript.

react-optimized-image giver også et par andre fordele i forhold til de indbyggede billedoptimeringsmuligheder.

En fordel ved at bruge en pakke frem for indbyggede funktioner er, at den automatisk kan generere forskellige størrelser af billeder. Det betyder, at du ikke behøver at oprette forskellige versioner af det samme billede.

En anden fordel er, at den automatisk kan vise den passende billedstørrelse til brugerens enhed. Det betyder, at enheder med skærme med høj opløsning får et billede i høj opløsning, og enheder med skærme med lav opløsning får et billede i lav opløsning.

Endelig er reaktionsoptimeret-billede et fuldstændigt open source-projekt. Det betyder, at du kan bidrage til biblioteket, hvis du har brug for en specifik funktion eller fejlrettelse.

Hvilken metode skal du bruge?

Så hvilken metode skal du bruge til at optimere billeder i Next.js?

Hvis du har brug for grundlæggende billedoptimering, så kan du bruge de indbyggede billedbehandlingsmuligheder. Dette er den nemmeste måde at komme i gang med billedoptimering.

Hvis du har brug for mere kontrol over billedoptimering, så kan du bruge et tredjepartsbibliotek som react-optimized-image. Dette bibliotek giver mere avancerede billedoptimeringsmuligheder.

Hvis du har brug for den absolut bedste ydeevne, så kan du bruge en kombination af de indbyggede billedbehandlingsmuligheder og et tredjepartsbibliotek. Dette vil give dig det bedste fra begge verdener. Denne tilgang anbefales dog ikke til begyndere, da den kræver mere opsætning.

Forbedre SEO med optimerede billeder

Ved at optimere billederne på din hjemmeside eller app, kan du forbedre din SEO. Googles algoritme tager højde for indlæsningshastigheden af ​​websteder og apps. Hvis dit websted eller din app indlæses langsomt, vil det påvirke din SEO negativt.

Med optimerede billeder kan du forbedre loadtiden på din hjemmeside eller app, hvilket kan forbedre din SEO. Derefter kan du også tilføje åben grafprotokol for endnu bedre ydeevne.