La majorité des incidents d’images floues sont causés par le style du thème, ce qui signifie que la conception du thème a des dimensions d’image en pixels qui peuvent ne pas jouer agréablement avec WooCommerce.

Mise à jour à partir de WooCommerce 3.3 Retour en haut de page

WooCommerce version 3.3 et plus vient avec un support pour rendre les thèmes compatibles avec WooCommerce et des améliorations au rendu de la taille de l’image et au recadrage. Ces nouvelles fonctionnalités signifient que :

• Les images floues causées par une incompatibilité de thème ou un code superposé ne devraient plus se produire.
• Les propriétaires de magasins peuvent contrôler la largeur et la hauteur de leurs images principales.
• Le redimensionnement des vignettes peut se faire automatiquement ou manuellement.
• Les images montrées aux clients sont toujours superbes par défaut, de sorte que vos produits continuent à se vendre tout seuls !

Pour apprendre à utiliser ces nouvelles fonctionnalités, rendez-vous à : Gestion des produits et Ajout d’images et de galeries de produits.

Autres solutions Retour au début

Si vous utilisez une version de WooCommerce antérieure à 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 ou si la mise à jour vers 3.3 ne résout pas le problème que vous rencontrez, il se peut que :

• Vos paramètres de taille d’image soient trop petits.
• Les images originales doivent être d’une résolution plus élevée.

Pour résoudre ce problème :

• Vos dimensions d’image doivent correspondre ou être supérieures à celles de votre thème.
• Les images originales que vous téléchargez doivent être au moins 800 x 800px ou plus pour fonctionner pour la plupart des thèmes.

Nous vous montrons comment trouver la taille d’image maximale souhaitée par votre thème dans la vidéo et ci-dessous.

Types d’images Retour en haut

• Image de produit unique : L’image la plus grande sur la page de détails du produit individuel et se réfère à l’image principale/vedette.
• Images de catalogue : Image de taille moyenne utilisée dans les boucles de produits, telles que la page Boutique, les pages de catégories de produits, les produits connexes, les ventes incitatives et les ventes croisées.
• Images miniatures de produits : La plus petite image couramment utilisée dans le panier, les widgets et (facultatif) les images de la galerie sous l’image de produit unique.

Dimensions standard des images Retour en haut de page

Dans WooCommerce version 3.2x et inférieure, les paramètres de l’image du produit se trouvent à WooCommerce > Paramètres > Produits > Affichage > Images du produit. Notez que le premier nombre est la largeur et le second la hauteur.

Les images que vous téléchargez sont redimensionnées pour correspondre aux valeurs que vous entrez. Par exemple, si vos paramètres sont 100×100 et que vous téléchargez une image 300×600, elle est redimensionnée à 100×200. Vous pouvez également choisir de  » recadrer en dur  » vos images, ce qui les force à avoir la taille spécifiée dans les paramètres, quelle que soit l’image brute que vous téléchargez, afin qu’elles soient recadrées plutôt que déformées à l’échelle.

Si vous modifiez les paramètres après avoir téléchargé des images de produits, vous devez régénérer les vignettes dans WordPress pour que les modifications s’appliquent. Pour ce faire, nous vous recommandons d’utiliser le plugin Regenerate Thumbnails.

A compter de la version 3 de WooCommerce.3, les paramètres des images de produits se trouvent sous le Customizer, dans WooCommerce >Images de produits:

Trouver les dimensions des images de produits du thème Retour en haut

Le thème que vous avez choisi délègue la taille maximale d’une image, vous devez donc connaître les dimensions dans lesquelles il les rend pour définir celles de WooCommerce.

Images de catalogue Retour en haut de page

Déterminez où votre thème rend les vignettes de catalogue les plus grandes. Dans certains cas, il s’agit de la page de la boutique ; dans le thème Twenty Eleven, c’est dans la boucle des produits connexes.

Avec les outils du développeur activés dans le navigateur de votre choix, vous pouvez faire un clic droit sur l’image et sélectionner « Inspecter » ou « Inspecter l’élément ». Cela vous indiquera les dimensions de l’image. Prenez-en note car nous devrons les utiliser plus tard.

Dans Storefront (ci-dessus), les plus grandes images de catalogue sont rendues à 213 x 213px.

Image de produit unique Retour au début

Répétez le processus pour l’image de produit unique – la plus grande image sur une page de produit.

Dans Storefront, la plus grande image de produit unique est rendue à 298 x 298px.

Vignette de produit Retour en haut

La plus petite est probablement la vignette dans la galerie de produits. Répétez le processus d’inspection pour obtenir les dimensions.

Dans Storefront, elle a un rendu de 43 x 43px.

Ajuster les dimensions de l’image et régénérer les vignettes Retour en haut

Maintenant que toutes les tailles d’image des vignettes pour notre thème spécifique sont connues, nous pouvons ajouter ces nouvelles dimensions à WooCommerce pour nous assurer que les futures tailles d’image seront de cette taille ou plus grandes.

Dans WooCommerce >Paramètres >Produits >Affichage, assurez-vous que les dimensions maximales des images sont au moins aussi grandes que les dimensions que votre thème rend pour ces vignettes. Ensuite, enregistrez les modifications.

Toutes les nouvelles images de produits qui sont téléchargées auront maintenant des vignettes dans ces paramètres, et devraient apparaître sans distorsion ou flou.

Support de la rétine Retour au début

Les écrans HiDPI communément appelés écrans rétine contiennent deux fois plus de pixels, voire plus, que les anciens écrans. Pour une imagerie parfaite en pixels sur les écrans rétina, définissez vos vignettes pour qu’elles aient une taille double de celle rendue par le thème. Par exemple, si un thème rend des images de 80 x 80px, vous voulez qu’elles soient de 160 x 160px.