logo
pub

Images et Next.js

authors

Introduction

Le blog Tailwind Starter prend en charge immédiatement le composant d'image intégré de Next.js et remplace automatiquement les balises d'image par défaut dans Markdown ou mdx pour utiliser le composant Image fourni.

Utilisation

Pour l'utiliser dans un nouveau fichier route de page/javascript, importez simplement le composant image et appelez-le par exemple:

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src="/me.png" alt="Picture of the author" width={500} height={500} />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Pour un fichier markdown, la balise d'image par défaut peut être utilisée et la balise « img » par défaut est remplacée par le composant « Image » dans le processus de construction.

En supposant que nous ayons un fichier appelé « ocean.jpg » dans « data/img/ocean.jpg », la ligne de code suivante générerait l'image optimisée.

![ocean](/static/images/ocean.jpg)

Alternativement, puisque nous utilisons mdx, nous pouvons simplement utiliser le composant image directement! Notez que vous devrez fournir une largeur et une hauteur fixes. La méthode de balise img analyse automatiquement la dimension.

<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />

Note: Si vous essayez de sauvegarder l'image, elle est au format webp, si votre navigateur le prend en charge !

ocean

Photo de YUCAR FotoGrafik sur Unsplash

Benefices

  • Taille d'image plus petite avec Webp (~ 30 % plus petite que JPEG)
  • Images réactives - la taille d'image correcte est servie en fonction de la fenêtre d'affichage de l'utilisateur
  • Chargement paresseux - les images se chargent au fur et à mesure qu'elles défilent vers la fenêtre d'affichage
  • Évite le Changement de mise en page cumulatif
  • Optimisation à la demande au lieu du temps de construction - aucune augmentation du temps de construction!

Limitations

  • En raison du recours à « next/image », à moins que vous n'utilisiez un CDN d'image externe comme Cloudinary ou Imgix, il est pratiquement nécessaire d'utiliser Vercel pour l'hébergement. En effet, le composant agit comme une fonction sans serveur qui appelle un CDN d'image hautement optimisé.

    Si vous ne souhaitez pas être lié à Vercel, vous pouvez supprimer imgToJsx dans remarkPlugins dans lib/mdx.js. Cela éviterait de remplacer la balise img par défaut.

    Alternativement, on pourrait attendre que l'optimisation de l'image au moment de la construction soit prise en charge. Une bibliothèque différente, next-optimized-images fait cela, bien que cela nécessite de transformer les images via webpack, ce qui n'est pas fait ici.

  • Les images provenant de liens externes ne sont pas transmises via next/image

  • Toutes les images doivent être stockées dans le dossier « public », par exemple « /static/images/ocean.jpeg ».

SHARE