Téléchargez un manuel gratuit, qui vous aidera à concevoir votre site en toute confiance.
L’adresse e-mail saisie n’est pas valide.
Nous vous remercions de vous être abonné(e).
En saisissant votre adresse e-mail, vous reconnaissez avoir lu et compris notre Politique de confidentialité et acceptez de recevoir des communications marketing de la part de Squarespace.
Les images que vous choisissez pour représenter votre marque contribuent grandement à la première impression que vos clients se font de votre site. Les photos et autres éléments qui illustrent les mots sur votre site web font partie intégrante de la création d’un site web qui vous aidera à atteindre vos objectifs.
Découvrez comment trouver et importer des images sur une page web, quels formats utiliser, comment optimiser vos photos pour les moteurs de recherche et comment les rendre plus accessibles.
Où trouver des images à utiliser sur votre site ?
La première étape pour choisir une image pour votre site web est d’identifier les types d’images qui correspondent à votre marque et au style de votre page. Une fois que vous avez déterminé l’esthétique qui représente votre marque, vous pouvez chercher les photos et les images qui lui donneront vie.
Les images d’archive ou les générateurs d’images sont un bon point de départ, surtout lorsque vous lancez votre entreprise et que vous avez encore peu d’images personnelles. Squarespace intègre des services d’images d’archive afin de vous aider à trouver des images de haute qualité à prix abordables à utiliser sur votre site web.
Vous pouvez également obtenir des images pour votre site web en prenant vous-même des photos ou en embauchant un photographe, si votre budget vous le permet.
Squarespace s’associe à soona pour proposer des services de photographie de produits. Expédiez vos produits à soona et sélectionnez les types d’images et le style que vous souhaitez, qu’il s’agisse de GIF, de vidéos ou de photos de produits modélisés. Vous pouvez créer votre propre série de photos ou utiliser leur offre Squarespace Starter Pack ou Squarespace Deluxe Pack.
Prendre vous-même vos photos ou faire appel à un professionnel est plus chronophage que de sélectionner des images d’archives, mais les avantages sont nombreux. Illustrer vos propos avec des photos qui représentent véritablement votre marque (photos de vous, de votre studio ou vitrine, de vos articles en promotion ou de votre équipe au travail) peut asseoir votre crédibilité et instaurer une relation de confiance avec votre public.
N’oubliez pas que, que vous utilisiez ou non des images d’archive, vous devez avoir de vraies photos des produits que vous vendez dans votre boutique en ligne.
Comment formater des images pour votre site web
Lorsque vous ajoutez des photos à votre site web, choisissez des images haute résolution dont les formes correspondent aux zones auxquelles vous souhaitez les ajouter sur votre template. Par exemple, si vous ajoutez une bannière, optez pour une image plus large que haute.
Le design réactif des sites web de Squarespace permet de redimensionner automatiquement vos images pour qu’elles puissent être consultées sur n’importe quel appareil, d’un smartphone à un ordinateur de bureau, et ce quelle que soit la largeur de l’écran.
Pour optimiser et accélérer le chargement des photos et des images sur votre site web, prêtez une attention particulière au format de fichier, à la résolution et à la taille.
Meilleurs formats d’image pour les sites web
Les deux formats d’image à privilégier sont JPEG (pour les photos) et PNG (pour les autres images). Ainsi, si vous souhaitez ajouter des photos sur votre site web, optez pour le format JPEG qui permet une bonne restitution des couleurs. Si vous préférez ajouter d’autres types d’images, choisissez le format PNG pour profiter de graphismes nets et précis sur vos logos ou infographies qui ne sont pas riches en couleurs.
Meilleures tailles et résolutions d’images pour les sites web
Quel que soit le format d’image que vous choisissez, assurez-vous d’avoir une résolution optimale. Nous vous recommandons d’opter pour des images dont la taille varie entre 1 500 et 2 500 pixels de largeur.
Il est important de trouver le bon équilibre entre les images haute résolution et les fichiers de plus petite taille. En effet, si vous importez des photos ou des images trop lourdes, elles ralentiront le chargement de votre page. Essayez d’ajuster la résolution et la taille de l’image en compressant le fichier ou de redimensionner l’image si elle est trop grande. Vous pouvez y parvenir à l’aide de la plupart des programmes d’édition d’images.
Idéalement, la taille des fichiers JPEG ou PNG ne devrait pas dépasser 500 Ko par image, et chacune des pages de votre site web ne devrait pas dépasser 2 Mo afin d’optimiser le temps de chargement. Vous pouvez en savoir plus sur la taille de vos pages individuelles en utilisant les outils de développement intégrés à votre navigateur web ou à l’aide d’outils de tiers en ligne.
Pour connaître la taille de chacune de vos pages web à l’aide d’outils de développement :
Effectuez un clic droit sur votre page web et sélectionnez « Inspecter » ou « Inspecteur » (en fonction de votre navigateur). Le tableau de bord qui apparaît alors rassemble vos outils de développement.
Sélectionnez l’onglet « Réseau » en haut du tableau de bord.
Actualisez la page.
Le nombre qui s’affiche avant la mention « transféré(s) » correspond à la taille de la page web. Par exemple, si le tableau de bord indique « 200 Ko transféré(s) », c’est que la taille de votre page web est inférieure à la limite de 2 Mo.
Ajoutez des images à votre site web
Une fois que vous avez sélectionné et compressé vos photos, il est temps de les ajouter à votre site. Pour ce faire, vous devez intégrer vos images à la disposition de votre page avant d’harmoniser les images et le texte.
Incorporer des photos sur votre site web
Commencez par un template de site web, la façon la plus simple d’ajouter des photos et autres images à votre site web. Les templates Squarespace facilitent l’intégration d’images aux quatre coins de votre page, et ce même si vous ne disposez d’aucune expertise en la matière. Vous pouvez directement importer des photos dans votre éditeur de site web ou les ajouter à votre bibliothèque de ressources depuis laquelle vous pouvez les organiser et les recycler à partir d’un seul et même endroit.
Les outils de création de site web comme Squarespace vous permettent également de personnaliser l’affichage de vos images. Ainsi, vous pouvez importer des images seules ou ajouter plusieurs photos dans une galerie ou sous forme de diaporama, notamment si vous souhaitez créer un site web portfolio.
Si vous préférez qu’une image plus grande ne soit pas recadrée, ajustez le point focal. Vous pouvez également ajuster la taille et le positionnement des images grâce aux blocs Image de types Carte, Chevauchement et Collage. Pour affiner leur disposition, sélectionnez Largeur de l’image dans le panneau Design. Pour ajuster davantage la disposition de vos images, vous pouvez les recadrer à l’aide de l’éditeur d’image et ajouter des blocs afin de modifier l’espacement sur la page.
Trouver le juste équilibre entre images et texte
Les images que vous choisissez doivent compléter le contenu de votre site web et vice versa. En effet, vous ne pouvez pas compter uniquement sur vos images ou votre contenu pour faire le gros du travail. Par exemple, une image parlante accompagnée de quelques mots fonctionne tout aussi bien que les images utilisées pour couper les pages qui contiennent plus de texte.
Il est préférable de ne pas inclure de texte dans vos fichiers image. Pensez plutôt à superposer du texte sur vos images à l’aide de champs de texte. De cette manière, vous évitez les problèmes de redimensionnement des navigateurs et votre texte peut être analysé par les moteurs de recherche.
Optimisez les images ajoutées à votre site web
L’optimisation pour les moteurs de recherche (SEO) ne concerne pas uniquement le contenu de votre site web. Le nom de vos fichiers image aura une influence sur la façon dont les moteurs de recherche indexent votre site web et dont les internautes trouvent vos pages. Il est également important d’optimiser le texte de remplacement de vos images, qui consiste en une description plus détaillée que celle donnée par le nom du fichier.
Nommez chacun de vos fichiers de manière très simple pour que les moteurs de recherche puissent les reconnaître. Allez droit au but et n’utilisez pas de signe de ponctuation, à l’exception des traits d’union. Par exemple, si vous ajoutez une photo représentant des ongles soignés pour un salon de manucure, nommez-la « ongles-fleuris-salon-de-manucure ».
L’ajout de texte de remplacement est également très important. En effet, en plus d’être utile en termes de SEO, il permet d’optimiser votre site web en le rendant accessible aux personnes qui utilisent un lecteur d’écran. Privilégiez les descriptions courtes qui ne dépassent pas 250 caractères.
Pensez à ce qu’une personne malvoyante pourrait vouloir savoir à propos d’une image qu’elle ne peut pas voir. Reprenons l’exemple de la photo destinée au salon de manucure. Son texte de remplacement pourrait être le suivant : « Photo représentant deux mains aux longs ongles carrés vernis en blanc avec des fleurs rouges ». Vous pouvez, si vous le souhaitez, omettre les articles (p. ex. le, la, un, une) et la ponctuation. Assurez-vous simplement que vos phrases puissent être lues par les lecteurs d’écran.
Ce message a été mis à jour le 17 novembre 2023.