Optimisation des images dans Shopify

Saviez-vous que les images peuvent avoir une incidence directe sur le trafic et les conversions de votre site web ?

Les images sont généralement le principal facteur de rapidité des pages, ce qui peut avoir une incidence sur le trafic et les conversions en cas de lenteur.

En outre, la recherche d’images est une autre source de trafic potentiellement importante pour votre entreprise.

Dans ce guide, nous verrons comment optimiser vos images pour Shopify afin de maximiser la vitesse des pages, les conversions et le trafic de recherche.

Qu’est-ce que l’optimisation d’images ?

L’optimisation des images regroupe la vitesse de chargement et une meilleure compréhension des images par les robots de Google. Notre mission est de fournir rapidement aux internautes une page avec des visuels de qualité dans un contexte sémantique approprié. Voyons comment faire.

La vitesse de chargement des images

Dans un but d’accélérer l’affichage d’une page, l’optimisation des images est essentielle. En effet, les images à haute résolution sont des fichiers de grande taille, ce qui ralentit leur chargement. Cette étape consiste à réduire le poids (ou taille) de ces fichiers par des méthodes telles que le changement de format, le redimensionnement et la compression des images, tout en préservant au mieux la qualité de l’image.

Différents formats d’image

Il existe de nombreux types d’images que vous rencontrerez en ligne, mais les quatre les plus courants sont les suivants :

• JPEG : Ce format produit généralement des images de qualité inférieure, mais qui présente l’avantage de réduire considérablement la taille des fichiers par rapport au format PNG. Il ne peut pas être utilisé pour les images transparentes.
• PNG : Ce format est idéal pour les images transparentes et à haute résolution. L’inconvénient est que la taille des fichiers est beaucoup plus importante que celle d’un JPEG classique, ce qui n’est pas recommandé pour la plupart des images.
• WebP : Format de fichier moderne mis au point par Google pour réduire la taille des fichiers et prendre en charge les arrière-plans transparents. Les images WebP sont 26 % plus petites que les PNG et 25 à 34 % plus petites que les images JPEG comparables.
• SVG : Pour votre logo et les icônes de votre thème, utilisez le format SVG pour des images de haute qualité et évolutives.

En résumé, je recommande généralement les formats d’image WebP ou JPEG.

Pourquoi la compression d’images est-elle importante ?

La compression d’images est la méthode utilisée pour réduire le poids des fichiers sans redimensionner l’image.

Il en résulte généralement une image de qualité légèrement inférieure, bien qu’avec le bon niveau de compression, cela ne devrait pas être trop perceptible. Mais la réduction du poids de fichier est considérable !

Regardez les différences entre les trois images que je viens de compresser :

Vous pouvez constater que les fichiers sont 54 % plus petits donc une vitesse de chargement accélérée.

La réduction d’une image à 80 / 90% de sa qualité initiale ne se voit pas à l’œil nu. Voici un exemple d’une image de 68ko puis de 39ko après compression.

Une fois l’image compressée, on ne peut revenir en arrière, alors pensez à conserver une copie de l’image originale.

Taille des images Shopify

Un autre facteur important du temps de chargement de la page est la taille réelle de l’image. Si votre image est beaucoup trop grande, vous la chargez inutilement pour la réduire ensuite sur la page (qui peut alors paraître floue sur les petits appareils).

Shopify recommande une taille de 2048 x 2048 pixels pour les images de produits carrées, mais cela dépend de votre thème et de la résolution souhaitée.

Le fait est que la taille de l’image aura une grande influence sur son poids et sa qualité. Une image trop grande ou trop petite sera problématique, alors essayez de la dimensionner pour qu’elle corresponde parfaitement (pas plus de 2 fois) à la taille exacte qu’elle aura sur votre site web.

• Redimensionnez les à la taille maximale nécessaire avec un outil comme ILoveIMG
• Utilisez srcset, qui charge conditionnellement la bonne taille d’image en fonction de l’appareil.

5 applications d’optimisation d’images

Pour vous faciliter la tâche, il existe plusieurs applications Shopify qui peuvent compresser automatiquement toutes vos images pour vous. En voici 4 très populaires.

1. Crush.pics

Lien : (App Store)
Note : 4.8 (972 commentaires)
Prix : Gratuit à 19,99 $ par mois

Fonctionnalités principales :

• Compression d’image avancée (2 niveaux ou réglage manuel)
• Sur tous types d’images pas seulement des images de produits
• Automatisation complète (configurez-le une fois et il fera tout)
• Référencement avancé des images et renommage des balises ALT
• Fichiers d’image originaux stockés pendant 30 jours
• Télécharger et compresser manuellement n’importe quelle image

2. SEO Image Optimizer

Lien : (App Store)
Note : 4.8 (107 commentaires)
Prix : Gratuit à 19,99 $ par mois

Fonctionnalités principales :

• Compression d’image avancée (2 niveaux ou réglage manuel)
• Sur tous types d’images pas seulement des images de produits
• Automatisation complète (configurez-le une fois et il fera tout)
• Renommage et optimisation ALT des images produits / collections / articles
• Convertir PNG en JPG
• Ajouter un filigrane en automatique
• Sauvegarde de 30 jours des fichiers originaux

3. TinyIMG

Lien : (App Store)
Note : 5.0 (1323 commentaires)
Prix : Gratuit à 9,99 $ par mois

Fonctionnalités principales :

• Optimisation automatique des images
• Redimensionnement de l’image
• Modification des balises Alt (textes Alt) et des noms de fichiers
• Renommage des fichiers et des balises ALT
• Beaucoup d’autres fonctionnalités SEO

4. Hyperspeed

Lien : (App Store)
Note : 4.8 (200 commentaires)
Prix : Tarif unique de 49 $ par mois ou 468$ par an

Fonctionnalités principales :

• Compression d’image illimitée
• Tailles d’image réactives (srcset)
• LazyLoading
• Surveillance de vitesse de la boutique : nouvelles applications et images.
• Regroupe l’essentiel des optimisations de la vitesse :
• Inlining CSS critique ; Minification ; JS Defer ; Mise en cache ; Préchargement ; Contrôle script.

5. Smart SEO

Lien : (App Store)
Note : 4.9 (1151 commentaires)
Prix : Gratuit à 29 $ par mois

Fonctionnalités principales :

• Compression d’image très efficace
• Optimisation des balises ALT des images
• Autres paramètres SEO non liés aux images

Optimiser vos images pour le référencement

Je ne serais pas un très bon référenceur si je ne mentionnais pas l’aspect SEO de l’optimisation des images (bien que la vitesse du site aide certainement ici aussi), il y a 3 facteurs principaux que vous voudrez prendre en compte.

Noms de fichiers des images

Les noms de fichiers sont les noms de chacun de vos fichiers d’images, c’est quelque chose que les moteurs de recherche peuvent lire.

Par défaut, votre appareil photo peut leur donner un nom similaire à IMG_2088.png Mais qu’est-ce que IMG_2088 ?

Vous devriez plutôt renommer ces fichiers avant de les télécharger pour indiquer le sujet de l’image.

Ainsi, si vous avez cette image :

Vous pouvez l’appeler paquet-doritos-saveur-fromage.jpg.

C’est ainsi que des internautes pourraient rechercher ce produit sur Google image. Donc pensez en terme de mots clés, mais n’en faites pas trop, car vous risqueriez de suroptimiser votre page.

Pour le nommage des fichiers voici les instructions : pas d’accent, pas de majuscule, séparé par un tiret ou un underscore _

Texte alternatif et titre de l’image

Il s’agit d’une description permettant aux robots de comprendre ce que représente l’image. Elle sert également aux malentendants car leur appareil lit cette description pour présenter le visuel.

Dans Shopify, c’est aussi simple que cela :

1. Depuis l’interface d’administration de Shopify, allez dans Produits > Tous les produits.
2. Cliquez sur le nom du produit qui contient l’image que vous souhaitez modifier.
   Sur la page des détails du produit, cliquez sur une image pour afficher la page de Prévisualisation des médias.
3. Cliquez sur Ajouter un texte ALT.
4. Saisissez votre texte alternatif, puis cliquez sur Enregistrer le texte ALT.

En résumé, comment optimiser les images pour le web ?

1. Redimensionnez vos images

Comme indiqué précédemment, vous ne voulez pas que les images soient inutilement réduites ou étirées pour être affichées sur votre site web. Déterminez la taille dont vous avez besoin, puis redimensionnez-les à cette taille exacte ou à deux fois cette taille pour les écrans rétina.

2. Choisissez le bon format de fichier

Réfléchissez à l’importance de l’image. Pour les images de produits, le format JPG est probablement le plus approprié.

3. Compresser les images pour réduire la taille

Utilisez une application partagée ci-dessus ou un outil pour compresser les images avant de les télécharger sur votre site web.

4. Nommez vos images de manière descriptive

Veillez à donner un nom descriptif à vos images avant de les télécharger sur votre site web.

5. Optimisez les attributs « alt » de vos images

Une fois l’image téléchargée, écrivez un texte alt descriptif et un attribut de titre pour expliquer l’image.

6. Utilisez les sitemaps d’images

Si vous souhaitez classer ces images dans Google Images, assurez-vous qu’elles sont soumises à un sitemap d’image (expliqué dans la FAQ).

7. Chargement paresseux des images

Pour accélérer le chargement des images, arrêtez de charger toutes les images lors du chargement initial de la page. Au lieu de cela, attendez qu’elles soient visibles à l’écran. Cela réduira considérablement les temps de chargement des pages de collection et peut également s’avérer utile pour les produits comportant plusieurs images de galerie.

Questions fréquemment posées

Shopify optimise-t-il les images ?

Les niveaux de qualité des images de Shopify après compression sont les suivants :

JPEG : entre 65 et 90 %

PNG : 90 %

GIF : Aucun changement de qualité

Je recommande tout de même l’utilisation d’une application pour s’assurer que cette opération est effectuée de la meilleure façon possible.

Pourquoi mes images sont-elles floues sur Shopify ?

C’est probablement dû au fait que Shopify supprime le profil de couleur de l’image et la compresse lors de l’importation. Les images peuvent donc s’afficher dans une couleur différente et être légèrement floues.

La meilleure solution consiste à modifier la taille et la résolution des photos, afin qu’elles ne soient pas trop étirées ou rétrécies. Il est également possible d’enregistrer les images sans profil de couleur, en utilisant par exemple la fonction « Enregistrer pour le Web » de Photoshop.

Quelle doit être la taille des images de Shopify ?

Shopify recommande une taille de 2048 x 2048 pixels pour les images de produits carrées, bien que cela dépende de votre thème et du rapport d’aspect souhaité.

Un minimum de 1024 x 1024 est suggéré.

Comment puis-je réduire la taille d’une image dans Shopify ?

Vous pouvez redimensionner les images en utilisant l’éditeur d’images de Shopify :

1. Dans l’interface d’administration de Shopify, allez dans Produits > Tous les produits.
2. Cliquez sur le nom du produit qui contient l’image que vous souhaitez modifier.
3. Dans la section Médias, cliquez sur l’image du produit que vous souhaitez modifier.
4. Cliquez sur Redimensionner.
5. Saisissez la nouvelle largeur de l’image. La hauteur est automatiquement mise à jour pour conserver le même rapport d’aspect. Si vous souhaitez redimensionner l’image sans conserver le même rapport hauteur/largeur, cliquez sur Verrouiller le ratio d’aspect. Si vous redimensionnez votre image sans désactiver la fonction Verrouiller le rapport hauteur/largeur, vous risquez de la déformer.
6. Cliquez sur Appliquer pour redimensionner l’image.
7. Lorsque vous avez terminé vos modifications dans l’éditeur d’images, cliquez sur Enregistrer.

Shopify dispose-t-il d’un plan du site pour les images ?

Seulement pour l’image principale de votre produit, qui est affichée dans le plan du site des produits. Pour faciliter l’indexation de toutes vos images, vous pouvez envisager d’utiliser une application de sitemap d’images.

Vous pouvez également le faire manuellement à l’aide d’un outil comme ScreamingFrog (création d’un sitemap image), mais vous devrez le mettre à jour manuellement si les images sont modifiées ou si de nouveaux produits sont ajoutés.