Comment compresser vos images sur votre serveur et sur Drupal?

Dans notre vie d'agence, nous avons repris de nombreux sites qui contenaient des centaines de Go de données. C'est parfois justifié et parfois pas du tout. Dans notre démarche de concevoir et de maintenir des sites éco-responsables, nous avons mis en place des process pour réduire considérablement ce volume de donnée sans aller à l'encontre de la qualité ou de l'expérience utilisateur.

Optimiser les images sur un serveur Linux (Debian)

Pour un site existant, nous faisons tourner ce script sur le répertoire des images. 

Ce script réalise les actions suivantes : 

• Compression et optimisation des jpg à 85%
• Compression et optimisation des png au niveau 3
• Réoriente selon les informations EXIF, redimensionne si nécessaire, et optimise la qualité.

Voici le script : 

#!/bin/bash
# Vérifiez si un répertoire a été fourni
if [ "$#" -ne 1 ]; then
   echo "Usage: $0 <directory>"
   exit 1
fi
DIRECTORY=$1
# Pourcentage de qualité à conserver pour les JPEG
JPEG_QUALITY=85
# Niveau d'optimisation pour PNG (0-7, 7 étant le plus lent mais le plus efficace)
PNG_OPT_LEVEL=3
# Fonction pour optimiser les images JPEG
optimize_jpeg() {
   find "$DIRECTORY" -type f -iname "*.jpg" -o -iname "*.jpeg" | while read -r FILE
   do
       # Réorienter physiquement l'image selon les informations EXIF
       mogrify -auto-orient "$FILE"
       # Obtenez les dimensions de l'image
       WIDTH=$(identify -format "%w" "$FILE")
       HEIGHT=$(identify -format "%h" "$FILE")
       # Redimensionnez l'image seulement si elle est plus grande que la taille cible
       if [ "$WIDTH" -gt 1900 ] && [ "$WIDTH" -gt "$HEIGHT" ]; then
           mogrify -resize 1900x "$FILE"
       elif [ "$HEIGHT" -gt 1600 ] && [ "$HEIGHT" -gt "$WIDTH" ]; then
           mogrify -resize x1600 "$FILE"
       fi
       
       jpegoptim --max=$JPEG_QUALITY "$FILE"
   done
}
# Fonction pour optimiser les images PNG
optimize_png() {
   find "$DIRECTORY" -type f -iname "*.png" | while read -r FILE
   do
       # Obtenez les dimensions de l'image
       WIDTH=$(identify -format "%w" "$FILE")
       HEIGHT=$(identify -format "%h" "$FILE")
       # Redimensionnez l'image seulement si elle est plus grande que la taille cible
       if [ "$WIDTH" -gt 1900 ] && [ "$WIDTH" -gt "$HEIGHT" ]; then
           mogrify -resize 1900x "$FILE"
       elif [ "$HEIGHT" -gt 1600 ] && [ "$HEIGHT" -gt "$WIDTH" ]; then
           mogrify -resize x1600 "$FILE"
       fi
       optipng -o$PNG_OPT_LEVEL "$FILE"
   done
}
echo "Optimizing JPEG images..."
optimize_jpeg
echo "Optimizing PNG images..."
optimize_png
echo "Optimization complete!"

Vous pouvez lancer le script (en étant dans le répertoire où se trouve le script) via la commande suivante :

./optimize_images.sh /cheminverslerépertoiredesimages

Optimisation des images avec Drupal

Voici les modules identifiés pour optimiser les images avec Drupal

• Le module Image Optimize de Drupal permet d'améliorer la performance des sites web en réduisant la taille des images tout en maintenant une qualité acceptable
• Le module ImageAPI Optimize WebP de Drupal est conçu pour améliorer les performances des sites web en convertissant les images en format WebP, un format d'image moderne qui offre une meilleure compression sans perte significative de qualité par rapport aux formats traditionnels comme JPEG et PNG.
• Le module Media Responsive Thumbnail ajoute un type de formatter pour les champs Medias afin de sélectionner directement un image style responsive depuis une entité au lieu d’aller configurer un type d’affichage pour chaque image style dans le media Image.
• Le module Field Formatter Range permet de sélectionner qu’une seule image ou un seul élément de rendu pour un champ dans le cas d’un champ Multiple, très utile si l’on doit afficher la première image d’un champ multiple sur un teaser d’une entité.