Next.js Image-component: sizes, preload en externe afbeeldingen
Gids voor de Next.js Image-component
Next.js Image: sizes, preload, remotePatterns en LCP | We.Inc
Zo werkt next/image in Next.js 16: width, height en fill, een sizes-calculator, preload in plaats van priority, remotePatterns, qualities en de standaard srcset-breedtes.
Importeer Image uit next/image en geef het src, alt, en ofwel width en height ofwel fill. Voeg een sizes-string toe zodra de weergegeven breedte met het scherm verandert, zodat de browser een kleiner bestand downloadt. Zet voor de heroafbeelding die uw LCP is preload (dat verving priority in Next.js 16). Sta externe hosts toe met images.remotePatterns.
De props die de snelheid bepalen
Prop
Standaard
Gebruik het wanneer
width / height
De afbeelding een vaste grootte heeft, of u de beeldverhouding wilt reserveren
Het omliggende vak de grootte bepaalt (kaarten, heroes, covers)
browser gaat uit van 100vw
De afbeelding responsive is of fill gebruikt
De afbeelding het LCP-element boven de vouw is
Zet eager alleen voor afbeeldingen die meteen moeten laden
Alleen waarden uit images.qualities worden geleverd
Twee fouten met afbeeldingen maak je in Next.js snel: een fill-afbeelding zonder sizes, waardoor telefoons desktopbestanden downloaden, en een hero die op lazy loading wacht. Deze pagina legt elke prop in gewone woorden uit, geeft u een calculator die de sizes-string voor uw layout schrijft en somt de configuratiestandaarden op die Next.js vandaag gebruikt.
Kies de layout waarin uw afbeelding staat, zoals volle breedte, twee kolommen naast elkaar of een raster van drie kaarten.
Stel de breakpoints in die uw CSS gebruikt. De calculator schrijft de bijbehorende sizes-waarde.
Kies een telefoonbreedte en pixeldichtheid om te zien welke standaard srcset-breedte de browser waarschijnlijk ophaalt.
Kopieer het kant-en-klare Image-element en plak het in uw component.
Statische imports (import hero from './hero.jpg') vullen width, height en blurDataURL voor u in, dus kies die voor afbeeldingen die in de repo staan.
Geef een fill-afbeelding een parent met position: relative en een echte hoogte, anders klapt hij in tot niets.
Maar één afbeelding per viewport hoort preload te krijgen. Meerdere afbeeldingen markeren schiet het doel voorbij en laat ze om bandbreedte concurreren.
Houd remotePatterns smal: noem het protocol, de exacte hostname en een pathname-voorvoegsel in plaats van een heel domein toe te staan.
Staat een quality die u meegeeft niet in images.qualities, dan levert Next.js de dichtstbijzijnde toegestane waarde en waarschuwt het in development.
Veelgestelde vragen
Is de prop priority verouderd?
Ja. Vanaf Next.js 16 markeert de documentatie priority als verouderd ten gunste van preload, dat een preload-link in de head plaatst. De documentatie zegt ook dat loading="eager" of fetchPriority="high" in de meeste gevallen de betere keuze is, en preload mag niet met een van die props gecombineerd worden.
Waarom zegt next/image dat de hostname niet geconfigureerd is?
Externe afbeeldingen moeten overeenkomen met een item in images.remotePatterns in next.config. Voeg een object toe met protocol, hostname en een pathname zoals /photos/**, en herstart daarna de dev-server. Verzoeken die bij geen enkel patroon passen krijgen een 400-respons van de image optimizer.
Wat verandert de prop sizes eigenlijk?
Hij vertelt de browser hoe breed de afbeelding bij elk breakpoint wordt voordat de CSS geladen is. Met sizes geeft Next.js ook een volledige srcset op basis van breedte (640w, 750w enzovoort) in plaats van alleen 1x en 2x, zodat een telefoon een veel kleiner bestand kan kiezen.
Heb ik width en height nodig bij fill?
Nee. fill en width/height zijn alternatieven. Met fill rekt de afbeelding uit tot de gepositioneerde parent, en het bijsnijden regelt u met object-fit via de prop style of className.
Hoe lang worden geoptimaliseerde afbeeldingen gecachet?
De standaard minimumCacheTTL is 14400 seconden, oftewel vier uur. De echte max age is de grootste van de twee: die waarde of de Cache-Control-header van de oorspronkelijke afbeelding. Statisch geïmporteerde afbeeldingen krijgen langdurige immutable caching omdat hun bestandsnamen gehasht zijn.
Waarom de component bestaat
Een gewone img-tag stuurt één bestand naar elk apparaat. next/image schaalt de bron op verzoek, zet hem om naar een modern formaat dat de browser accepteert, laadt hem standaard lazy en reserveert de ruimte zodat de layout niet verspringt terwijl hij binnenkomt.
Het addertje is dat hij alleen een verstandig bestand kan kiezen als hij weet hoe breed de afbeelding wordt. Dat is de taak van width, height en sizes, en daar gaan de meeste fouten in de praktijk.
LCP goed krijgen
Largest Contentful Paint is vaak een herofoto. Die foto lazy laden vertraagt de metric, dus markeer hem met preload, of met loading="eager" plus fetchPriority="high", en laat elke afbeelding onder de vouw op de standaard lazy staan.
Combineer dat met een eerlijke sizes-waarde. Een hero die op telefoons de volle breedte beslaat maar op desktop maar de halve pagina, moet dat ook zeggen, anders krijgen grote en kleine schermen allebei het verkeerde bestand.
Configuratie waar u mee te maken krijgt
remotePatterns somt de externe hosts op die u vertrouwt. qualities is een allowlist van qualitywaarden en is verplicht vanaf Next.js 16, en de documentatie zet de standaard op 75. Met formats voegt u AVIF toe vóór WebP, ten koste van het opslaan van beide versies in de cache.
deviceSizes en imageSizes vormen samen de kandidaatbreedtes in elke srcset. U hoeft ze zelden te wijzigen, maar als u de standaarden kent, kunt u in het netwerkpaneel beter lezen wat de browser downloadde.
Elke prop die u waarschijnlijk gebruikt
Props van next/image (referentie voor Next.js 16)
Prop
Type
Wat hij doet
string of statische import
Lokaal pad in public, geïmporteerd bestand of een externe URL die remotePatterns toestaat
Verplicht tekstalternatief; gebruik alleen een lege string voor decoratieve afbeeldingen
width, height
integer (px)
Intrinsieke grootte voor de beeldverhouding; niet nodig bij statische imports of fill
Rekt uit tot de gepositioneerde parent in plaats van width en height te gebruiken
Mediacondities en slotbreedtes die de keuze uit de srcset sturen
integer 1 tot 100
Uitvoerkwaliteit, standaard 75, afgerond naar de lijst images.qualities
Voegt een preload-link in de head toe voor de LCP-afbeelding
lazy of eager
Standaard lazy
empty, blur of data-URL
Wat er tijdens het laden te zien is; blur vereist blurDataURL tenzij de afbeelding een statische import is
Levert het bronbestand zoals het is, zonder schalen of formaatwijziging
Verouderd in Next.js 16; gebruik in plaats daarvan preload
Standaardinstellingen voor afbeeldingen
Instellingen voor images in next.config en hun standaarden
Instelling
Standaard
Opmerkingen
deviceSizes
Breedtes voor afbeeldingen over de volle breedte en fill-afbeeldingen
imageSizes
Extra kleine breedtes, alleen gebruikt als de afbeelding een sizes-prop heeft
Verplichte allowlist vanaf Next.js 16
minimumCacheTTL
14400 (4 uur)
De grootste van deze waarde en de upstream Cache-Control wint
remotePatterns
Elke externe host moet vermeld worden
Voorbeelden om te kopiëren
Heroafbeelding uit een statische import
De import geeft Next.js de echte afmetingen en een blur-placeholder. preload start de download vanuit de head.
Kaartenraster met fill en sizes
Elke kaart is op desktop een derde van de pagina, op tablets de helft en op telefoons de volle breedte, en de sizes-waarde zegt precies dat.
next.config.ts voor een externe afbeeldingshost
Alleen HTTPS-bestanden onder /uploads/ op één host zijn toegestaan. Twee qualitywaarden zijn toegestaan.
Volle breedte
Half op desktop
Raster van 2 kolommen
Raster van 3 kaarten
Raster van 4 kaarten
Sizes-calculator
Kies een layout en breakpoints om het sizes-attribuut te genereren, en zie dan welke standaard srcset-breedte een bepaald scherm waarschijnlijk downloadt.
Layout
Breakpoint telefoon (px)
Breakpoint tablet (px)
Schermbreedte: {n}px
Pixeldichtheid
Bij {screen}px is het afbeeldingsslot ongeveer {slot}px breed ({vw}vw). Bij een dichtheid van {dpr}x zijn {need} apparaatpixels nodig, dus de browser haalt waarschijnlijk de kandidaat van {pick}w op.
Kopiëren
Standaard kandidaatbreedtes: {list}. Browsers kunnen anders kiezen, bijvoorbeeld als er al een groter bestand in de cache staat.