Nuxt Image v2 : enfin une gestion d’images qui ne donne pas envie de fuir

Soyons honnêtes : gérer les images dans une app front, c’est rarement fun. Entre les formats, le responsive, les tailles, les performances, les Core Web Vitals, les CDNs, les tests sur mobile… tu peux très vite te retrouver à bricoler, à over-optimiser ou à casser ton build sans le vouloir. Avec Nuxt Image v2, on respire un peu. Le module a pris en maturité, ça se sent. Et pour une stack moderne basée sur Nuxt 3, c’est exactement le genre d’outil qui te simplifie la vie sans te retirer le contrôle.

Voilà ce que j’ai trouvé intéressant; et ce que j’utiliserais en pratique dans un vrai projet.

TypeScript partout : petite feature, gros confort

La vraie nouveauté de cette version, c’est le support TypeScript complet.
Le composable useImage(), le helper $img, les providers… tout est typé proprement.

Concrètement :

• autocomplétion fiable,

• moins d’erreurs sur les props,

• meilleure DX,

• config plus claire,

• et tu sais exactement quel provider accepte quels paramètres.

Pas révolutionnaire dans l’absolu… mais dans un vrai projet, ça fait une grosse différence.
Tu codes plus vite, tu fais moins d’erreurs, tu passes moins de temps dans la doc.

Le module est pensé pour Nuxt 3

Nuxt Image v2 fonctionne avec Nuxt 3.1+, ce qui veut dire :

• support propre des composants <NuxtImg> / <NuxtPicture>

• intégration fluide avec Nitro

• meilleure compatibilité providers / CDN

• API cohérente avec le reste de l’écosystème Nuxt

Bref, tu sens que ce n’est pas un module “hérité” : il est conçu pour le Nuxt moderne.

Optimisation automatique : plus besoin de gérer 12 versions d’une image

Le gros avantage d’utiliser NuxtImg, c’est que tu délègues le sale boulot :
conversion webp/avif, resizing, srcsets automatiques, lazy-loading, responsive, etc.

Un petit exemple très simple :

<template>
  <NuxtImg
    src="/images/hero.jpg"
    alt="Hero section"
    width="1200"
    height="800"
    format="webp"
    sizes="(max-width: 600px) 100vw, 50vw"
    class="rounded-xl shadow-lg"
    lazy
  />
</template>

Ce simple composant te donne :

• la meilleure version d’image selon l’appareil,

• un poids réduit,

• un chargement optimisé,

• un meilleur score LCP.

Si tu fais du SEO ou que tu veux juste un site rapide : c’est quasiment obligatoire.

Et en pratique, dans une vraie app ?

Tu peux très facilement structurer ton usage :

Remplacer progressivement les <img>

Tu touches ton code existant au fur et à mesure :

<img src="/img/photo.jpg" />

devient

<NuxtImg src="/img/photo.jpg" />

Ça marche direct. Puis tu affines selon les besoins.

Utiliser un provider si tu as beaucoup d’assets

Par exemple avec un CDN type Cloudinary, ImageKit, Uploadcare, Netlify Image CDN, etc.

Typer entièrement les options du provider, c’est nouveau, et ça évite les erreurs du style quality: "high" qui passait silencieusement avant.

Unifier les tailles & formats de toute ton app

Un petit fichier utils/images.ts et tu normalises tout :

export const defaultImg = (path: string) =>
  $img(path, {
    format: 'webp',
    quality: 80,
    width: 1600
  })

Et dans tes pages :

<NuxtImg :src="defaultImg('/blog/header.jpg')" />

Ça ne paraît rien, mais sur un gros site c’est un vrai gain de cohérence.

Pourquoi j’aime cette version ?

Pas parce que c’est “une révolution”.
Parce que ça règle un problème réel, proprement, sans magie noire.

• J’ai moins de configuration à gérer.

• Je peux faire confiance au typage.

• L’intégration Nuxt/Nitro est clean.

• Je n’ai plus besoin de packs ou scripts maison pour les images.

• Ça rend mon code plus lisible et plus standard.

Et surtout : ça aide à garder les performances hautes sans prise de tête. Sur des projets client, c’est précieux. Sur mes projets persos, c’est juste confortable.

Nuxt Image v2 ne cherche pas à réinventer la roue. Il évite que tu te la prennes dans la tête. C’est propre, efficace, moderne. Et si tu passes tes journées à optimiser des sites, tu apprécies ce genre de module qui te donne des super pouvoirs sans complexifier ton code.

Franchement : si tu utilises Nuxt 3 et que tu manipules des images : prends-le.