# Plugins d’optimisation d’images et widgets Elementor : la cohabitation

> Activer Smush ou ShortPixel sur un site Elementor existant fait parfois ignorer l'optimisation à certaines images. Origine du problème et méthode de vérification.

- Auteur : Clément Hadrot
- Publié le : 2023-09-04
- Mis à jour le : 2023-09-04
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/plugins-optimisation-images-widgets-elementor-cohabitation/

## L’essentiel

- Les images de fond définies en CSS par Elementor échappent souvent à l'optimisation automatique d'un plugin classique
- Les widgets à galerie ou carrousel chargent parfois leurs images via une bibliothèque JavaScript propre non détectée
- Vérifier l'en-tête de réponse HTTP de chaque image reste la méthode la plus fiable pour confirmer une optimisation réelle

Un client a activé ShortPixel sur son site Elementor existant après un audit de performance signalant un poids d'images excessif. Après l'exécution de l'optimisation en masse sur la bibliothèque de médias, le score de performance n'a que très partiellement progressé. Une vérification image par image a révélé qu'environ un tiers des images visibles sur le site n'avaient en réalité subi aucune compression, malgré un rapport d'optimisation de la bibliothèque annonçant un traitement complet.

Ce décalage entre le rapport du plugin et la réalité observée sur le site public s'explique par la façon dont Elementor peut afficher une image sans toujours passer par le mécanisme standard de la bibliothèque de médias WordPress que les plugins d'optimisation surveillent en priorité.

## Symptôme : le rapport dit tout optimisé, le poids réel dit l'inverse

La bibliothèque de médias WordPress affichait bien un badge de compression sur la quasi-totalité des fichiers, y compris ceux qui semblaient inchangés sur le site public. Cette contradiction a orienté l'investigation vers la manière dont ces images étaient appelées dans le HTML final, plutôt que vers le fonctionnement du plugin lui-même.

## Diagnostic : trois sources d'images qui échappent au circuit standard

> L'essentiel à retenir : Les images de fond définies en CSS par Elementor échappent souvent à l'optimisation automatique d'un plugin classique ; Les widgets à galerie ou carrousel chargent parfois leurs images via une bibliothèque JavaScript propre non détectée ; Vérifier l'en-tête de réponse HTTP de chaque image reste la méthode la plus fiable pour confirmer une optimisation réelle

L'inspection du code source des pages concernées a permis d'identifier trois cas distincts où l'image affichée ne correspondait pas au fichier optimisé stocké dans la bibliothèque :

- Les images de fond de section définies directement en CSS par Elementor (propriété `background-image`) pointent bien vers le fichier original, mais certains plugins d'optimisation ne scannent que les balises `<img>` classiques et ignorent les références CSS
- Un widget de galerie tiers, installé via un addon Elementor populaire, chargeait ses vignettes via sa propre bibliothèque JavaScript qui régénérait des tailles d'image à la volée, court-circuitant ainsi le cache d'optimisation généré par ShortPixel
- Les images insérées via le widget HTML brut, chemin déjà identifié comme échappant à d'autres mécanismes natifs d'Elementor, échappaient également à toute optimisation automatique puisqu'elles ne transitent jamais par la bibliothèque de médias structurée de WordPress

### Vérifier réellement plutôt que de croire le rapport du plugin

La méthode la plus fiable pour confirmer qu'une image est réellement optimisée consiste à ouvrir l'onglet Réseau des outils de développement du navigateur, sélectionner la requête de l'image concernée, et vérifier son poids réel transféré ainsi que, si le plugin l'indique, un en-tête de réponse HTTP personnalisé confirmant le passage par le service de compression. Se fier uniquement au badge affiché dans la bibliothèque de médias WordPress s'est révélé insuffisant sur ce projet.

| Type d'image | Optimisée automatiquement | Action corrective |
| --- | --- | --- |
| Image insérée via widget Image classique | Oui | Aucune |
| Image de fond CSS (background-image) | Non systématiquement | Vérifier la compatibilité du plugin, compresser manuellement sinon |
| Galerie d'un addon tiers avec JS propre | Non | Compresser en amont avant import |
| Image via widget HTML brut | Non | Optimiser manuellement avant intégration |

## Correctif appliqué

Pour les images de fond en CSS, la solution a consisté à compresser manuellement les fichiers sources avant de les redéfinir en arrière-plan, plutôt que de compter sur une optimisation automatique après coup. Pour le widget de galerie tiers, un remplacement par le widget Gallery natif d'Elementor, compatible avec le circuit standard de la bibliothèque de médias, a résolu le problème sans perte fonctionnelle notable pour ce projet précis.

> Ne validez jamais une optimisation d'images sur la seule foi du tableau de bord du plugin : vérifiez le poids réellement transféré sur au moins un échantillon représentatif de chaque type de widget utilisé sur le site.

## En résumé

Un plugin d'optimisation d'images classique couvre efficacement les images insérées de façon standard, mais laisse filer les images de fond CSS, les galeries tierces avec leur propre gestion JavaScript, et tout ce qui transite par un widget HTML brut. Sur ce projet, l'audit poste par poste a permis de faire passer le poids réel des images du site sous la barre jugée correcte par l'audit de performance initial, là où le rapport du plugin seul laissait croire à tort que le travail était déjà terminé.