Optimisation d'images : Convertissez et compressez PNG, JPG en WebP avec Node.js

L'ère numérique a mis les images au premier plan de notre expérience de navigation. Cependant, le problème est que ces images peuvent souvent occuper une bande passante considérable, ce qui affecte les performances du site web. Nous pouvons lutter contre cela en réduisant la taille des images grâce à un processus appelé Optimisation d'images. Dans cet article, nous explorerons comment convertir des fichiers d'images tels que PNG et JPG en WebP et les compresser à l'aide de Node.js.

# Pourquoi choisir WebP ?

WebP, un format d'image moderne développé par Google, offre une compression supérieure avec et sans perte pour les images web. En convertissant les fichiers PNG et JPG en WebP, nous pouvons obtenir des tailles de fichier plus petites sans compromettre la qualité de l'image, ce qui permet finalement de charger nos sites web plus rapidement.

# Configuration de Node.js

Avant de commencer le processus de conversion, assurez-vous d'avoir Node.js installé. Si ce n'est pas le cas, téléchargez et installez-le selon votre système d'exploitation.

# Installation des modules requis

Nous utiliserons deux packages npm : sharp pour la conversion d'images et imagemin-webp pour la compression d'images.

npm install sharp imagemin imagemin-webp

# Conversion d'images en WebP

Utilisons le module sharp pour convertir une image PNG ou JPG en WebP. Cela se fait en lisant le fichier d'entrée et en le transformant dans le format WebP.

const sharp = require('sharp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => console.log('Conversion d'image terminée.'))
  .catch(err => console.error(err));

# Compression des images WebP

Ensuite, compressons l'image WebP convertie en utilisant le module imagemin-webp.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['output.webp'], {
    destination: 'compressed_images',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });

  console.log('Compression d'image terminée.');
})();

# Code complet

const sharp = require('sharp');
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => {
    (async () => {
      await imagemin(['output.webp'], {
        destination: 'compressed_images',
        plugins: [
          imageminWebp({quality: 50})
        ]
      });

      console.log('Conversion et compression d'image terminées.');
    })();
  })
  .catch(err => console.error(err));

Ce script complet convertira votre image au format WebP et la compressera.

# Conclusion

Voilà : une façon efficace de convertir et de compresser PNG et JPG en WebP avec Node.js. Vous pouvez maintenant optimiser vos images, accélérer les temps de chargement de votre site web et offrir une meilleure expérience utilisateur. Avec un peu de pratique, ces étapes deviendront naturelles.

# FAQ

1. Pourquoi devrais-je utiliser WebP plutôt que PNG ou JPG ? WebP offre une compression supérieure, réduisant la taille des fichiers sans perte significative de qualité d'image.

2. Pourquoi devons-nous compresser les images ? La compression des images réduit leur taille de fichier, ce qui peut considérablement améliorer les temps de chargement du site web et économiser de la bande passante.

3. Puis-je utiliser d'autres langages de programmation pour cette tâche ? Oui, d'autres langages comme Python, Java, etc., disposent également de bibliothèques pour la conversion et la compression d'images. Cependant, ce tutoriel se concentre sur Node.js.

4. Que faire si le processus de conversion ou de compression échoue ? Assurez-vous que Node.js et tous les modules requis sont correctement installés. Si le problème persiste, le problème peut être lié à l'image elle-même.

5. Puis-je ajuster le niveau de compression ? Oui, le plugin imagemin-webp vous permet d'ajuster le paramètre de qualité pour contrôler le niveau de compression.