Blog

Pourquoi l'optimisation des images est-elle importante ?

Il semble que les performances web aient été l'un des sujets de développement web les plus importants de ces dernières années.  La vitesse de votre site Web a toujours été un facteur majeur pour placer votre site Web en haut de la liste de recherche Google ou en bas. Cependant, les fichiers image trop volumineux ou non optimisés peuvent avoir un impact négatif sur les performances du site et même l'expérience utilisateur.

Les images représentent un composant important de la plupart des applications, cela signifie que nous pouvons trouver leur impact négatif sur les performances de millions de sites web.

Sharp, le module de traitement des images en Node Js

Il existe de nombreux modules Node Js qui compressent les images. Le module Sharp est venu faire la même chose, compresser les images, mais l'essentiel cette fois-ci est de faire ce processus plus rapidement et même de produire des résultats de haute qualité !

Sharp prend en charge la lecture des images JPEG, PNG, WebP, GIF, AVIF, TIFF et SVG.

• Utilisation

Sharp est un module Node Js, pour l'installer, nous devons utiliser un gestionnaire de packages comme Npm 

npm install sharp

il existe de nombreux cas d'utilisation du module Sharp, l'un d'entre eux consiste à convertir des images en webP, mais pourquoi le faire ?

En utilisant WebP, les développeurs web créent des images plus petites et plus riches qui rendent le web plus rapide, c'est un format d'image moderne qui offre une compression supérieure.

Notez que WebP est pris en charge de manière native dans Google Chrome, Safari, Firefox, Edge, le navigateur Opera et de nombreux autres outils logiciels et bibliothèques.

Voici un exemple de comment pouvons-nous convertir une image jpg en webP en utilisant des méthodes du module Sharp :

const sharp = require("sharp")

sharp("file.jpg")
    .webp()
    .toFile("new-file.webp")
    .then(function(info) {
        console.log(info)
    })
    .catch(function(err) {
        console.log(err)
    })

Lorsque vous exécutez le code, vous devriez obtenir une sortie semblable à celle-ci :

{
    format: 'webp',
    width: 1200,
    height: 800,
    channels: 4,
    premultiplied: false,
    size: 30000
}

Tout d'abord, nous importons le package npm Sharp et le maintenons dans la variable Sharp.

Ensuite, nous utilisons le package Sharp pour lire notre fichier file.jpg et le convertir en WEBP à l'aide de la fonction .toFile().

Afin de déterminer si le format a vraiment changé ou juste l'extension du fichier, nous avons utilisé la méthode Sharp pour obtenir les informations du fichier une fois qu'il a été écrit dans notre répertoire.

Enfin, nous utilisons la méthode .catch() et console.log() en cas d'erreurs.

C'est l'un des nombreux cas d'utilisation que le module Sharp propose aux développeurs, vous pouvez ensuite redimensionner, composer et manipuler les couleurs d'une image à l'aide de Sharp.