ImagePipe Pro et WooCommerce fonctionnent ensemble sans configuration particulière côté thème : une fois le plugin activé, il détecte automatiquement WooCommerce et prend en charge les grilles produit, la galerie de fiche produit, ainsi que le panier et la validation de commande. Les réglages présentés ici (remplacement automatique, filigrane, qualité de sortie) sont réservés à ImagePipe Pro : la version gratuite ImagePipe Lite ne les propose pas.
Étape 1 : Vérifier la compatibilité WooCommerce
La page Compatibilité du plugin (ImagePipe Pro → Compatibilité) confirme en un coup d'œil que WooCommerce est bien détecté et actif, aux côtés de la version PHP, du moteur de traitement d'image disponible (Imagick ou GD) et du support réel de chaque format de sortie par les navigateurs. Rien à configurer ici : cette page est un diagnostic en lecture seule, à consulter en cas de doute avant de creuser plus loin.
Étape 2 : Activer le remplacement automatique
Le remplacement automatique (ImagePipe Pro → Remplacement automatique) est l'interrupteur qui fait tout le travail : une fois activé, chaque balise <img> concernée, y compris les images de produits WooCommerce, est réécrite en <picture> avec négociation de format côté navigateur (AVIF, puis WebP, puis JPEG/PNG en dernier recours). Aucune modification du thème n'est nécessaire, et aucune image n'a besoin d'être ré-uploadée : la première visite sur une fiche produit déclenche la génération de la variante manquante, mise en cache ensuite pour tous les visiteurs suivants.
Étape 3 : Régler la qualité de sortie
Les réglages de qualité (ImagePipe Pro → Réglages) s'appliquent par format : JPEG, PNG, WebP et AVIF ont chacun leur propre curseur de compression, sur une échelle de 1 à 100. Les valeurs par défaut (82 pour le JPEG, 80 pour le PNG et le WebP, 60 pour l'AVIF) conviennent à la plupart des catalogues, l'AVIF pouvant descendre plus bas que les autres formats pour un rendu visuel équivalent, grâce à un algorithme de compression plus efficace. Aucun vidage de cache n'est requis après une modification : seules les nouvelles variantes générées utilisent le nouveau réglage, les anciennes restant en cache jusqu'à expiration ou vidage manuel.
Étape 4 : Filigrane sur les images produit (optionnel)
Le filigrane (ImagePipe Pro → Filigrane) protège les visuels contre le pillage : logo ou texte, position, opacité et échelle sont réglables, avec un aperçu en direct sur une image de test. La case « Autres images de pièces jointes (par exemple produits WooCommerce) » détermine si le filigrane s'applique aussi aux photos produit, indépendamment des autres familles (contenu, logo du site, images mises en avant). Cette fonctionnalité reste optionnelle : la désactiver ne touche à rien d'autre dans la configuration.
Étape 5 : Le résultat sur la boutique
Côté visiteur, aucune différence visuelle attendue par rapport à des images non optimisées, seulement des fichiers plus légers servis dans le format que le navigateur sait afficher. Sur la grille de la boutique, chaque vignette produit passe par le même remplacement automatique que la fiche produit : pas de configuration séparée à prévoir pour les listings de catégorie.
Étape 6 : Le résultat sur la fiche produit
Sur la fiche produit, la même image bénéficie en plus, ici, du filigrane configuré à l'étape 4 : visible en bas à droite, appliqué automatiquement à chaque génération de variante, sans retouche manuelle du fichier source dans la médiathèque.
Étape 7 : Le résultat dans le panier
Le panier et la validation de commande sont couverts par le même mécanisme, via l'API Store de WooCommerce : la vignette produit ajoutée au panier est déjà servie dans son format optimisé, sans traitement supplémentaire à ce stade du tunnel d'achat.
Pour comprendre plus en détail comment ImagePipe choisit le format servi à chaque visiteur, voir le guide « Comment activer WebP/AVIF automatiquement sur WooCommerce ».