Contenu
Bien que ce ne soit pas essentiel, ça pourrait être une bonne idée de garder des versions du contenu de vos sites “hors-ligne”. En plus d’avoir une autre copie (on n’a jamais assez de copies), il peut être utile aux membres de l’équipe de modifier, de relire et de “tester” le contenu avant de faire des changements directement sur le vrai site web. Cela peut être également utile au cas où vous voudriez éditer du contenu alors que vous n’êtes pas connecté à Internet.
Si vous commencez une nouvelle entreprise, organiser votre contenu hors-ligne pourrait vous aider à planifier et à structurer la façon dont elle va être présentée en ligne via votre site web.
Images
De nombreux points cités plus haut pour le contenu s’appliquent aussi à vos images de produit. Cependant, les images que vous utilisez hors-ligne (publiées, par exemple) seront différentes des images que vous utilisez en ligne pour votre site web. Si vous avez des images de produit à haute résolution, commencez par les organiser dans un dossier “hors-ligne” avec des dossiers individuels par produit (cela pourrait vous aider à utiliser l’UGS du produit pour ces noms de dossiers).
Dupliquez le dossier hors-ligne et renommez-le “en ligne” (ou quelque chose de ce genre). Il contiendra les images que vous utilisez sur votre site web. Il est bien d’avoir une séparation claire entre les images en ligne / hors-ligne afin que vous puissiez envoyer rapidement des images à imprimer, ou des images à utiliser pour des publications en ligne. Quelle est la différence entre les images en ligne / hors-ligne ? La taille & la taille. Il s’agit de la taille en tant que dimensions et taille de fichier. Évidemment ces deux choses vont souvent de pair mais ça vaut toujours le coup de garder un oeil dessus. Hors-ligne, les dimensions et la taille de fichier ont peu d’importance. En ligne c’est le contraire. Il est important que les images utilisées en ligne soient optimisées afin d’améliorer la performance et de réduire l’utilisation de la bande passante.
Quelle taille est la bonne taille ?
Commençons par les dimensions. Tout d’abord, vous devez décider de la largeur maximale à laquelle vous voulez afficher vos images sur votre site web. L’endroit le plus large où les images auront la chance d’être affichées est dans la galerie de produits en light box.
La light box (pop up) des produits sera probablement l’endroit où l’image sera affichée dans sa largeur maximale.
Cela va généralement se résumer à faire des analyses (analytics) pour regarder quelle résolution d’écran est la plus populaire parmi vos utilisateurs. Ensuite redimensionnez toutes vos images “en ligne” à une taille appropriée à cette résolution. Par exemple, si la résolution la plus populaire est 1600×1200 vous mettrez vos images à 1000×1000. En règle générale, tout ce qui sera autour de 800 px fonctionnera généralement bien pour les images en pleine grandeur. Mais si vous vendez des produits très complexes vous envisagerez quelque chose de plus large, en particulier si vous voulez la perfection en termes de pixels sur les écrans Retina. Assurez-vous de garder un oeil sur la taille de fichier de ces images car cela affectera directement toutes les vignettes de produits de tout votre site web. Cela aura un impact à la fois sur l’utilisation de votre bande passante (qui peut devenir significative si vous avez une limite basse (low limit) et une faible mise en cache (poor caching)) et sur la performance générale du site. Les images larges mettent plus de temps à se charger et utilisent plus de bande passante.
Si vous éditez vos images de produit dans Photoshop assurez-vous d’utiliser Fichier > Sauvegarder pour le web et les appareils lorsque vous exportez. Vous pouvez ici jouer avec la qualité pour réduire encore plus la taille de fichier. Vous pouvez aussi utiliser différentes applications exécutées par des tierces parties pour optimiser les images et réduire encore plus la taille de fichier. Si vous utilisez un Mac, allez voir ImageOptim qui fait un super boulot.
Vignettes de produits
Heureusement, WordPress et WooCommerce font un super boulot pour vous créer le reste des vignettes utilisées tout le long de votre site. Cela signifie que les images de produit en pleine grandeur sont les seules que vous devez créer manuellement.
Les vignettes de produits (utilisés tout le long de votre site) sont créées dynamiquement par WordPress quand vous téléchargez les images en pleine grandeur. Même si cela veut dire que la plupart du travail est fait, cela montre l’importance d’optimiser vos images qui sont en pleine grandeur. Si les images en pleine grandeur sont optimisées, cela diminuera la taille de fichier de toutes les vignettes basées sur cela. Alors cela vaut le coup d’investir du temps dans l’optimisation.
Tailles des Vignettes de Produits
L’image de produit en pleine grandeur n’est en fait utilisée que dans la galerie en table lumineuse. Toutes les autres images de produit dans WooCommerce sont des vignettes générées dans des tailles spécifiques et basées sur les images en pleine grandeur que vous téléchargez. Ces tailles de vignettes sont définies dans les paramètres de WooCommerce. Il est important que vous configuriez ces paramètres de dimension correctement pour votre thème. Vous pouvez vous renseigner sur quelles dimensions d’image sont appropriées ici. Assurez-vous de le lire, parce que si vos dimensions d’image sont trop petites alors vos vignettes de produits seront pixelisées/floues sur le frontend, indépendemment de la taille des images en pleine grandeur.
