Un des critères qui a le plus d'influence sur la performance votre site Web est la gestion des images.
Pour optimiser les images dans Drupal, plusieurs techniques et modules permettent de réduire le poids des images, d'améliorer les performances du site et d'assurer une expérience utilisateur optimale, notamment pour le SEO et la compatibilité avec différents appareils.
Voici les principales approches basées sur les bonnes pratiques et les outils disponibles :
Utilisation des styles d'image (Image Styles)
Drupal permet de créer des styles d'image pour redimensionner et recadrer automatiquement les images en fonction des besoins d'affichage
- Penser à appliquer des effets comme le redimensionnement, le recadrage, ou la compression pour réduire la taille des fichiers tout en maintenant une qualité acceptable.
- Astuce : Assurez-vous que les images originales ne sont pas affichées directement, mais passent par ces styles pour éviter de charger des fichiers trop lourds.
Effets disponibles pour les images
Lors de la création des styles vous pouvez appliquer les différents effets ci dessous :
| Effet | Description |
|---|---|
| Recadrage (Crop) | Supprime les portions d'une image pour obtenir les dimensions exactes spécifiées. Utile pour adapter l'aspect sans déformer l'image. |
| Redimensionnement (Resize) | Ajuste l'image à des dimensions précises, ce qui peut étirer ou rétrécir l'image de manière disproportionnée si les proportions ne correspondent pas. |
| Échelle (Scale) | Redimensionne l'image proportionnellement pour qu'elle tienne dans une boîte définie (largeur ou hauteur maximale), sans déformation. |
| Échelle et recadrage (Scale and crop) | Combine l'échelle proportionnelle avec un recadrage pour obtenir des dimensions exactes, idéal pour les vignettes ou les formats standard. |
| Rotation (Rotate) | Tourne l'image d'un angle spécifié (par exemple, 90°, 180°), ce qui peut augmenter les dimensions pour accommoder la diagonale. |
| Désaturation (Desaturate) | Convertit l'image en niveaux de gris en supprimant les couleurs, pour un effet monochrome. |
Ces effets peuvent être combinés dans un même style d'image pour des résultats personnalisés, comme une vignette carrée en noir et blanc.
Effets supplémentaires via modules contrib
Drupal permet d'étendre ces effets avec des modules tiers. Par exemple :
- Module Crop : Ajoute "Manual crop" pour un recadrage manuel par l'utilisateur.
- Module Image Effects : Fournit une suite d'effets avancés comme les filtres (flou, netteté), les superpositions de couleurs, les bordures, ou les effets artistiques (successeur de modules comme ImageMagick ou Smart Crop).
Images adaptatives (Responsive Images)
Le module Responsive Image (inclus dans le cœur de Drupal) permet de servir des images adaptées à la taille de l'écran et à la résolution
- Créer les styles d'images en fonction des breakpoints que vous avez définis pour le responsive (Desktop, Mobile, Tablette...)
- Avantage : Réduit la bande passante en chargeant uniquement l'image adaptée à l'appareil de l'utilisateur.
Lazy Loading natif
Drupal intègre le lazy loading nativement, ce qui retarde le chargement des images non visibles à l'écran, améliorant ainsi le temps de chargement initial et les métriques Core Web Vitals
- Exception pour LCP : Pour les images critiques (comme les bannières ou logos en haut de page), désactivez le lazy loading en surchargeant le template image.html.twig pour supprimer l'attribut loading="lazy". Exemple :
- Avantage : Réduit la charge initiale du navigateur et améliore les performances
Compression des images
La compression réduit la taille des fichiers sans compromettre la qualité visuelle :
- Modules recommandés :
- Image Optimize : Permet de créer des pipelines d'optimisation pour compresser automatiquement les images JPEG et PNG lors de leur chargement ou lors de la génération des styles d'image.
- ImageAPI Optimize WebP : Convertit les images au format WebP, plus léger que JPEG ou PNG, tout en maintenant une bonne qualité.
Utilisation du format WebP
Le format WebP offre une meilleure compression que JPEG et PNG, tout en supportant la transparence :
- Module : Installez WebP et activez-le avec Responsive Image et Blazy pour gérer le lazy loading et la conversion automatique.
Mise en cache et CDN
- Mise en cache : Activez la mise en cache des images via Configuration > Développement > Performance (/admin/config/development/performance) pour réduire les requêtes serveur. Utilisez des en-têtes HTTP "Expires" pour stocker les images dans le cache du navigateur
- CDN : Intégrez un réseau de diffusion de contenu (CDN) comme Cloudflare ou AWS CloudFront pour servir les images depuis des serveurs proches des utilisateurs.
Autres bonnes pratiques
- Utiliser des noms d'image optimisées pour le SEO avec le descriptifs.
- Éviter les images surdimensionnées en évitant d'uploader une image de 4000px
- Mettre à jour Drupal et les modules : Assurez-vous d'utiliser la dernière version de Drupal et des modules pour bénéficier des améliorations de performance
Vérification de l'optimisation des images
Pour vérifier l'optimisation des images, utilisé Lighthouse (intégré à Chrome DevTools) qui va vérifier le format des images, leur optimisation, leur chargement différé ... et vous indiquer quand des optimisations sont possibles.
Chez LabSoft, nos experts Drupal configurent les paramétrages pour optimiser vos images.
Contactez-nous pour améliorer les performances de votre site !
Retrouvez d'autres articles pour optimiser la performance de votre site Drupal
LabSoft accompagne les sites suivants dans leur refonte Drupal
