next img

Plugin suivant.js pour intégrer des images optimisées.

Caractéristiques

• Importer des images PNG / JPG
• sortie au format webp
• redimensionner à plusieurs tailles d'écran et densités
• Optimiser les images WebP et les reproches à l'aide de sharp
• Charge paresseuse dans les navigateurs modernes avec transfert de transfert ( loading="lazy" )
• Empêcher le décalage de mise en page avec des attributs de largeur / hauteur automatique
• Utilisation rationalisée avec le composant intégré <Picture />
• Direction de l'art avec différentes images pour différents points d'arrêt
• Déploiement rapide et développement de travail en utilisant un cache persistant

Par défaut, le prochain IMG est configuré pour utiliser:

• 1 point d'arrêt à 768px
• 2 pixels densités de 1x, 2x
• Pour produire les formats originaux et webp

Tous ces paramètres et plus peuvent être modifiés dans votre next.config.js ou dans les importations d'image individuelles.

Développé et utilisé par les humains.

Motivation

Par défaut, next.js ou webpack ne vous aide pas beaucoup à optimiser les images. Cela signifie une configuration ou un script personnalisé, en traitement des images à la main, en utilisant un CDN d'image ou en optimisant les images du tout. Next-IMG fournit et une approche alternative rationalisée pour ajouter des images à vos projets Next.js. Il combine un plugin Next.js, un chargeur Webpack personnalisé et un composant React pour rendre les images de service de manière optimale d'une manière qui est presque aussi simple que de taper <img src='foo.png' /> .

Bref, il faut ce qui suit:

 < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />

Importe, redimensionne, optimise, cache (constamment dans le repo git) et produit le HTML suivant:

 < picture >
  < source
    type =" image/webp "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    sizes =" (max-width: 768px) 375px, 800px "
  />
  < source
    type =" image/jpeg "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    sizes =" (max-width: 768px) 375px, 800px "
  />

  < img
    src =" /_next/static/images/[email protected] "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    width =" 375 "
    height =" 250 "
    alt =" Jellyfish "
  />
</ picture >

Afficher des exemples.

Usage

Installer le package

 npm install next-img

Ajoutez le plugin à votre next.config.js :

 const withImg = require ( 'next-img/plugin' )

module . exports = withImg ( {
  nextImg : {
    breakpoints : [ 768 ] ,
  } ,
} )

Dans votre application, importez les images et intégrez à l'aide du composant <Picture /> :

 import { Picture } from 'next-img'
import jelly from './images/jelly.jpg?sizes=375,800'

export default ( ) => < Picture src = { jelly } />

Ou en ligne:

 import { Picture } from 'next-img'

export default ( ) => < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } />

Cet exemple particulier générera les images suivantes:

• Image large de 375px à afficher sur de petits écrans à faible densité de pixels de 1x
• Image large de 750px à afficher sur de petits écrans avec une densité élevée de pixels de 2x ou plus
• Image de large 800px à afficher sur de grands écrans avec une densité de faible pixel de 1x
• Image large de 1600px à afficher sur de grands écrans avec une densité élevée de pixels de 2x ou plus

Les images redimensionnées et optimisées seront enregistrées dans le répertoire resources à la racine de votre projet pendant le développement. Cela signifie que si vous modifiez les paramètres d'importation d'image ou la configuration du plugin, vous pouvez générer des images supplémentaires qui ne sont plus utilisées par votre projet. Dans ce cas, exécutez la commande next-img pour supprimer toutes les images inutiles et construire toutes les manquantes:

 npx next-img

Vérifiez maintenant le répertoire resources à votre contrôle de source à réutiliser plus tard pour le développement et les versions de production. Vous pouvez désactiver cette fonctionnalité en définissant persistentCache: false dans la configuration du plugin, auquel cas les images ne seront stockées que dans un cache temporaire à l'intérieur du répertoire .next .

Voir plus d'exemples d'utilisation.

Configuration

Options de configuration du plugin par défaut:

 {
  // global settings for images, can be overriden per image
  breakpoints : [ 768 ] ,
  densities : [ '1x' , '2x' ] ,

  // output image quality configuration
  jpeg : {
    quality : 80 ,
    webp : {
      quality : 90 ,
      reductionEffort : 6 ,
    } ,
  } ,

  png : {
    quality : 100 ,
    webp : {
      reductionEffort : 6 ,
      lossless : true ,
    } ,
  } ,

  // the directory within Next.js build output
  imagesDir : 'images' ,
  // the output image name template
  imagesName : '[name]-[size]@[density]-[hash].[ext]' ,
  // advanced - customise the image public path
  imagesPublicPath : null ,
  // advanced - customise the image output path
  imagesOutputPath : null ,

  // persistent cache allows for fast deploy and
  // development workflow by avoiding reprocessing
  // images that were previously processed
  persistentCache : true ,
  persistentCacheDir : 'resources' ,

  // this directory within .next is used in case persistent cache is turned off
  cacheDir : path . join ( 'cache' , 'next-img' )
}

Reportez-vous à la documentation Sharp pour les options de compression jpeg/png/webp .

Importer des paramètres

Lors de l'importation d'une image, vous pouvez utiliser des paramètres de requête pour personnaliser l'optimisation:

• Tailles - Une liste de tailles séparées par virgules sur lesquelles vous afficherez des images. Notez que vous n'avez pas besoin de prendre en compte les densités de pixels ici. Autrement dit, si vous affichez une image à 320px de large sur votre site Web, spécifiez simplement 320 ici, le plugin produira toutes les versions plus grandes nécessaires en fonction de la configuration densities .
• Densités - Une liste de densités séparées par virgules dans lesquelles vous avez besoin de chaque taille d'image. Par défaut, 1x et 2x tailles d'images seront produits, spécifiez 1x si vous souhaitez produire une seule image par taille, ou 1x,2x,3x , etc. si vous voulez plus de densités.
• JPEG - Options de configuration de qualité pour les images jpeg . Remarque, les paramètres jpeg->webp doivent être ?jpeg[webp][quality]=95 sous ce param
• PNG - Options de configuration de qualité pour les images png . ?png[webp][lossless]=false&png[webp][nearLossless]=true , les paramètres png->webp doivent être imbriqués sous ce param

Exemples:

 import img1 from './images/img.jpg'
import img2 from './images/img.jpg?sizes=375,900'
import img3 from './images/img.jpg?sizes=375,900&densities=1x'
import img4 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x'
import img5 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x&jpeg[quality]=70&jpeg[webp][quality]=70' 

Accessoires d'images

next-img est livré avec un composant React facilitant l'intégration des images.

Voici les accessoires que ce composant accède:

• Src l'image importée ou un tableau d'images importées.
• Points d'arrêt - Une liste de points d'arrêt pour remplacer la configuration globale.
• Tailles - Un attribut HTML personnalisé, par défaut, l'attribut de tailles est généré en fonction des images et des points d'arrêt disponibles.
• Le reste des accessoires et REF sont transmis à la balise img . Cela permet d'utiliser des attributs tels que alt , loading="lazy" , etc.

Une note sur la façon dont les tailles / médias sont générés

Lorsqu'une seule image est fournie via l'hélice src , chaque taille sera configurée pour s'afficher pour chaque point d'arrêt disponible à l'aide de l'attribut sizes attribute .

Par exemple, avec des points d'arrêt [375, 768] et ?sizes=100,400,800 le composant <Picture> appliquera l'attribut sizes suivantes:

 (max-width: 375px) 100px,
(max-width: 768px) 400px,
                   800px

Lorsqu'un tableau d'images est fourni via le src Prop, chaque image sera configurée pour s'afficher pour chaque point d'arrêt disponible à l'aide de l' media attribute .

Par exemple, avec des points d'arrêt [375, 768] et src=[img1, img2, img3] Le composant <Picture> appliquera l'attribut media suivant:

 < picture >
  < source media =" (max-width: 480px) " sizes =" {{img1 width}} " />
  < source media =" (max-width: 768px) " sizes =" {{img2 width}} " />
  < source sizes =" {{img3 width}} " />
  < img ... />
</ picture > 

FAQ

Dois-je utiliser le composant <Picture /> ?

Le composant d'image est facultatif. Vous pouvez gérer l'objet d'image importé comme vous le souhaitez.

Les images ne pourraient-elles pas être optimisées davantage?

Oui, vous pourriez probablement obtenir ~ 10% à 20% ou plus de compression si vous passez le jpg/png via ImageOptim ou d'autres outils. Le fait est que ce plugin publie un WebP déjà bien optimisé et que vous servez WebP à la plupart des navigateurs modernes, qui supprime la nécessité de presser cette taille de fichier supplémentaire pour jpg/png car ce sont les images de secours . Cependant, il peut y avoir des cas d'utilisation où des algorhiths de compression personnalisés sont BESOINSED et nous pourrions ajouter une prise en charge des transformations arbitraires dans ce plugin à l'avenir.

Développement

Pour développer ce projet, vous devrez exécuter un observateur pour le composant <Picture /> :

 npm install
npm run watch

Vous pouvez utiliser l'exemple comme terrain de jeu:

 cd example
npm install
next

Pour exécuter la commande next-img dans l'exemple Dir:

 node ../bin/next-img

Avenir

Feuille de route

• Autoriser une configuration différente pour jpg->webp et png->webp
• Autoriser la désactivation de la sortie webp/jpg/png
• Ajouter un support de requête ?raw qui ne traite en aucune façon l'image
• Supprimer le besoin de la commande next-img en branchant directement dans next build
• Ajouter la prise en charge des images CSS, en plus des images HTML
• En ligne de petites images

Et quelques idées pour savoir où ce projet pourrait être réalisé à l'avenir:

• Autoriser l'ajout de plugins d'optimisation imagemin dans le pipeline via la configuration. De cette façon, les utilisateurs peuvent contrôler comment optimiser leurs images plus granuarly.
• Traduire des tailles relatives ?sizes=100vw,50vw,900px à des pixels en fonction de la configuration du point d'arrêt, cela permettrait des importations dynamiques qui dépendent de votre système de conception et de votre dimensionnement relatif des images, par exemple, si CSS dit "50vw", vous n'aurez pas besoin de faire ce calcul manuellement.
• Mode de débogage qui imprime la taille des images en images elles-mêmes, afin que vous puissiez voir ce qui est montré lorsqu'il est juste dans le navigateur à l'intérieur des images (ou les superposer en utilisant JS au moment de l'exécution).
• Analyseur de code source qui analyse le code des images pour éviter la nécessité de les require() .
• Optimiser les opérations de lecture / écriture / hachage du fichier pour améliorer les performances.
• Un script de marionnettiste pour rendre le site Web dans tous les points d'arrêt prédéfinis et analyser automatiquement toutes les tailles d'image requises.
• Ajoutez la prise en charge de GIF et WebP comme images source.