Afbeeldingen snel laden met @nuxt/image

Welke formaten je laat maken

Laat twee dingen maken: de maten die je echt toont, en een lichter bestandsformaat.

WebP is een veilige keuze. AVIF is vaak nog kleiner, maar het omzetten kost de server meer tijd. Met <NuxtPicture> krijg je allebei, plus een terugval voor oudere browsers:

<NuxtPicture
  src="/winkel.jpg"
  format="avif,webp"
  width="1200"
  height="800"
  alt="Voorkant van de winkel"
/>

Instelling 1: sizes

Zonder sizes krijgt een telefoon dezelfde grote foto als een breed scherm. Met sizes geef je aan hoe breed de afbeelding op elk scherm is. Nuxt maakt dan per breedte een versie, en de browser kiest de kleinste die past.

<NuxtImg
  src="/team.jpg"
  width="1200"
  height="800"
  sizes="100vw md:50vw lg:600px"
  format="webp"
  loading="lazy"
  alt="Het team aan het werk"
/>

Lees het zo: volle breedte op mobiel, half scherm vanaf md, en vanaf lg 600 pixels. Zet ook width en height. Dan houdt de browser de ruimte vrij en verspringt er niets.

Instelling 2: preload voor de eerste foto

Afbeeldingen die niet meteen in beeld staan, krijgen loading="lazy". Die laden pas als iemand ernaartoe scrolt. De grote foto bovenaan wil je juist zo vroeg mogelijk. Zet loading="lazy" dus niet op alles.

<NuxtImg
  src="/hero.jpg"
  width="1600"
  height="900"
  sizes="100vw lg:1600px"
  format="webp"
  :preload="{ fetchPriority: 'high' }"
  alt="De werkplaats"
/>

Met preload zet Nuxt een preload-link in de head. De browser begint dan aan de foto voordat hij de rest van de pagina heeft gelezen. fetchPriority: 'high' zet hem vooraan in de rij. Doe dit voor één afbeelding per pagina. Krijgt alles voorrang, dan heeft niets meer voorrang.

Welke provider

Het omzetten moet ergens gebeuren. Ik werk met vier providers:

• ipx is de standaard. Het draait op je eigen server en werkt zonder account.
• weserv is een gratis dienst die afbeeldingen vanaf een openbare URL omzet.
• Cloudinary is een complete beelddienst met een gratis instap.
• Cloudflare zet de afbeelding om op zijn eigen netwerk, dicht bij de bezoeker. Die kies ik steeds vaker.

Met ipx doet je eigen server het werk, via sharp. Dat is een native module: hij moet passen bij het besturingssysteem en de processor van de server. Bouw je op een Mac en draai je op Linux, dan werkt het niet zomaar. Bij Cloudflare doet je server niets met afbeeldingen. Zet in Cloudflare Image Transformations aan voor je domein en geef Nuxt je domein als baseURL:

// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    provider: 'cloudflare',
    cloudflare: {
      baseURL: 'https://jouwdomein.nl'
    }
  }
})

Staat je site niet achter Cloudflare, dan is ipx op je eigen server een goede start.