Comment optimiser les images de votre e-commerce pour avoir un site plus rapide que l’éclair

Saviez-vous que la vitesse de chargement d’une boutique en ligne était l’un des aspects les plus importants pour les utilisateurs ? Vous devez donc optimiser vos images !

Il n’y a rien de plus désespérant qu’un site qui prend trois plombes à charger. D’ailleurs, si le temps d’attente est supérieur à une seconde, le client risque fort de se diriger vers la concurrence.

Comment pouvons-nous améliorer notre vitesse de chargement de manière simple ?

En commençant à optimiser les images de tout notre e-commerce.

Les photos font partie des fichiers les plus « lourds » et les plus difficiles à traiter par le serveur. C’est pourquoi, plus les images seront légères, mieux ce sera pour votre vitesse, vos clients et vos ventes. 😉

Tenez-vous prêt, aujourd’hui nous allons découper toutes vos photos avec des « ciseaux virtuels » pour que votre e-commerce soit plus rapide que l’éclair.

3, 2, 1… c’est parti !

Pourquoi est-il important d’optimiser les images de votre boutique en ligne ?

Dans cet article, nous vous parlions déjà de l’importance d’avoir des photos de produits qui soient de qualité. N’oubliez pas que ce sont souvent ces photos qui encouragent ou non une personne à acheter.

Mais voilà le problème.

En téléchargeant de nombreuses photos de qualité, vous allez saturer votre serveur et il va charger plus lentement. D’où l’importance d’optimiser toutes les photos que vous téléchargez sur votre boutique.

Mais voyons tous les avantages un par un :

• Vitesse de chargement : la vitesse à laquelle charge votre e-commerce a un énorme impact sur l’expérience utilisateur, et donc, sur les ventes. Et pas qu’un peu : Amazon affirme qu’à chaque fois qu’il améliore la vitesse de son site d’un dixième de seconde, ses bénéfices augmentent de 1 %.
• Positionnement Web : si vous vous intéressez au SEO de votre e-commerce (et vous devriez), vous devez optimiser vos images, car comme nous l’avons vu précédemment, elles ont un impact direct sur la vitesse de chargement (un des critères importants pour l’algorithme de Google).
• Optimisation de la consommation des ressources : qui dit images plus légères, dit moins d’espace occupé sur votre hosting.
• Plus de conversion : un utilisateur satisfait achète plus, logique, n’est-ce pas ? (Pensez à ce 1 % d’Amazon).
  Comme vous le voyez, il y a de nombreux avantages à soigner vos images. Maintenant, il ne nous reste plus qu’à voir comment.

Comment optimiser une image sur Photoshop avant de la télécharger sur votre boutique en ligne ?

La première étape pour optimiser une image est de lui donner la taille idéale. Pas de panique, c’est très simple.

1. Dimensions

La première chose à faire est de connaître ses dimensions exactes dans votre modèle. Sur WooCommerce, allez sur « Réglages/Produits/Afficher ».

Vous pourrez voir les dimensions par défaut des images. Si l’image du produit fait 600 x 600 pixels et que vous téléchargez une image plus grosse, elle prendra de l’espace inutilement et ralentira votre site.

2. Le « poids idéal »

L’objectif est de trouver un équilibre entre une photo de qualité et un poids raisonnable. Moins de 70 Ko, c’est l’idéal ; mais si ce n’est pas possible, 100 Ko suffiront.

3. Le bon format

Pour les images avec de la transparence ou des captures d’écran, utilisez le format PNG ; pour toutes les autres, le format JPG.

4. Découper et ajuster la taille sur Photoshop

Pour mieux comprendre le processus, nous vous laissons une vidéo où vous verrez comment faire quelques ajustements de base sur Photoshop. Par exemple, comment changer la taille de l’image et comment utiliser la fonction utile « Enregistrer pour le web ».

À la place de Photoshop, vous pouvez utiliser l’outil en ligne Pixlr (c’est une version réduite de Photoshop). Sinon, il y a aussi Gimp, un logiciel open source de retouche photo.

Et si vous êtes plutôt Mac… ImageOptim est l’outil qu’il vous faut. C’est une application native MacOs qui vous évitera de passer par un logiciel de retouche photo.

 5. Redimensionner les images directement sur WordPress

Si vous avez téléchargé une image trop grande, vous pouvez changer sa taille sur WordPress.

Dans « Multimédia/Bibliothèque », cliquez sur l’image et modifiez-la. Ici, vous pourrez la redimensionner ou la recadrer en fonction de l’aspect recherché (nous vous conseillons une image carrée).

C’est simple et rapide, mais il y a un inconvénient ; WordPress crée une nouvelle image aux dimensions définies. Cela implique que vous aurez une image lourde et une copie plus légère.

Si vous ne supprimez pas la première, la vitesse de chargement ne sera pas meilleure.

Comment optimiser encore plus les images sans perdre en qualité ?

Plusieurs sites permettent de réduire la taille des photos sans perdre en qualité. En voici quelques-uns :

1. Webresizer

Non seulement vous pouvez redimensionner les images en ligne, mais vous pouvez également faire quelques modifications basiques de couleur, de lumière, etc.

Il vous permet de conserver les mêmes dimensions, tout en réduisant le poids de 68 %.

2. TinyPNG

C’est un des logiciels gratuits les plus connus pour compresser les images. Il permet d’optimiser plusieurs images en même temps, 20 au total, de 5 Mo chacune.

Il réduit le nombre de couleurs nécessaires de sorte à ce que ce changement soit invisible à l’œil humain. Si vous devez travailler avec beaucoup d’images à la fois, cet outil est fait pour vous.

3. Compressor.io

Bien qu’il ne permette pas une optimisation en masse, vous pouvez télécharger des photos jusqu’à 10 Mo. Il possède une autre fonction très utile qui permet d’enregistrer le fichier optimisé directement sur Google Drive.

Ces outils en ligne sont très utiles et rapides, mais si vous avez quelques connaissances en édition et en retouche de photos, le résultat manuel sera plus abouti.

Plugins pour optimiser les images sur WordPress et améliorer la vitesse de chargement

Voici nos plugins préférés pour optimiser les images sur un e-commerce et pour améliorer la vitesse de chargement :

1. WPSmush

Plugin 100 % gratuit permettant de comprimer et de redimensionner toutes les images de votre site.

Il est facile à utiliser et permet de travailler toutes les images de WordPress, quels que soient le theme ou le plugin que vous utilisez.

2. EWWW Image Optimizer

Encore un plugin gratuit. Il permet d’optimiser toutes les images en même temps, et l’optimisation est adaptée au format : JPG ou PNG.

3. Lazy Load

Le chargement paresseux ou lazy load consiste à différer le chargement des images jusqu’à ce qu’elles apparaissent à l’écran.

Imaginez que vous avez une page ou un article avec une photo très lourde à la fin. Grâce à ce plugin, cette dernière chargera uniquement si l’utilisateur défile jusqu’à elle (la page chargera ainsi plus vite au début).

4. Imsanity

La principale différence avec les plugins précédents est que celui-ci est spécialisé dans l’optimisation de masse.

5. Plugins de cache

Dos de los plugins gratuitos más conocidos son:

• W3 Total Cache.
• WP Super Cache.

Et en plugins payants, bien que ce soit sûrement le plus recommandé, vous avez WP Rocket.

Plugins pour optimiser les images sur PrestaShop

Un des avantages de PrestaShop est qu’il permet d’activer directement le cache. Dans « Paramètres avancés/Performances », vous aurez accès à la configuration Smarty pour compresser, combiner et mettre en cache sans modules supplémentaires.

Les plugins suivants vous aideront à augmenter encore un peu votre vitesse :

1. Resmush

Il accepte des images jusqu’à 5 Mo en formats JPG, PNG et GIF. Toutes les images de votre boutique seront optimisées en quelques clics.

Si vous aimez cet outil mais que vous utilisez WordPress, il existe également un plugin pour ce CMS.

2. PrestaSpeed

Si vous souhaitez investir dans un outil un peu plus complet, pour moins de 50 € vous avez PrestaSpeed.

En plus d’optimiser les images, il augmente la vitesse de chargement en débarrassant la base de données des informations qui ne sont plus utiles. Par exemple, les vieilles commandes ou les paniers abandonnés.

De plus, avec ce module, vous pourrez accéder à l’image précédente (après l’avoir optimisée), ou ajouter un scroll infini pour afficher uniquement ce qui est nécessaire.

Comment optimiser les images sur WordPress pour le SEO

Il est également possible de faire une optimisation des images axée SEO. Vous pouvez modifier les photos de sorte à ce qu’elles améliorent votre positionnement Web.

• Renommez vos photos avec une description : un fichier nommé « IMG_1234 » ne donne aucune information à Google sur le contenu de l’image.
• Utilisez l’attribut « alt » : cet attribut se trouve dans les options des images et apparaît comme « texte alternatif ». N’utilisez pas toujours le même keyword. Notez que ces textes aident les personnes qui utilisent des assistants de lecture.
  En suivant ces 2 consignes, vos fiches produits (ou catégories) gagneront des positions sur le moteur de recherche.

Vous souhaitez savoir si les images de votre e-commerce sont suffisamment optimisées ?

Pour en avoir le cœur net, nous utiliserons un outil gratuit mis à disposition par Google : PageSpeed.

Il vous suffit de saisir l’URL de votre site et vous obtiendrez un score de vitesse de chargement.

Mais nous n’allons pas nous arrêter là. Si vous regardez de plus près, il y a une section « Optimisations possibles ». Si vous voyez « Optimiser images », c’est que vous avez du travail qui vous attend. 😉

Voici un autre outil qui peut vous être très utile : Speed Test de Pingdom.

Une fois que vous aurez appliqué les conseils donnés dans cet article, mesurez la vitesse de chargement et comparez-la à celle que vous aviez avant optimisation.

Lancez-vous dans l’optimisation des images de votre boutique en ligne !

Cet article vous donne toutes les clés pour commencer à réduire et à optimiser vos images pour que votre boutique en ligne charge le plus rapidement possible.

Il ne vous reste plus qu’à vous atteler à la tâche.

Cela vous fatigue d’avance ?

Pensez à ce 1 % de plus de bénéfices par dixième de seconde que fait Amazon. Cela va sûrement vous remotiver.

C’est l’heure de s’occuper de ces images !