NextJs bilder
Rammeverket har gått langt får å optimisere bilder så mye som mulig. Det er anbefalt å bruke import Image from 'next/image' for alt av bilder på siden slik at en får benyttet alle triksene NextJs har for å gjøre dem så raske som mulig å laste. Eksempler på features inkluderer responsive bilder (bare hente ut størrelsen man trenger), blur hash og valg for kvalitet og lignende. Dokumentasjon finnes her.
For å demonstrere kan du åpne denne siden med dev-tools og responsiv størrelse. Prøv å forandre størrelsen på siden og se størrelsen (i bytes) på hovedbildet forandres når en laster siden på nytt i forskjellige sidestørrelser. Dette fungerer via srcset-attributten på <img>-elementer. Størrelsen på bildet velges basert på sizes-attributten som sendes ned som prop. Her spesifiserer man hva slags bilde som skal vises basert på størrelsen av skjermen. For eksempel vil (max-width: 800px) 100vw, 30px resultere i bilder i oppløsningen til skjermen for skjermstørrelser fra 800 px og oppover, 30 px for mindre.