Bildoptimering
Att leverera bilder i rätt format, storlek och kvalitet för att minska laddningstid utan att offra visuell kvalitet.
Next.js Image-komponent hanterar bildoptimering automatiskt: den konverterar bilder till moderna format som WebP och AVIF, genererar varianter i olika storlekar för responsiv leverans och skjuter upp laddning av bilder utanför vykorgen (lazy loading).
Du anger de dimensioner du vill ha och Next.js beräknar rätt bildstorlek för varje enhet. För externa bilder behöver du lägga till domänen i next.config.js under images.remotePatterns.
Optimerade bilder påverkar Core Web Vitals direkt — Largest Contentful Paint mäter hur snabbt sidans tyngsta synliga element är synligt, och det är ofta en bild. Att använda next/image i stället för vanlig img-tagg är ett av de enklaste sätten att förbättra LCP.