la première chose que vous devez savoir sur les dimensions d’images dans WooCommerce est que beaucoup de thèmes (et WooCommerce CSS par défaut) spécifient des largeurs d’images de produit pour assurer une mise en page consistante à travers plusieurs appareils.

Les dimensions que vous spécifiez dans l’onglet Produits de l’écran des paramètres de WooCommerce affectent la taille des vignettes que le thème utilise quand les images de produit sont affichées. Les dimensions ne changent pas la taille à laquelle l’image est rendue.

Quand cela se produit, il y a une possibilité que vos paramètres ne soient pas adéquats (trop petits) pour votre thème – ce qui peut causer une distorsion d’image (effet de flou). Regardez le graphique ci-dessous pour une meilleure explication.

Exemple

Pour une démonstration rapide nous allons corriger un problème de distorsion hypothétique. Avant de commencer, assurez-vous que les graphiques que vous téléchargez sont assez grands. Tout à partir de 800×800 et au-delà ira pour la plupart des thèmes.

 

Types de vignettes

Dans cet exemple, nous utiliserons les termes “Image de Produit Seul”, “Images de Catalogue” et “Vignettes de Produit” comme listé dans les paramètres d’image. Ces vignettes sont utilisées dans des domaines variés :

  • Image de Produit Seul : Les plus grandes vignettes, utilisées sur la page de détails de produits.
  • Images de Catalogue : Les vignettes à taille moyenne, utilisées dans tous les circuits de produits (product loops) (ex : les catégories, les produits apparentés, les ventes incitatives, les ventes croisées, etc.)
  • Les Vignettes de Produit : les plus petites vignettes, utilisées dans les galeries de produits sur les pages de produit seul, dans le panier et dans les widgets.

Depuis WC 2.3, ces paramètres sont localisés dans WooCommerce > Paramètres > Produits > Affichage

Découvrez la taille à laquelle votre thème rend les vignettes    Retourner en Haut

Puisque le thème que vous avez choisi détermine la taille à laquelle les images seront, la première étape pour corriger toute image distordue est de trouver les dimensions dans lesquelles le thème les rend.

La Vignette du Catalogue

Trouvez l’endroit où votre thème rend les vignettes de catalogue les plus larges. Dans certains cas, cela sera simplement sur la page boutique. Cependant, dans Twenty Eleven, c’est dans le circuit des produits apparentés. Si vous utilisez Chrome, vous pouvez simplement cliquer droit sur l’image et sélectionner “inspecter l’élément”. On peut faire la même chose dans Firefox avec Firebug. Cela vous donnera les dimensions d’image.

Ici nous pouvons voir que les vignettes de catalogue sont rendues (à leur maximum) dans Storefront à ~213 x 213 pixels. Notez cela.

La Vignette Seule

Répétez le procédé pour une vignette seule (large image sur la page de détails de produits).

Il semble que dans Storefront, la Vignette Seule (la plus large des images), soit rendue à la même taille que la Vignette de Catalogue; 298 x 298 pixels.

La Vignette de Produit

Le plus petit rendu de Vignette de Produit est probablement dans la galerie de produits. Répétez le procédé d’inspection pour obtenir les dimensions.

Dans ce cas, il rend à 43 x 43 pixels dans le thème Storefront.

 

Saisir les données et régénérer les vignettes

Maintenant que nous connaissons la taille à laquelle notre thème spécifique rend les vignettes, nous pouvons ajouter les nouvelles dimensions pour s’assurer que les futures vignettes seront à cette taille (ou plus grandes). Dans l’onglet Affichage des paramètres de Produits, vous vous assurerez que les tailles maximales d’images sont au moins aussi grandes que les dimensions auxquelles votre thème rend ces vignettes. Ensuite, vous pouvez sauvegarder les paramètres.

Toutes les nouvelles images de produit téléchargées auront désormais des vignettes dans ces paramètres et apparaîtront sans distorsion ou sans être floues.

Veuillez noter : La sauvegarde des changements ne réactualise pas automatiquement toutes les images de produits précédemment téléchargées. Pour télécharger d’anciennes images, WordPress doit régénérer les vignettes. Il y a un plugin super qui fait cela; Regenerate Thumbnails.

Retina Support

Les affichages en HiDPI contiennent deux fois plus de pixels que les affichages standards. Pour avoir une image parfaite en termes de pixels sur les affichages retina, configurez vos vignettes pour qu’elles soient deux fois plus grandes que la taille rendue par le thème. Si un thème rend des vignettes à 80×80, vous les voudrez à 160×160.

Cela peut avoir un impact sur la performance puisque les images plus larges mettent plus de temps à se charger. C’est une préférence personnelle et vous devriez consulter vos analyses (analytics) avant de vous décider.