Le symptôme : images cassées, erreurs 502 à gogo
Vous venez d’optimiser toutes vos images en WebP via Imagify, confiant comme jamais… et là :
🔴 Images qui ne s’affichent plus
🔴 Console remplie d’erreurs 502
🔴 Site qui rame, comme votre patience
C’est frustrant. Et la faute n’est pas toujours facile à identifier. 😤
Le coupable déguisé : Imagify + méthode <picture> + NGINX = 💥
Sous le capot, Imagify propose deux méthodes pour afficher les images WebP ou AVIF :
🧩 Option 1 : les balises <picture> (méthode recommandée par Imagify)
Cette option insère dynamiquement des balises <picture> qui permettent d’afficher la version WebP ou AVIF si elle existe, et de revenir à l’image JPG/PNG si besoin.
👉 Parfait en théorie, mais…
⚠️ Ce que ça peut casser :
- Certains thèmes WordPress gèrent déjà les images avec des classes ou wrappers spécifiques, et l’injection de
<picture>peut les désorganiser. - Les constructeurs de pages comme Elementor 😅 ou WPBakery peuvent interpréter mal les balises ajoutées.
- Résultat : affichage cassé, ou images complètement invisibles.
🧩 Option 2 : les règles de réécriture (Rewrite Rules)
Imagify propose une méthode serveur qui modifie directement les requêtes d’images pour servir les versions WebP ou AVIF sans toucher au HTML.
Mais… uniquement pour les serveurs configurables.
Pourquoi Imagify n’écrit pas les règles automatiquement sur NGINX
Contrairement à Apache, qui utilise des .htaccess modifiables par plugin, NGINX ne permet pas cela dynamiquement.
👉 Il faut éditer manuellement la configuration serveur.
Et non, Imagify ne vous prévient pas toujours clairement. Un message est bien visible mais il faut être très attentif pour le voir.
😅 Faux espoir : le fichier conf/imagify.conf vide
Imagify peut créer ce fichier, mais il n’est pas inclus automatiquement dans NGINX.
Résultat : rien ne se passe. Pas de WebP, pas d’erreur explicite. Juste… du vide.
La solution propre (et qui marche)
✅ Étape 1 : activer les règles de réécriture dans Imagify
Dans votre interface WordPress :
🔧 Réglages > Imagify > Affichage des images au format WebP/AVIF
👉 Activez l’option « Utiliser les règles de réécriture »
Cela permet à Imagify de préparer les règles nécessaires pour que votre site affiche automatiquement les versions optimisées des images.
🛠️ Étape 2 : insérer les règles dans votre configuration serveur
Vous devez maintenant copier le petit bloc de code suivant dans le fichier de configuration imagify.conf créé par Imagify. Généralement, ce fichier est dans un dossier « conf » à la racine de votre site internet.
👉 Si vous ne savez pas comment accéder à ce fichier, n’hésitez pas à demander à votre hébergeur ou développeur de l’insérer pour vous.
🌀 Étape 3 (facultatif) : redémarrer le serveur NGINX
Une fois les règles ajoutées, il peut être nécessaire de redémarrer votre serveur web pour que les changements soient pris en compte.
Si vous gérez vous-même votre serveur, vous pouvez exécuter :
sudo service nginx reload
Sinon, un simple message à votre hébergeur fera l’affaire. 😉
Bonus tips pour éviter de s’arracher les cheveux
🧪 Vérifier que les images WebP/AVIF créent par Imagify existent bien
Connectez-vous via FTP ou SSH et regardez si, pour chaque image, vous avez :
image.jpg
image.jpg.webp
image.jpg.avif
Pas là ? 👉 Relancez l’optimisation dans Imagify.
🌐 Cas avec CDN / Cloudflare
Si vous utilisez un CDN ou Cloudflare :
- Préférez l’option
<picture>pour garantir la compatibilité - Certains CDN réécrivent déjà les formats images, donc testez d’abord
🛠️ Petits outils pour tester
- DevTools Chrome : clic droit sur l’image > Inspecter > vérifiez si l’image est en WebP
- curl -I : pour voir le header HTTP et le type MIME
- PageSpeed Insights : vous dira si vous utilisez le bon format
Conclusion : Imagify + NGINX = ça marche (avec un petit peu de travail)
En résumé :
✅ Imagify fonctionne très bien, mais n’est pas forcément plug-and-play sur NGINX
✅ La méthode <picture> est safe… sauf si votre thème ne l’aime pas
✅ Les règles NGINX demandent un peu d’huile de coude, mais offrent une solution propre, rapide et invisible
🧘 Respirez, suivez les étapes, et vos images s’afficheront enfin comme prévu (et en version ultra-light) 💨
Pour en savoir plus sur Imagify, rendez-vous sur cet article 🚀
FAQ – Imagify, NGINX & erreurs 502
Pourquoi Imagify provoque-t-il une erreur 502 sur mon site avec NGINX ?
Cela peut arriver si vous utilisez la méthode WebP via des balises , et que votre thème ou constructeur de page n’est pas compatible. Cela peut casser l’affichage ou générer des erreurs serveur, notamment sur NGINX.
Quelle est la différence entre la méthode et les règles de réécriture ?
La méthode <picture> modifie le code HTML de vos images. Les règles de réécriture, elles, agissent côté serveur et remplacent automatiquement les fichiers JPG/PNG par des versions WebP ou AVIF, sans toucher au HTML.
Pourquoi Imagify ne fonctionne-t-il pas automatiquement avec NGINX ?
Parce que NGINX ne permet pas la modification automatique des fichiers de configuration comme le fait Apache avec .htaccess. Il faut donc ajouter manuellement les règles fournies par Imagify dans un fichier spécifique.
Où trouver les règles à insérer pour que Imagify fonctionne sur NGINX ?
Une fois l’option activée dans Imagify, vous pouvez copier les règles proposées dans l’article ou dans le fichier généré par Imagify (imagify.conf) et les coller dans la configuration de votre site sur le serveur.
Dois-je redémarrer mon serveur après avoir ajouté les règles ?
Oui, dans la plupart des cas. Un redémarrage (ou rechargement) du serveur NGINX permet à la nouvelle configuration d’être prise en compte.
Puis-je utiliser Imagify avec un CDN comme Cloudflare ?
Oui, mais il est souvent préférable d’utiliser la méthode <picture> dans ce cas, car certaines règles de réécriture peuvent être bloquées ou altérées par le CDN. Testez bien chaque méthode selon votre configuration.
Besoin d’un coup de main ? Parlons-en !
Vous avez un besoin en assistance WordPress ? Vous ne savez pas par où commencer ? En tant qu’Agence Web dans l’Oise, nous accompagnons les TPE/PME pour la création de site WordPress dans toutes les étapes, de l’hébergement à la mise en ligne.
👉 Contactez-nous dès maintenant pour être bien conseillé et démarrer sereinement votre projet 🚀
