Sharp

Une bibliothèque de traitement d'images haute performance pour Node.js qui permet de redimensionner, convertir et optimiser des images avec une vitesse et une efficacité exceptionnelles.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que Sharp ?

Imaginez que vous possédiez une usine de transformation qui doit rapidement traiter des milliers de photos pour un magazine en ligne. Vous auriez besoin d'équipements ultra-performants, fiables et capables de produire des images de haute qualité tout en optimisant leur taille.

Sharp joue exactement ce rôle dans le monde numérique. C'est une bibliothèque de traitement d'images pour Node.js qui permet aux développeurs de modifier, convertir et optimiser des images de manière incroyablement rapide et efficace.

Pourquoi Sharp est-il si important ?

Performance

Sharp est extrêmement rapide, jusqu'à 4 à 5 fois plus rapide que d'autres bibliothèques similaires, ce qui est essentiel pour les sites web qui traitent de nombreuses images.

Optimisation web

Les images représentent souvent la majorité du poids d'une page web. Sharp permet de réduire considérablement leur taille sans perte visible de qualité, accélérant le chargement des sites.

En résumé, Sharp est un outil essentiel pour tout site web moderne qui souhaite offrir une expérience rapide et de qualité à ses utilisateurs, tout en réduisant la consommation de données et les coûts de bande passante.

Pour les développeurs

Fonctionnement technique

Sharp est une bibliothèque Node.js qui utilise libvips, une bibliothèque de traitement d'images C extrêmement rapide et économe en mémoire. Cette combinaison offre des performances exceptionnelles pour le redimensionnement et la manipulation d'images.

Fonctionnalités essentielles

Utilisation de base

Voici un exemple simple de redimensionnement et de conversion d'image avec Sharp :

Exemple de base

const sharp = require('sharp');

// Redimensionner une image et la convertir en WebP
sharp('input.jpg')
  .resize(800, 600)
  .webp({ quality: 80 })
  .toFile('output.webp')
  .then(() => console.log('Conversion réussie'))
  .catch(err => console.error('Erreur lors de la conversion:', err));

Redimensionnement avancé

Sharp offre de nombreuses options pour contrôler précisément comment les images sont redimensionnées :

Options de redimensionnement

const sharp = require('sharp');

// Redimensionner en conservant les proportions (fit: cover)
sharp('original.jpg')
  .resize({
    width: 500,
    height: 300,
    fit: sharp.fit.cover, // Redimensionne et recadre pour remplir les dimensions
    position: sharp.strategy.attention // Focus sur la partie importante de l'image
  })
  .toFile('thumbnail-cover.jpg');

// Redimensionner en conservant tout le contenu (fit: contain)
sharp('original.jpg')
  .resize({
    width: 500,
    height: 300,
    fit: sharp.fit.contain, // Redimensionne pour s'adapter aux dimensions sans couper
    background: { r: 255, g: 255, b: 255, alpha: 1 } // Fond blanc
  })
  .toFile('thumbnail-contain.jpg');

// Redimensionner seulement la largeur (hauteur automatique)
sharp('original.jpg')
  .resize(500, null)
  .toFile('width-only.jpg');

// Redimensionner seulement la hauteur (largeur automatique)
sharp('original.jpg')
  .resize(null, 300)
  .toFile('height-only.jpg');

Conversion de formats

Convertir les images entre différents formats avec un contrôle précis sur la compression est l'une des forces de Sharp :

Conversion de formats

const sharp = require('sharp');

// Conversion en WebP avec contrôle de la qualité
sharp('input.jpg')
  .webp({ quality: 80, lossless: false })
  .toFile('output.webp');

// Conversion en AVIF (format très efficace)
sharp('input.jpg')
  .avif({ quality: 50 })
  .toFile('output.avif');

// Conversion en PNG
sharp('input.jpg')
  .png({ palette: true }) // Utilisez une palette pour réduire la taille
  .toFile('output.png');

// Conversion en JPEG avec contrôle de la qualité
sharp('input.png')
  .jpeg({
    quality: 90,
    chromaSubsampling: '4:4:4', // Meilleure qualité (4:2:0 pour plus petite taille)
    mozjpeg: true // Utilise mozjpeg pour une meilleure compression
  })
  .toFile('output.jpg');

Traitement et filtres

Sharp permet d'appliquer de nombreux filtres et ajustements aux images :

Filtres et traitements

const sharp = require('sharp');

// Appliquer un flou gaussien
sharp('input.jpg')
  .blur(10) // Sigma=10 (niveau de flou)
  .toFile('blurred.jpg');

// Ajuster la netteté
sharp('input.jpg')
  .sharpen({
    sigma: 1.5, // Rayon du filtre
    flat: 1.0, // Ajuste les pixels plats
    jagged: 2.0 // Ajuste les pixels avec des bords
  })
  .toFile('sharpened.jpg');

// Ajuster la luminosité, le contraste et la saturation
sharp('input.jpg')
  .modulate({
    brightness: 1.2, // Augmente la luminosité de 20%
    saturation: 1.5, // Augmente la saturation de 50%
    hue: 90 // Rotation de la teinte de 90 degrés
  })
  .toFile('adjusted.jpg');

// Appliquer un gamma
sharp('input.jpg')
  .gamma(2.2) // Correction gamma
  .toFile('gamma-corrected.jpg');

// Inverser les couleurs
sharp('input.jpg')
  .negate() // Inversion des couleurs
  .toFile('negative.jpg');

// Niveaux de gris
sharp('input.jpg')
  .grayscale()
  .toFile('grayscale.jpg');

Composition d'images

Vous pouvez combiner plusieurs images, ajouter des filigranes ou créer des compositions complexes :

Composition d'images

const sharp = require('sharp');

// Ajouter un texte ou un logo en filigrane
async function addWatermark(inputImage, outputImage, watermarkImage) {
  try {
    // Charger l'image source
    const metadata = await sharp(inputImage).metadata();
    
    // Redimensionner le filigrane à 25% de la largeur de l'image
    const watermarkWidth = Math.round(metadata.width * 0.25);
    
    // Créer une version redimensionnée du filigrane
    const resizedWatermark = await sharp(watermarkImage)
      .resize(watermarkWidth)
      .toBuffer();
    
    // Superposer le filigrane sur l'image originale
    await sharp(inputImage)
      .composite([
        {
          input: resizedWatermark,
          gravity: 'southeast' // Position en bas à droite
        }
      ])
      .toFile(outputImage);
      
    console.log('Filigrane ajouté avec succès');
  } catch (error) {
    console.error('Erreur lors de l'ajout du filigrane:', error);
  }
}

// Fusionner plusieurs images avec des masques
async function createComposite() {
  try {
    // Créer une image composite avec plusieurs calques
    await sharp('background.jpg')
      .composite([
        {
          input: 'foreground.png',
          blend: 'over' // Mode de fusion
        },
        {
          input: 'mask.png',
          blend: 'dest-in' // Utiliser comme masque
        },
        {
          input: { create: {
            width: 200,
            height: 200,
            channels: 4,
            background: { r: 255, g: 0, b: 0, alpha: 0.5 }
          }},
          left: 100,
          top: 100
        }
      ])
      .toFile('composite.jpg');
    
    console.log('Composite créé avec succès');
  } catch (error) {
    console.error('Erreur lors de la création du composite:', error);
  }
}

Optimisation pour le web

Un exemple plus complet d'optimisation d'images pour le web responsive :

Optimisation d'images

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

// Fonction pour optimiser une image en créant plusieurs variantes
async function optimizeImage(inputPath, outputDir) {
  try {
    const filename = path.parse(inputPath).name;
    const metadata = await sharp(inputPath).metadata();
    
    // Créer le dossier de sortie s'il n'existe pas
    if (!fs.existsSync(outputDir)) {
      fs.mkdirSync(outputDir, { recursive: true });
    }
    
    // Créer différentes tailles pour le responsive
    const sizes = [
      { width: 320, suffix: 'xs' },
      { width: 640, suffix: 'sm' },
      { width: 1024, suffix: 'md' },
      { width: 1920, suffix: 'lg' }
    ];
    
    // Array de promesses pour traitement parallèle
    const tasks = sizes.map(size => {
      // Calculer la hauteur en conservant les proportions
      const height = Math.round(size.width * (metadata.height / metadata.width));
      
      // Créer des versions WebP et JPEG
      return Promise.all([
        // Version WebP (meilleure compression avec bonne qualité)
        sharp(inputPath)
          .resize(size.width, height)
          .webp({ quality: 80 })
          .toFile(path.join(outputDir, `${filename}-${size.suffix}.webp`)),
          
        // Version JPEG de secours pour compatibilité
        sharp(inputPath)
          .resize(size.width, height)
          .jpeg({ quality: 80, mozjpeg: true })
          .toFile(path.join(outputDir, `${filename}-${size.suffix}.jpg`))
      ]);
    });
    
    // Exécuter toutes les tâches en parallèle
    await Promise.all(tasks.flat());
    
    console.log(`Image optimisée avec succès : ${inputPath}`);
    return {
      originalSize: metadata.size,
      sizes: sizes.map(size => ({
        width: size.width,
        webp: `${filename}-${size.suffix}.webp`,
        jpg: `${filename}-${size.suffix}.jpg`
      }))
    };
  } catch (error) {
    console.error(`Erreur lors de l'optimisation : ${inputPath}`, error);
    throw error;
  }
}

Intégration avec Next.js

Utilisez Sharp pour créer une API de transformation d'images à la volée dans Next.js :

Intégration Next.js

// pages/api/resize.js
import sharp from 'sharp';
import fs from 'fs';

export default async function handler(req, res) {
  // Seulement accepter les requêtes POST
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Méthode non autorisée' });
  }

  try {
    // Récupérer le fichier d'image depuis la requête
    const imageBuffer = req.body;
    
    // Vérifier qu'il y a bien une image
    if (!imageBuffer || imageBuffer.length === 0) {
      return res.status(400).json({ error: 'Aucune image fournie' });
    }

    // Traiter l'image avec Sharp
    const processedImageBuffer = await sharp(imageBuffer)
      .resize(800, 600, { fit: 'inside' })
      .webp({ quality: 80 })
      .toBuffer();

    // Définir les headers pour servir l'image traitée
    res.setHeader('Content-Type', 'image/webp');
    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
    
    // Envoyer l'image traitée
    return res.status(200).send(processedImageBuffer);
  } catch (error) {
    console.error('Erreur lors du traitement de l'image:', error);
    return res.status(500).json({ error: 'Erreur lors du traitement de l'image' });
  }
}

// Composant Next.js avec un hook personnalisé d'optimisation d'image
import { useState, useCallback } from 'react';
import Image from 'next/image';

function ImageUploader() {
  const [preview, setPreview] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  
  const processImage = useCallback(async (file) => {
    if (!file) return;
    
    setIsProcessing(true);
    
    try {
      // Convertir le fichier en ArrayBuffer
      const buffer = await file.arrayBuffer();
      
      // Envoyer l'image à notre API pour traitement
      const response = await fetch('/api/resize', {
        method: 'POST',
        body: buffer,
      });
      
      if (!response.ok) {
        throw new Error('Erreur lors du traitement de l'image');
      }
      
      // Convertir la réponse en blob et créer une URL
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      
      setPreview(url);
    } catch (error) {
      console.error('Erreur:', error);
      alert('Échec du traitement de l'image');
    } finally {
      setIsProcessing(false);
    }
  }, []);
  
  return (
    <div>
      <input
        type="file"
        accept="image/*"
        onChange={(e) => processImage(e.target.files[0])}
        disabled={isProcessing}
      />
      
      {isProcessing && <p>Traitement en cours...</p>}
      
      {preview && (
        <div style={{ marginTop: '20px' }}>
          <Image
            src={preview}
            alt="Image optimisée"
            width={800}
            height={600}
          />
        </div>
      )}
    </div>
  );
}

Avantages techniques

Performance exceptionnelle - Traitement jusqu'à 4-5x plus rapide que les alternatives comme ImageMagick ou GraphicsMagick
Faible consommation mémoire - Utilise libvips qui est conçu pour traiter de grandes images avec une empreinte mémoire minimale
Support des formats modernes - WebP, AVIF et autres formats à haute efficacité
Traitement par streams - Possibilité de traiter des images en streaming sans écrire sur le disque
API fluide - Interface chainable qui rend le code lisible et maintenable

Considérations importantes

Dépendances natives - L'installation peut être complexe sur certains environnements en raison des dépendances C/C++
Utilisation serveur - Sharp est principalement conçu pour Node.js côté serveur, non pour le navigateur
Mémoire vs vitesse - Certaines opérations peuvent être coûteuses en mémoire pour des gains de performance
Compatibilité avec les métadonnées - Certaines métadonnées peuvent être perdues lors des transformations
Courbe d'apprentissage - De nombreuses options disponibles peuvent nécessiter du temps pour maîtriser la bibliothèque

Applications concrètes

Cas d'usage

Sites e-commerce

Génération automatique de miniatures et d'images adaptées à différentes tailles d'écran pour les catalogues de produits, avec conversion en formats modernes comme WebP pour réduire les temps de chargement.

Plateformes de partage de médias

Traitement des téléchargements utilisateurs avec génération automatique de différentes résolutions, application de filtres et optimisation pour le web.

Applications responsive

Création d'API d'images dynamiques qui servent automatiquement la taille et le format optimaux en fonction de l'appareil de l'utilisateur pour améliorer les performances.

Filigranes et protection de contenu

Application automatique de logos ou filigranes sur les images, génération de vignettes de prévisualisation avec qualité réduite, ou création de versions sécurisées des images.