Correction des images de produit floues

Les problèmes d’images de produit floues sont généralement causés par les paramètres de style de certains thèmes, qui définissent des dimensions d’image non adaptées à WooCommerce.

Améliorations depuis la version 3.3 de WooCommerce

↑ Back to top

Les versions 3.3 et ultérieures de WooCommerce prennent en charge la création de thèmes compatibles avec WooCommerce (lien disponible uniquement en anglais) et l’amélioration du rendu et du recadrage des images (lien disponible uniquement en anglais). Ces nouvelles fonctionnalités signifient que :

Les problèmes d’images floues causés par une incompatibilité du thème ou des paramètres du thème ne devraient plus se produire.
Les propriétaires de boutiques peuvent définir la largeur et la hauteur de leurs images principales.
Le redimensionnement des miniatures peut être effectué de manière automatique ou manuelle.
Par défaut, les images affichées aux clients ont toujours fière allure, afin de présenter vos produits de manière convaincante !

Pour en savoir plus sur la manière d’utiliser ces nouvelles fonctionnalités, consultez les documentations Ajout et gestion de produits et Ajout d’images et de galeries d’images de produit.

Autres solutions

↑ Back to top

Si vous utilisez une version de WooCommerce antérieure à la version 3.3, nous vous recommandons de mettre à jour vers la dernière version pour profiter des fonctionnalités décrites ci-dessus. Si, pour une raison quelconque, vous ne souhaitez pas utiliser la dernière version de WooCommerce ou si la mise à jour vers la version 3.3 ne résout pas le problème que vous rencontrez, cela peut être dû à :

Vos paramètres de tailles d’image sont configurés avec des tailles trop petites.
Vos images originales sont d’une résolution/taille trop petite.

Pour résoudre cela :

Assurez-vous que vos paramètres de tailles d’image soient équivalents ou supérieurs à ceux de votre thème.
Assurez-vous que les images originales que vous téléversez soient d’au moins 800 x 800 pixels pour obtenir une bonne compatibilité avec la plupart des thèmes.

Pour savoir quelle est la taille d’image maximale recommandée pour votre thème, consultez la vidéo et les sections ci-dessous :

Types d’images

↑ Back to top

Images des produits uniques : Il s’agit des images les plus grandes. Elles sont utilisées comme image principale sur la page de détails d’un produit individuel.
Images du catalogue : Ces images sont de taille moyenne. Elles apparaissent dans les boucles de produits telles que la page Boutique, les pages de Catégories de produits, les produits apparentés, les produits suggérés et les ventes croisées.
Images des miniatures : Ces images sont les plus petites. Elles sont utilisées dans le panier, dans les widgets et dans la galerie de miniatures (facultative) qui est affichée sous les images des produits uniques.

Dimensions d’image standard

↑ Back to top

Dans les versions 3.2x et antérieures de WooCommerce, les paramètres d’images de produit sont accessibles via WooCommerce > Réglages > Produits > Affichage > Images de produit. Notez que le premier nombre correspond à la largeur et le second correspond à la hauteur.

Les images que vous téléversez sont automatiquement redimensionnées pour correspondre aux valeurs de vos paramètres. Par exemple, si vos paramètres sont de 100 × 100 pixels et que vous téléversez une image de 300 × 600 pixels, elle sera redimensionnée à 100 × 200 pixels. Alternativement, vous pouvez choisir de forcer le recadrage des images de sorte qu’elles soient automatiquement recadrées plutôt que d’être déformées à l’échelle. Ainsi, quel que soit le ratio des images que vous téléversez, elles seront recadrées à la taille spécifiée dans les paramètres. Si vous modifiez les paramètres après avoir téléversé des images de produit, vous devez régénérer les miniatures dans WordPress pour que les modifications soient appliquées aux miniatures. Pour cela, nous vous recommandons d’utiliser l’extension Regenerate Thumbnails (lien disponible uniquement en anglais). Depuis la version 3.3 de WooCommerce, les paramètres d’images de produit sont accessibles depuis l’outil de personnalisation de WooCommerce : Apparence > Personnaliser > WooCommerce > Images de produit :

Identifier les dimensions des images de produit d’un thème

↑ Back to top

Le thème que vous utilisez détermine la taille maximale des images de produit affichées dans votre boutique. Il est donc nécessaire d’identifier les dimensions des images affichées par votre thème pour les reporter dans les paramètres de WooCommerce.

Images du catalogue

↑ Back to top

Déterminez les pages sur lesquelles votre thème affiche les plus grandes miniatures du catalogue. Avec certains thèmes c’est sur la page Boutique, avec d’autres (tel que le thème Twenty Eleven) c’est dans la boucle des produits apparentés. Avec le navigateur de votre choix, faites un clic droit sur une image de produit et sélectionnez « Examiner » ou « Examiner l’élément ». Cela vous indiquera les dimensions de l’image. Notez ces dimensions car nous les utiliserons plus tard.

Avec le thème Storefront (ci-dessus), les plus grandes images du catalogue sont affichées en 213 x 213 pixels.

Images des produits uniques

↑ Back to top

Répétez le même processus pour une image de produit unique (une image de produit unique est la plus grande image affichée sur une page de produit).

Avec le thème Storefront (ci-dessus), les plus grandes images des produits uniques sont affichées en 298 x 298 pixels.

Images des miniatures

↑ Back to top

Il s’agit des plus petites images de la galerie de produits. Répétez le même processus pour obtenir les dimensions.

Avec le thème Storefront (ci-dessus), les plus grandes images des miniatures sont affichées en 43 x 43 pixels.

Ajuster les paramètres de WooCommerce et régénérer les miniatures (versions 3.2x et antérieures)

↑ Back to top

Maintenant que vous connaissez les tailles des images des miniatures de votre thème, il ne vous reste plus qu’à modifier les paramètres de WooCommerce pour vous assurer que les futures images seront affichées à cette taille, ou plus. Accédez à WooCommerce > Réglages > Produits > Affichage. Assurez-vous que les tailles d’image maximales soient au moins aussi grandes que celles des miniatures affichées dans votre thème. Cliquez sur Enregistrer les modifications. Les miniatures des nouvelles images téléversées seront désormais affichées aux tailles définies dans les paramètres et ne devraient plus être floues ou déformées.

Remarque : L’enregistrement des modifications ne met pas automatiquement à jour les images de produit précédemment téléversées. Pour mettre à jour les anciennes images, WordPress doit régénérer les miniatures. Pour cela, utilisez l’extension Regenerate Thumbnails (lien disponible uniquement en anglais).

Compatibilité avec la technologie Retina

↑ Back to top

Les écrans de haute résolution, communément appelés écrans Retina, contiennent deux fois plus de pixels (voire plus) que les anciens écrans. Pour obtenir de belles images sur des écrans Retina, vous devez définir la taille des miniatures à une dimension deux fois supérieure des miniatures affichées dans votre thème. Par exemple, si votre thème affiche des images de 80 x 80 pixels, définissez la taille des miniatures à 160 x 160 pixels. Cela peut avoir un impact sur les temps de chargement de vos pages, car des images plus grandes prennent plus de temps à charger. Il s’agit d’une préférence personnelle. Consultez les statistiques de votre site pour voir les types d’appareils et les tailles d’écran que vos clients utilisent. Cela vous aidera à déterminer l’importance de la compatibilité avec les écrans de haute résolution.