Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Bilder är en viktig del av alla webbplatser eller applikationer. De hjälper till att göra innehållet mer engagerande och visuellt tilltalande.

Men om bilder inte är korrekt optimerade kan de också sakta ner en webbplats eller app.

Varför optimera bilder?

Det finns några anledningar till varför det är viktigt att optimera bilder.

  • Det kan hjälpa till att förbättra laddningstiden för webbplatsen eller applikationen.
  • Det kan minska mängden data som en klient behöver ladda ner, vilket kan spara på bandbreddskostnader.
  • Det kan hjälpa till att förbättra webbplatsens eller applikationens övergripande prestanda.

Hur man optimerar bilder i Next.js

Det finns flera sätt du kan optimera bilder i Next.js. En är att använda bildkomponenten. Den här komponenten optimerar automatiskt bilder för prestanda.

Ett annat sätt att optimera bilder är att använda inbyggda bildbehandlingsfunktioner. Next.js kan automatiskt ändra storlek, komprimera och optimera bilder för prestanda.

instagram viewer

Slutligen kan du använda ett tredjepartsbibliotek som react-optimized-image. Detta bibliotek erbjuder en mängd olika bildoptimeringsfunktioner.

Använda bildkomponenten

Bildkomponenten är det enklaste sättet att optimera bilder i Next.js. För att använda det, importera helt enkelt komponenten från nästa/bild paket.

När du har importerat komponenten kan du använda den som alla andra i React. Bildkomponenten har några rekvisita som du kan använda för att styra hur den renderar bilder.

importera Bild från 'nästa/bild'

exporterastandardfungeraMin Bild() {
lämna tillbaka (
<Bild
src="/my-image.jpg"
bredd="200"
höjd="200"
kvalitet="100"
alt="Min bild"
/>
)
}

I det här exemplet återger bildkomponenten en bild med en bredd på 200px och en höjd på 200px. Du kan också använda CSS eller ett ramverk som Tailwind för att styla din app och dina bilder.

Några av de nödvändiga rekvisita för bildkomponenten är bredd, höjd, src och alt. src prop är webbadressen till bilden som du vill använda. Använd stöden för bredd och höjd för att ställa in bildens bredd och höjd i pixlar. Alt prop är den alternativa texten för bilden.

Några valfria rekvisita för bildkomponenten är layout, loader, platshållare och prioritet. Layoutrekvisiten anger bildens layout. Du kan använda loader prop för att ange en anpassad bild loader. Platshållarrekvisiten anger en anpassad bildplatshållare. Prioritetsrekvisiten anger bildens prioritet.

Några av fördelarna med att använda bildkomponenten är:

  • Förbättrad prestanda: En av de främsta fördelarna med att använda Image-komponenten är förbättrad prestanda. Komponenten optimerar automatiskt bilder för prestanda.
  • Automatisk bildstorleksändring: En annan fördel med att använda bildkomponenten är automatisk bildstorleksändring. Komponenten kan automatiskt ändra storlek på bilder för att passa bredden och höjden.
  • Automatisk bildkomprimering: Bildkomponenten kan också automatiskt komprimera bilder för att minska filstorleken.
  • Lazy Loading Support: Bildkomponenten stöder också lazy loading. Det betyder att den bara laddar bilder när de är synliga på skärmen.

Använda ett bibliotek från tredje part

Om du behöver mer kontroll över bildoptimering kan du använda ett tredjepartsbibliotek som reagera-optimerad-bild. Detta bibliotek erbjuder en mängd olika bildoptimeringsfunktioner.

Några av funktionerna i react-optimized-image inkluderar:

  • Optimera bilder på klienten och servern: react-optimized-image kan optimera bilder på klienten och servern. Detta innebär att bilder är optimerade för såväl prestanda som filstorlek.
  • Automatisk bildstorleksändring: react-optimized-image kan automatiskt ändra storlek på bilder för att passa bredd- och höjdrekvisita.
  • Automatisk bildkomprimering: react-optimized-image kan också automatiskt komprimera bilder för att minska filstorleken.
  • Stöd för lat laddning: react-optimized-image stöder också lazy loading. Det betyder att den bara laddar bilder när de är synliga på skärmen.
  • Stöd för flera bildformat: react-optimized-image stöder flera bildformat, inklusive JPEG, PNG och WebP.

För att använda react-optimized-image, installera helt enkelt biblioteket med npm.

När du har installerat biblioteket kan du importera det till ditt projekt.

importera Img från 'reagera-optimerad-bild'

exporterastandardfungeraNextImg() {
lämna tillbaka (
<Img
src="/my-image.jpg"
storlekar={[400, 800]}
alt="Min bild"
/>
)
}

Du kan också använda SVG-filer med react-optimized-image.

importera {Svg} från 'reagera-optimerad-bild'

exporterastandardfungeraNextImg() {
lämna tillbaka (
<Svg
src="/my-image.svg"
klassnamn=“fylld-röd”
/>
)
}

Det här exemplet använder propriet className för att ange ett klassnamn för SVG. Du kan använda det klassnamnet för att formatera SVG med CSS eller interagera med det med JavaScript.

react-optimized-image ger också några andra fördelar jämfört med de inbyggda bildoptimeringsmöjligheterna.

En fördel med att använda ett paket framför inbyggda funktioner är att det automatiskt kan generera olika storlekar av bilder. Det betyder att du inte behöver skapa olika versioner av samma bild.

En annan fördel är att den automatiskt kan visa lämplig bildstorlek för användarens enhet. Det betyder att enheter med högupplösta skärmar får en högupplöst bild och enheter med lågupplösta skärmar får en lågupplöst bild.

Slutligen, reagera-optimerad-bild är en helt öppen källkodsprojekt. Det betyder att du kan bidra till biblioteket om du behöver en specifik funktion eller buggfix.

Vilken metod ska du använda?

Så vilken metod ska du använda för att optimera bilder i Next.js?

Om du behöver grundläggande bildoptimering kan du använda de inbyggda bildbehandlingsfunktionerna. Det här är det enklaste sättet att komma igång med bildoptimering.

Om du behöver mer kontroll över bildoptimering kan du använda ett tredjepartsbibliotek som react-optimized-image. Detta bibliotek ger mer avancerade bildoptimeringsmöjligheter.

Om du behöver den absolut bästa prestandan kan du använda en kombination av de inbyggda bildbehandlingsmöjligheterna och ett tredjepartsbibliotek. Detta kommer att ge dig det bästa av två världar. Detta tillvägagångssätt rekommenderas dock inte för nybörjare eftersom det kräver mer installation.

Förbättra SEO med optimerade bilder

Genom att optimera bilderna på din webbplats eller app kan du förbättra din SEO. Googles algoritm tar hänsyn till laddningshastigheten för webbplatser och appar. Om din webbplats eller app laddas långsamt kommer det att påverka din SEO negativt.

Med optimerade bilder kan du förbättra laddningstiden för din webbplats eller app, vilket kan förbättra din SEO. Efter det kan du också lägga till öppet grafprotokoll för ännu bättre prestanda.