La photographie de produit est un domaine d’activité où le vieux dicton « Trop n’est pas assez » ne s’applique pas nécessairement à toutes les règles. Plus de pixels, ou une résolution plus élevée, signifient directement un fichier plus lourd et un défi pour la connexion Internet.
Table des matières
La photographie de produit est un domaine d’activité où le vieux dicton « Trop n’est pas assez » ne s’applique pas nécessairement à toutes les règles. Plus de pixels, ou une résolution plus élevée, signifient directement un fichier plus lourd et un défi pour la connexion Internet. Pensez aux temps de chargement de certaines images de produit lorsque vous avez essayé de faire des achats en ligne sur un appareil mobile depuis votre refuge de vacances à la montagne. Le réseau 3G ne pouvait tout simplement pas les transporter ? Ou bien le site web était peut-être conçu pour être consulté sur des écrans plus grands ?
Dans notre guide ultime, nous vous donnerons des conseils pour optimiser les images de produit pour la présence en ligne, afin que cela n’arrive jamais à vos clients. Vous apprendrez à éliminer les temps de chargement fastidieux et les situations où la photo du produit ne semble tout simplement pas adaptée à l’appareil.
Nous commençons par poser la simple question « pourquoi optimiser ? », puis nous vous guidons à travers les arcanes de l’optimisation de la résolution et de la gestion de la taille des fichiers. Enfin, vous aurez l’occasion d’apprendre les principes de base de l’optimisation SEO des images, qui est une partie intégrante d’une boutique en ligne fonctionnant de manière fluide.
Une activité en ligne considérera toujours le temps et l’argent comme des actifs. Apprendre à les gérer efficacement fait partie de la réussite et ne va pas sans rationaliser les processus de photographie de produit. Vous voudrez produire des images qui vendent et des images qui guident en douceur votre client à travers le site web plutôt que de créer des obstacles.
Ces images de produit devront être optimisées en termes de visibilité, de taille de téléchargement et de positionnement dans les moteurs de recherche. Il n’y a pas d’autre choix que de s’attaquer à ces paramètres si vous visez la réduction des coûts et accordez de l’importance à l’expérience de vos utilisateurs.
En tenant compte de l’optimisation des images, vous obtiendrez un site web plus rapide et plus léger, ce qui contribuera à réduire les frais de serveur. Vous obtiendrez également une meilleure position dans les moteurs de recherche, ce qui génère du trafic vers votre site web et augmente les conversions.
La manière la plus simple de penser à l’optimisation est d’envisager l’utilisation de résolutions plus petites, l’introduction de la compression d’image et le balisage correct des images. Cela impliquera de choisir des formats d’image, un certain post-traitement de la résolution et une certaine dose de travail de webmaster.
Nous vous guiderons à travers tout cela.
Pour commencer, examinons rapidement ce qu’est la résolution. Dans une définition de base, c’est le nombre de pixels dont une image est composée. Elle s’exprime généralement par les valeurs verticale et horizontale : la largeur et la hauteur d’une image en pixels, par ex. 1920×1080.
Plus une image contient de pixels, mieux les détails peuvent être représentés pour le spectateur. L’exemple ci-dessous illustre cette situation.
Haute résolution
Basse résolution
Lorsqu’il s’agit d’optimiser la résolution, il n’existe pas de solution simple et unique. Pour choisir la résolution optimale pour votre image de produit, vous prendrez en compte les caractéristiques suivantes :
Viser la résolution la plus élevée possible ne sera pas une stratégie recommandée, même s’il peut sembler que « plus de pixels signifie plus de détails ». Dans le cas des boutiques en ligne, cela se traduirait plutôt par « plus de temps de chargement » et « affichage erroné ». Votre technicien web et votre analyste SEO le savent bien…
Les exigences du site web sont la première raison pour laquelle vous devez faire fonctionner vos images et votre système en harmonie. Les questions auxquelles votre webmaster vous aidera à répondre peuvent inclure :
Connaître ces réponses vous guidera dans les premiers choix de résolution que vous ferez. Lors de la planification d’une boutique en ligne, travaillez en étroite collaboration avec votre équipe web. Les connaissances qu’elle apporte vous feront gagner du temps dans la création et le post-traitement des images de produit. Et surtout, ce sera le premier pas vers un affichage fluide des images pour vos clients.
Écoutez attentivement les web designers et choisissez les résolutions qu’ils proposent pour les miniatures, les gros plans, les images principales de listes, etc. Il sera beaucoup plus efficace de les connaître à l’avance et de définir ensuite des normes optimales pour la génération de photos dans votre entreprise.
La diversité des appareils numériques disponibles jouera un rôle important dans la définition des lignes directrices de résolution pour vos images de produit. Pour consulter vos produits, les clients peuvent utiliser des smartphones ou des tablettes de tailles différentes ainsi que des écrans d’ordinateur multistandard. Comment les adapter à tous ?
Cette grande question n’a pas une seule réponse. En effet, il existe des dizaines de résolutions possibles que votre utilisateur pourrait choisir. Certaines seront plus courantes, d’autres moins. Vous pouvez mesurer les résolutions de vos clients avec la plupart des outils de base de gestion du trafic web et tirer des conclusions à partir des statistiques. Avec les webmasters et les graphistes, vous devrez décider d’adapter les images à la majorité plutôt qu’à l’ensemble de ce groupe.
Pour comprendre le phénomène des écrans de résolutions différentes, examinons comment un écran se comporte lorsque nous modifions sa résolution.
Selon la résolution, l’écran est capable d’afficher moins ou plus. Sur les écrans d’ordinateur portable ou de bureau, le côté le plus long de la résolution sera horizontal. Sur les écrans de téléphone mobile, le côté vertical sera plus long. Déjà cette simple différence génère des exigences pour les images de votre e-shop – par ex. faut-il intégrer davantage de contenu verticalement ou horizontalement ?
Il convient de noter que, dans le cas des écrans HiDPI (High Dots Per Inch) ou Retina, courants sur les smartphones et ordinateurs portables modernes, il est nécessaire de distinguer les soi-disant pixels CSS utilisés par les applications (y compris les navigateurs web) des pixels physiques déterminés par le fabricant de l’appareil. Dans ce cas, pour 1 pixel CSS, on peut compter davantage de pixels physiques. Le paramètre qui le définit est le DPR – Device Pixel Ratio.
Les écrans High Dots Per Inch permettent aux web designers d’afficher des images dans diverses résolutions selon ce que l’écran prend en charge. En général, différentes versions de la même image seront préparées, chacune dans une résolution différente. Elles seront placées sur le site web à l’aide de l’attribut <img scrset>, qui sera lu par les navigateurs pour afficher l’image de la manière la plus pratique. Apprenez-en davantage sur le sujet dans un site web dédié aux résolutions d’écran.
Les écrans de résolutions comme 4K et plus gagnent en popularité, cependant c’est encore (2021) la résolution fullHD qui est la plus couramment utilisée, que ce soit sur ordinateur portable ou sur smartphone. Notre photo, vue en zoom 100 %, se comportera différemment sur les écrans verticaux et horizontaux :
Dans une résolution plus grande
Horizontale et adaptée à l’écran
Verticale et ne s’adaptant pas à l’écran
Notez que sur un smartphone, les 1920 pixels de fullHD constitueront le côté le plus long (vertical) de l’écran. Ainsi, notre photo sera affichée plus petite que la surface de l’écran.
Les exemples ci-dessus illustrent une étude de cas pour la résolution fullHD. Comme ce n’est pas la seule résolution utilisée par les clients, vous devriez envisager d’ajuster la résolution « afin qu’elle s’adapte à plus d’écrans ».
Cela signifierait introduire diverses résolutions d’image pour différentes résolutions d’écran et les charger de manière responsive. Une solution qui peut être mise en œuvre dans la plupart des systèmes de gestion de sites web.
Veillez à préparer des fichiers séparés pour les images miniatures des produits, car elles se chargeront plus rapidement qu’une grande image réduite par le navigateur web. Cela demande simplement moins de traitement et de temps de téléchargement, ce qui prend de l’importance lorsque de nombreuses miniatures de produits se chargent sur un écran en grille ou en ligne.
De plus, la taille réelle de la miniature et la taille indiquée en HTML dans sa balise <image> peuvent influencer les paramètres pris en compte par Google lors du positionnement de votre site web. La règle pour améliorer les performances du site web et le SEO est d’afficher exactement la résolution du fichier sur le serveur, sans opérations du navigateur.
Une résolution extrêmement faible signifie une taille de fichier agréablement minimale. L’inverse est vrai pour une résolution très élevée. L’optimiseur devra trouver un juste milieu pour conserver une taille de fichier raisonnable, tout en ne perdant pas le niveau de détail avec la baisse de résolution. Voir ci-dessous des exemples de tailles de fichier.
Déterminer la taille de fichier optimale peut être guidé par des paramètres tels que le nombre d’images qui doivent être chargées simultanément sur un site web. Imaginez une grille de produits de centaines de produits où les images sont chargées en pleine résolution puis réduites par le navigateur. Cela représenterait une charge sérieuse pour la connexion Internet de l’utilisateur final et rendrait la navigation pratiquement impossible sur des réseaux plus lents.
Sachant combien il est difficile de compartimenter les connaissances sur l’optimisation des images et combien de facettes et d’approches elle présente, nous avons décidé de préparer pour vous une courte liste de conseils. Poursuivez votre lecture.
1) Choisissez le bon format pour vos graphiques. Pour les images de formes géométriques simples et de gammes tonales peu complexes, il est recommandé de remplacer les graphiques raster par des graphiques vectoriels. Vous pouvez ainsi obtenir le meilleur rapport qualité:taille et gagner une incroyable évolutivité. Les graphiques vectoriels (par ex. format SVG) s’affichent aussi bien en haute et en basse résolution. Ils sont recommandés pour les logos, icônes, illustrations.
Les graphiques raster (types de fichiers comme PNG, JPG) conviennent aux visuels complexes et à la photographie. Un bonus pour leur optimisation web peut être obtenu avec le format WebP – voir point 6.
2) Utilisez le bon niveau de compression lors de la création du fichier.
Les logiciels de retouche photo offrent une compression au moment de l’enregistrement du fichier, selon le type de fichier. Le curseur peut être réglé pour maximiser la compression et obtenir un petit fichier, ou pour réduire la compression et obtenir des fichiers plus volumineux.
La règle d’or doit être trouvée personnellement par chaque utilisateur, avec la suggestion générale de maintenir la compression au-dessus de 92 pour cent. Vous devriez trouver un point où, sans sacrifier la qualité, la taille de l’image est satisfaisante.
3) Utilisez un compresseur d’images avancé.
Les gros fichiers image peuvent être compressés en plus avec un minimiseur d’images en ligne, qui propose des algorithmes avancés pour réduire la taille du fichier tout en conservant intacte l’impression de qualité. Ces outils fonctionnent généralement avec les types de fichiers les plus courants.
Les utiliser est aussi simple que de glisser-déposer un fichier puis de télécharger le résultat. Faites des compresseurs d’images vos outils pour le web. Parmi les services en ligne que nous recommandons figurent Tiny JPG et ImageOptim. Vous trouverez de nombreux classements en ligne de compresseurs d’images, car ces sites sont vraiment populaires.
4) Remplacez GIF par des vidéos lorsque c’est pertinent.
Les fichiers GIF ont tendance à être lourds, surtout s’ils incluent des séquences vidéo plus longues. Il peut être beaucoup plus pratique d’utiliser différents types de fichiers vidéo compressés pour réduire le temps de chargement de la page et introduire une optimisation de l’affichage.
Vous pourriez même envisager d’utiliser des vidéos YouTube intégrées ou d’autres vidéos dans le cloud, ce qui empêchera le navigateur de télécharger les clips vidéo directement depuis votre serveur et tous en même temps.
5) Servez les images de manière responsive.
Nous avons déjà abordé ce sujet. Pour l’optimisation du site web, assurez-vous que votre CMS serve différentes versions d’image selon les résolutions d’écran et les appareils.
6) Utilisez WebP, JPEG2000 et autres.
L’utilisation du format WebP, apparu sur le marché dès 2010, constitue un atout pour le SEO de votre site web et fait naturellement gagner du temps de chargement. Ce format offre une bonne qualité d’image et une petite taille de fichier. Cependant, l’utilisation de ce type de fichier peut être limitée par la compatibilité des navigateurs. Il existe aussi de nombreux autres formats web, qui n’ont toutefois pas gagné autant en popularité (HEIC, AVIF, JPEG XL). Et Google pense déjà à WebP2 !
Divers services cloud, comme Orbitvu SUN, servent les images au format WebP de manière conditionnelle – si le navigateur ne le prend pas en charge, JPG ou PNG est utilisé à la place.
7) Utilisez un CDN pour le chargement des images.
Les Content Delivery Networks (CDN) peuvent être compris comme des API définissant comment utiliser l’image téléchargée sur votre site web. Elles peuvent être soit auto-gérées, soit fournies par un service externe. Leur utilisation s’applique via des URL d’image spéciales qui conditionnent l’affichage de l’image par le navigateur et peut conduire à 40-80 % d’économies sur la taille de l’image.
En savoir plus sur les CDN dans un article dédié sur web.dev.
8) Mettez en cache les images qui ne changent pas.
Le cache fonctionne en stockant les images qui ne changent pas sur le disque de l’utilisateur et en les chargeant directement depuis celui-ci lorsque nécessaire. Le cache est généralement géré par les navigateurs, mais la construction du site web peut encourager cette solution et ainsi raccourcir le temps de chargement de la page pour les utilisateurs récurrents.
Voici nos 8 règles. Commencez par elles et construisez votre propre ensemble de conseils fondés sur l’expérience. Nous aimerions avoir de vos nouvelles !
Pour la compatibilité des formats d’image et des navigateurs web, nous vous recommandons de consulter le site simple et efficace : https://caniuse.com/
Une image est encodée dans un format de fichier en utilisant l’un de plusieurs espaces colorimétriques. Le plus souvent, il s’agira soit de sRGB soit d’Adobe RGB.
Le sujet des espaces colorimétriques est l’un des thèmes les plus complexes et les plus développés en photographie – lisez-en plus sur les espaces colorimétriques RGB dans l’article Wikipédia.
Pour une utilisation web, vous aurez peu de choix en matière d’espace colorimétrique. Le standard largement admis est sRGB et seul cet espace est géré par les navigateurs Internet.
Assurez-vous de préparer vos images dès le départ dans l’espace colorimétrique sRGB et vous éviterez les pertes dues à la conversion. Cela peut être réglé dans les paramètres de l’appareil photo ou géré dans un logiciel de retouche d’image comme Adobe Photoshop.
L’optimisation d’images à des fins SEO (image SEO) se concentrera sur la visibilité de vos images dans le moteur de recherche Google Graphics et plus largement de votre site web dans tous les résultats de recherche.
Les images peuvent sérieusement contribuer à votre position dans les résultats de recherche Google et se retrouver avantageusement listées dans Google Graphics si quelques règles sont assimilées et maintenues dans la conception du site web.
Pour bien classer une image dans un moteur de recherche, vous devez savoir ce qui est recherché. Planifiez à l’avance les descriptions de vos images en accord avec la recherche SEO, que de nombreuses plateformes comme Semrush, Semstorm ou Ahrefs peuvent aider. Faites en sorte que vos images soient trouvées là où on les cherche !
Un conseil astucieux que vous pouvez utiliser consiste à ajouter des mots-clés spéciaux à vos descriptions d’images. « Opinion », « Avis d’expert », « top 10 », « avis », « prix », « comparaison », « classement », « test » sont les mots-clés les plus courants ajoutés à une catégorie ou à un produit pour rechercher des informations. Répondez à ce besoin et ajoutez-les à votre image ! Si vous vendez des téléphones, faites en sorte que cela ressemble à : « Samsung s10 test » ou « Classement rapide des smartphones ». La règle est simple.
Tout comme pour l’optimisation de la résolution et de la taille, Google examine le format d’une image pour évaluer son intérêt en tant que résultat de recherche. Le format définira très souvent la taille et la vitesse de chargement, influençant ainsi la décision de Google. Notre conseil rapide : autant que possible, utilisez WebP ou ses successeurs.
Une bonne qualité se traduit par une meilleure visibilité sur Google. N’utilisez pas trop d’images de stock, car elles seront immédiatement moins bien classées. Essayez d’introduire autant que possible des images bien prises de vos produits, sans pixellisation, sans flou, avec une grande attractivité. Google vous en récompensera.
La résolution et la taille de la photo jouent un rôle majeur pour Google. N’adoptez pas l’approche « plus c’est grand, mieux c’est » à laquelle vous pourriez être tenté. Essayez de garder vos images sous 5 MB, afin de permettre un chargement rapide pour une meilleure expérience utilisateur et d’améliorer votre position dans les moteurs de recherche. Images de produit incluses !
Pour que le site web soit mieux classé et que ses images soient davantage appréciées par Google, vous pouvez utiliser la technique du lazy loading. Elle charge les images progressivement au fur et à mesure que l’utilisateur progresse sur le site, permettant ainsi une navigation plus fluide et des temps de chargement de page plus courts. Elle améliorera aussi l’expérience utilisateur, car elle contribue à un accès plus rapide aux contenus.
Téléverser une carte d’images du site web dans Google Search Console facilitera la compréhension par le moteur de recherche de l’architecture et de l’emplacement des images sur votre site. Plus d’informations équivaut ici à plus de crédit – attendez-vous à ce que cela améliore votre classement.
La clé d’une bonne balise alt d’image (le texte descriptif que vous attribuez dans le HTML de votre site web à une image via l’attribut « alt ») est le placement astucieux de mots-clés. Ne surchargez pas le texte alt avec des mots-clés populaires ; mieux vaut le garder pertinent par rapport au contenu de l’image et y faire entrer intuitivement un ou deux mots-clés. Sur les sites multilingues, gérez vos balises alt pour toutes les langues concernées – cela implique plus de travail de localisation, mais cela en vaut certainement la peine.
Il est important que la photo que vous souhaitez voir bien classée sur Google soit placée correctement dans le texte du site web. Placez-la près du texte qui contient vos mots-clés souhaités et qu’elle illustre. Le moteur de recherche tirera des informations de cette proximité. Les sites e-commerce ont tout intérêt à construire une structure où la description du produit et l’image sont bien proches l’une de l’autre.
Google est un moteur de recherche de contenu. Assurez-vous que vos contenus textuels et visuels sont de haute qualité. Écrivez intelligemment en gardant à l’esprit les suggestions SEO et illustrez vos bons textes avec des images pertinentes. Petit à petit, cela portera ses fruits comme stratégie globale pour une activité e-commerce. C’est l’image SEO poussée un cran plus loin !
Il est encore plus difficile pour Google d’extraire le contenu et le sens des images. Si vous souhaitez transmettre des informations importantes à vos clients/lecteurs, évitez de les mettre uniquement dans l’image. Aussi utiles que soient les infographies, il sera bénéfique pour le SEO de les décrire dans le texte.
Non seulement des balises alt bien conçues, mais aussi des images clairement nommées seront favorisées par Google. Utilisez des tirets et des noms descriptifs. Des solutions comme DSC123123_a.jpg ne parlent du contenu de l’image ni à l’utilisateur ni au moteur de recherche.
Google désigne des éléments de contenu pour des modes de présentation spéciaux, plus visibles qu’un résultat de recherche typique. Pensez aux recettes culinaires, aux courtes biographies, aux fiches produit. Si vous concevez votre site web pour indiquer clairement quel contenu mérite d’être traité comme données structurées (images incluses), vous pouvez bénéficier d’une position exposée dans la liste des résultats de recherche. Pensez-y surtout pour les produits !
Avec nos listes de recommandations, nous vous avons guidé à travers la question de l’optimisation des images. Maintenant, il est temps de mettre vos connaissances en pratique.
Que vous construisiez un nouveau site e-commerce ou que vous pensiez à améliorer les performances de celui que vous avez déjà, vous devrez optimiser les images dans les domaines suivants :
Résolution
Tout consiste à comprendre l’usage majoritaire de votre site web et à adapter les images pour qu’elles fonctionnent en accord avec ce constat. La diffusion responsive des images sera également essentielle. Vous voulez que vos utilisateurs puissent naviguer sur mobile, tablette et ordinateur.
Taille du fichier
Trouvez le bon format pour vos images, un format compatible avec les navigateurs et qui accélère le temps de chargement. N’hésitez pas à utiliser des minimisateurs d’images puissants (et gratuits) qui peuvent réduire la taille des fichiers jusqu’à 70 %.
Espace colorimétrique
Il n’y a qu’un seul choix ici – l’espace colorimétrique sRGB. Il est optimisé pour les navigateurs web et largement utilisé sur le Web.
SEO
Notre liste de conseils donne un aperçu de base sur la façon d’améliorer le SEO de vos images. Recherchez les mots-clés, structurez le site web et évitez de mettre trop d’informations uniquement dans l’image. Pensez aux URL correctes et à l’indication des données structurées. Cela, et plus encore, devrait vous mener suffisamment loin dans l’optimisation SEO des images.
Prêt à commencer ? Nous vous souhaitons bonne chance.
Utilisez le formulaire pour nous dire ce que vous prévoyez et quel type de workflow de contenu produit vous avez besoin.
14 juillet 2025
Maîtrisez la photographie de produits e-commerce en 2025 grâce à des conseils d’experts sur l’éclairage, les réglages de l’appareil photo, les studios pilotés par l’IA et la postproduction. Boostez vos ventes avec des images qui inspirent confiance et convertissent.
11 juillet 2025
Découvrez comment la photographie de produit automatisée peut dynamiser votre boutique e-commerce. Apprenez les techniques clés pour réussir et renforcez votre présence en ligne. En savoir plus !
25 juin 2025
Découvrez 5 avantages clés de l’automatisation de la photographie de produits e-commerce — d’une mise sur le marché plus rapide à une meilleure cohérence, précision et rentabilité à grande échelle.