Comment optimiser les images produits ? Guide pratique de la taille, du format (WebP), du nom de fichier et du texte alternatif en e-commerce

En e-commerce, le client ne peut pas prendre le produit en main ; il ne le juge que sur l'image. C'est pourquoi les images produits sont à la fois l'outil de vente le plus puissant et la charge la plus lourde de la page : une image bien photographiée mais non optimisée ralentit la page, consomme les données mobiles et fait perdre le client avant même l'ouverture de la page. L'optimisation des images produits consiste à rendre une image plus rapide à charger, mieux comprise et plus facile à trouver, sans sacrifier sa qualité.

Cet article est construit comme une leçon. Pas à pas, vous apprendrez de quelles couches se compose l'optimisation des images, comment choisir la bonne taille et le bon format, comment rédiger le nom de fichier et le texte alternatif, les techniques de chargement, un flux de travail en masse et les erreurs les plus fréquentes. L'outil intégré à l'article génère immédiatement la taille cible, le nom de fichier et le texte alternatif pour votre propre produit.

Qu'est-ce que l'optimisation des images produits ?

L'optimisation des images produits consiste à amener la taille de fichier, le format, le nom, le texte alternatif et le mode de chargement d'une photo produit à l'état le plus favorable pour la vitesse de page, l'accessibilité et les moteurs de recherche, tout en préservant sa qualité visuelle. Prendre la photo, c'est la moitié du travail ; la préparer pour la publication, c'est l'autre moitié.

L'optimisation ne consiste pas à « abîmer » ou à flouter l'image. L'objectif est d'obtenir un fichier beaucoup plus léger avec une perte de qualité que l'œil ne distingue pas, et de servir l'image à une taille adaptée à son emplacement.

À lire aussiComment photographier ses produits ? Guide de la photo produit e-commerce au téléphone

Pourquoi l'optimisation des images est-elle si importante en e-commerce ?

Sur les pages produits, les images représentent généralement la plus grande part du poids total de la page ; c'est pourquoi l'optimisation des images est le moyen le plus efficace et le moins risqué d'améliorer la vitesse de page. Or la vitesse est directement liée à la conversion, à l'expérience mobile et à la visibilité dans la recherche.

• Vitesse de page : Les images plus légères se téléchargent plus vite ; la page devient utilisable plus tôt.
• Expérience mobile : Avec les données mobiles et une connexion lente, une image volumineuse peut empêcher la page de s'ouvrir.
• Conversion : Lorsque la page s'ouvre sans attente, le client se concentre sur le produit et les abandons diminuent.
• Visibilité dans la recherche : Un nom de fichier et un texte alternatif explicites aident les moteurs de recherche et la recherche d'images à comprendre l'image.
• Accessibilité : Le texte alternatif permet aux clients qui utilisent un lecteur d'écran de comprendre le produit.
• Coût d'infrastructure : Des fichiers plus légers signifient moins de trafic et de stockage.

Okumanızı öneririzE-Ticarette Site Hızı Neden Önemlidir?

Les 6 couches de l'optimisation des images produits

L'optimisation des images se compose de six couches : la taille (pixels), le poids (kilo-octets), le format, le nom de fichier, le texte alternatif et le mode de chargement. Chaque couche résout un problème distinct, et lorsque l'une manque, le gain des autres diminue.

Quel format d'image utiliser et quand ?

Pour les photos, le meilleur choix est généralement WebP ou JPEG, pour les graphiques nécessitant de la transparence PNG ou WebP, et pour les logos et icônes SVG. Le choix du format modifie directement le poids de fichier d'une même image.

Une règle pratique : publiez les photos produits en WebP (ou en JPEG en secours), utilisez WebP ou PNG pour les images produits nécessitant de la transparence, et mettez les logos et icônes en SVG.

Quelle taille doit avoir une image produit ?

La taille source d'une image doit être environ le double de sa taille d'affichage sur la page : cela garantit une image nette sur les écrans haute résolution (Retina) et évite un fichier inutilement volumineux. Si vous proposez un zoom, la source peut être un peu plus grande.

• Trouvez la largeur affichée : Regardez sur combien de pixels de large l'image principale s'affiche à l'écran sur la page produit.
• Multipliez par deux : Pour les écrans haute densité, la source doit faire environ le double de la largeur affichée.
• Augmentez si vous avez un zoom : Si vous proposez un zoom, vous pouvez aller jusqu'au triple pour la source ; sinon le zoom paraît flou.
• Gardez un ratio constant : Utilisez le même rapport largeur/hauteur (par exemple 1:1 ou 4:5) pour toutes les images produits ; les pages de liste paraissent ordonnées.
• Évitez les images inutilement volumineuses : Une photo de 4000 pixels prise au téléphone doit être réduite si elle sera affichée dans une zone de 600 pixels.

Outil taille, nom de fichier et texte alternatif des images produits

L'outil ci-dessous génère pour votre produit la taille cible de l'image source, un nom de fichier adapté au SEO et une suggestion de texte alternatif. L'outil ne fait que des suggestions ; modifiez le texte alternatif en n'oubliant pas que c'est vous qui décrivez le mieux votre produit.

Comment nommer le fichier d'une image produit ?

Le nom de fichier d'une image doit être une expression courte et explicite qui décrit l'image ; il s'écrit en minuscules, sans caractères spéciaux ni espaces, avec des tirets entre les mots. Les noms comme « IMG_2034.jpg » attribués par un téléphone ou un appareil photo ne donnent aucune information sur l'image.

Certains systèmes utilisent le nom de fichier pour l'appariement lorsque de nombreux produits sont importés en masse : les images sont nommées d'après le code-barres ou le code de stock du produit et associées au produit lors de l'import. Dans ce cas, ne perturbez pas le schéma d'appariement ; renseignez séparément les champs importants pour le SEO, comme le texte alternatif et le nom du produit.

Comment rédiger un texte alternatif ?

Le texte alternatif est une courte phrase qui décrit l'image à une personne qui ne peut pas la voir ; il indique ce qu'est le produit et ce qui le distingue. Les lecteurs d'écran le lisent à voix haute, les moteurs de recherche s'en servent pour comprendre le contenu de l'image, et il s'affiche à sa place lorsque l'image ne se charge pas.

• Nommez le produit et sa caractéristique : Rédigez une phrase courte et explicite comme « Chemise en lin, blanche, vue de face ».
• Ne dites pas « image » ou « photo » : Le lecteur d'écran annonce déjà qu'il s'agit d'une image.
• Ne bourrez pas de mots-clés : Un texte alternatif du type « chemise chemise homme chemise lin chemise pas chère » nuit à la fois à l'accessibilité et à la recherche.
• Rédigez un texte différent pour chaque image : Les images de face, de dos et de détail d'un même produit doivent porter des textes alternatifs différents.
• Laissez vides les images décoratives : Le texte alternatif doit être vide pour les images purement décoratives.
• Restez bref : Une ou deux phrases courtes suffisent généralement.

À lire aussiQu'est-ce que les données structurées (Schema) ? Comment ajouter le schéma produit

Comment les images doivent-elles se charger sur la page ?

La façon dont une image se charge compte autant que l'image elle-même : l'image produit principale qui apparaît en premier à l'écran doit se charger immédiatement, tandis que les images situées sous l'écran doivent se charger lorsque l'utilisateur s'en approche. Sinon, la page s'alourdit inutilement ou l'image importante arrive tard.

• Chargez tardivement les images sous la ligne de flottaison (lazy loading) : Sur une page de liste, les images des produits situés plus bas se chargent au fil du défilement.
• Ne retardez pas la première image : L'image produit principale visible à l'ouverture de la page ne doit pas être chargée en lazy loading ; c'est le contenu le plus important.
• Indiquez la largeur et la hauteur : Les dimensions doivent être définies à l'avance pour que la page ne se décale pas à l'arrivée de l'image.
• Servez une taille adaptée à chaque écran : Une source plus petite peut être envoyée aux téléphones et une plus grande aux ordinateurs de bureau.
• Utilisez un réseau de diffusion (CDN) : Les images se chargent plus vite lorsqu'elles proviennent d'un serveur proche de l'utilisateur.

Okumanızı öneririzCDN Nedir? Ve Ne İşe Yarar?

Comment construire une galerie de produits ?

Le client ne pouvant pas tenir le produit en main, c'est la galerie qui le fait à sa place : différents angles, détails et images d'utilisation renforcent la confiance. Pour construire une galerie, la cohérence compte autant que le nombre d'images.

• Ajoutez un nombre suffisant d'images : visez au moins plusieurs images pour la face avant, l'arrière, le côté, les détails et l'utilisation.
• Choisissez l'image la plus nette en premier : la première image s'affiche sur les pages de liste et dans les partages ; privilégiez une image nette sur fond blanc ou neutre.
• Gardez un arrière-plan et un format cohérents : un arrière-plan similaire et le même format pour tous les produits donnent à la boutique un aspect ordonné.
• Montrez les dimensions et l'échelle : une image d'utilisation qui donne une idée de la taille, ou un tableau des tailles, réduit le taux de retour.
• Ajoutez une vidéo : une courte vidéo du produit montre le mouvement et la texture qu'une image ne peut pas rendre.

Nous vous recommandons de lireÀ quoi doit ressembler une page produit e-commerce ?

Flux de travail d'optimisation des images pour des centaines de produits

Dans une boutique comptant de nombreux produits, optimiser les images une par une est impossible ; il faut donc mettre en place un flux de travail fixe. Les huit étapes ci-dessous offrent une routine reproductible, de la prise de vue à la publication.

1. Photographiez : prenez le même ensemble d'angles pour chaque produit, avec un éclairage et un arrière-plan fixes.
2. Sélectionnez : retenez les prises les plus nettes et les plus cohérentes.
3. Recadrez : ramenez tous les produits au même rapport largeur/hauteur.
4. Redimensionnez : réduisez à la largeur cible (environ le double de la taille affichée).
5. Compressez et choisissez le format : WebP ou JPEG, sans perte de qualité visible.
6. Nommez : donnez des noms parlants ou conformes à la règle d'association de votre système.
7. Téléversez : utilisez l'import en masse s'il existe ; renseignez les textes alternatifs.
8. Mesurez : vérifiez les avertissements relatifs aux images dans un outil de vitesse de page.

Okumanızı öneririzE-Ticaret Görsellerinizi Bu Programlarla Düzenleyin

Arrière-plan de l'image produit : blanc ou lifestyle ?

Les deux sont nécessaires et remplissent des rôles différents : une image sur fond neutre (généralement blanc) montre clairement le produit et met de l'ordre dans les pages de liste, tandis qu'une image lifestyle présente le produit en situation et fait rêver. L'approche la plus sûre consiste à placer en première image de la galerie l'image sobre qui décrit le mieux le produit, puis à passer aux images lifestyle et de détail.

• Image sobre sur la page de liste : un même arrière-plan et un même format donnent à la boutique un aspect ordonné et fiable.
• Contexte sur la page de détail : une image d'utilisation montre la taille du produit et son usage.
• Images de détail : les détails tels que les coutures, la texture, les étiquettes et les connexions facilitent la décision.

À quelle fréquence faut-il optimiser les images ?

L'optimisation des images n'est pas une tâche ponctuelle ; elle se répète à mesure que de nouveaux produits sont ajoutés, que le design change et que le catalogue s'étoffe. Le plus sain est de faire passer les images de chaque nouveau produit par le même flux de travail avant publication, et d'examiner l'ancien catalogue à intervalles réguliers.

• À chaque nouveau produit : standardisez le flux de travail (taille, format, nom, texte alternatif).
• Lorsque le design ou le modèle change : la taille d'affichage des images a peut-être changé ; vérifiez à nouveau la taille source.
• Tous les trois mois : mesurez à nouveau vos pages les plus fréquentées dans un outil de vitesse de page.
• Avant les campagnes : vérifiez les images de vos pages les plus visitées avant l'arrivée d'un fort trafic.

Comment mesurer l'optimisation des images ?

Vous voyez si l'optimisation a fonctionné grâce aux mesures de vitesse de page et au poids de la page. Effectuez la mesure à deux moments : avant et après la modification, sur la même page et dans les mêmes conditions.

• Rapport de vitesse de page : des avertissements tels que « Dimensionner correctement les images », « Diffuser des images aux formats nouvelle génération » et « Différer les images hors écran » ont-ils disparu ?
• Poids total de la page : la taille totale de téléchargement de la page produit a-t-elle diminué ?
• Largest Contentful Paint : le moment où l'image principale du produit s'affiche est-il arrivé plus tôt ?
• Mesure sur mobile : effectuez la mesure en particulier dans des conditions de connexion mobile lente.

8 erreurs courantes dans l'optimisation des images

1. Téléverser telles quelles les images issues du téléphone : une image de plusieurs milliers de pixels est téléchargée en entier alors qu'elle s'affiche dans une petite zone.
2. Utiliser du PNG partout : le PNG produit des fichiers très volumineux pour les photographies.
3. Compresser à l'excès : une dégradation visible et du flou nuisent à la confiance.
4. Laisser un nom de fichier sans signification : des noms comme « IMG_2034 » ne portent aucune information.
5. Laisser le texte alternatif vide ou le bourrer de mots-clés : les deux extrêmes nuisent à l'accessibilité et à la recherche.
6. Charger l'image principale tardivement : si la première image visible à l'écran est différée, la page paraît vide.
7. Ne pas indiquer la taille de l'image : lorsque l'image arrive, la page se décale vers le bas.
8. Utiliser des formats et des arrière-plans incohérents : la page de liste paraît désordonnée.

Liste de contrôle pour l'optimisation des images produit

Avant de publier vos images produit, vous devriez pouvoir répondre « oui » à tous les points ci-dessous.

• L'image est-elle environ deux fois plus large que la taille à laquelle elle est affichée ?
• Les photographies ont-elles été compressées en WebP ou en JPEG sans perte de qualité visible ?
• Les logos et icônes sont-ils en SVG ou de petite taille ?
• Les noms de fichiers sont-ils parlants, en minuscules et sans caractères turcs (ou conformes à la règle d'association du système) ?
• Chaque image a-t-elle un texte alternatif court et pertinent ?
• Les textes alternatifs sont-ils exempts de bourrage de mots-clés ?
• La galerie du produit contient-elle suffisamment d'angles, de détails et d'images d'utilisation ?
• Toutes les images produit ont-elles le même format et un arrière-plan cohérent ?
• Les images situées sous la ligne de flottaison se chargent-elles tardivement, tandis que l'image principale se charge immédiatement ?
• La largeur et la hauteur des images sont-elles définies ?
• Une mesure de vitesse de page a-t-elle été effectuée après la modification ?

Gestion des images produit avec Faprika

Publier rapidement des images correctement préparées pour des centaines de produits est la seconde moitié du travail. Dans l'infrastructure e-commerce de Faprika, les éléments suivants couvrent cette étape (vous pouvez voir à partir de quelle offre chaque fonctionnalité est disponible sur la page des offres e-commerce) :

• Glisser-déposer et téléversement de plusieurs images : lors de l'ajout d'un produit, vous téléversez plusieurs images en les glissant-déposant ou en les sélectionnant dans un fichier ; les étapes figurent dans le tutoriel Ajout d'un nouveau produit.
• Téléversement d'images produit en masse : vous nommez les images selon l'identifiant du produit, le code de stock ou le code-barres et les téléversez en une seule fois ; le séparateur d'ordre est un tiret, un tiret bas ou un astérisque. Les détails figurent dans le tutoriel Téléversement d'images en masse ; cette fonctionnalité varie selon l'offre.
• Fonction de canevas d'image produit : le canevas d'image est défini dans les paramètres de liste et de détail des produits ; il est inclus dans toutes les offres.
• Logo pendant le chargement (lazy logo) : pendant le chargement des images, le logo de votre marque apparaît en arrière-plan du canevas produit ; les détails figurent dans le tutoriel Gestion du lazy logo.
• Vidéo automatique : la section des images produit comprend une option de vidéo automatique ; il est recommandé de l'utiliser avec plusieurs images.
• Réseau de diffusion de contenu (CDN) : un CDN qui accélère le trafic des images et des fichiers est proposé selon l'offre.

Questions fréquentes

Qu'est-ce que l'optimisation des images produits ?

L'optimisation des images produits consiste à amener la taille de fichier, le format, le nom, le texte alternatif et le mode de chargement d'une photo produit à l'état le plus favorable pour la vitesse de page, l'accessibilité et les moteurs de recherche, tout en préservant sa qualité. L'objectif est de proposer des fichiers plus légers et plus explicites sans perte de qualité visible.

Quelle taille doit avoir une image produit ?

L'image source doit être environ deux fois plus large que sa taille d'affichage sur la page ; cela garantit une image nette sur les écrans haute densité. Si une fonction de zoom existe, la source peut aller jusqu'au triple. Par exemple, pour une image affichée en 600 pixels de large sur la page, une largeur de 1200 pixels convient.

Qu'est-ce que WebP et pourquoi le privilégier ?

WebP est un format moderne conçu pour les images ; il offre généralement une qualité similaire avec un fichier plus léger que JPEG et PNG et prend en charge la transparence. Grâce à sa large prise en charge par les navigateurs, c'est un choix courant pour les photos produits ; une version JPEG de secours peut être envisagée pour les systèmes plus anciens.

Comment rédiger un texte alternatif ?

Le texte alternatif doit être une courte phrase qui décrit l'image à une personne qui ne peut pas la voir : indiquez ce qu'est le produit et ce qui le distingue. Ne dites pas « image » ou « photo », ne bourrez pas de mots-clés et rédigez un texte différent pour chaque image. Pour les images purement décoratives, laissez le texte alternatif vide.

Le nom de fichier de l'image est-il important pour le SEO ?

Un nom de fichier explicite est un petit indice qui aide à comprendre le contenu de l'image ; il est moins déterminant que le texte alternatif et le nom du produit. Écrivez le nom de fichier en minuscules, sans caractères spéciaux ni espaces, en séparant les mots par des tirets.

Faut-il charger toutes les images en lazy loading ?

Non. Les images situées sous la ligne de flottaison doivent se charger tardivement, mais l'image produit principale, visible dès l'ouverture de la page, ne doit pas être chargée en lazy loading ; sinon le contenu le plus important est retardé et la page paraît vide.

Articles qui peuvent vous intéresser

• Bir Web Sitesinin Performansını Yavaşlatan En Önemli Detaylar
• Video İçeriklerle E-ticarette Fark Yaratın
• Comment faire le SEO d'une page de catégorie ?
• E-Ticaret Sitesi Güvenlik Sistemleri