Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Formater vos images en vue d'un affichage sur le Web

Squarespace facilite le formatage de vos images en vue d’un affichage sur le web. Nous créons sept versions de chaque image chargée, afin de garantir un affichage parfait sur des écrans de toutes tailles.

Ce guide vous permet de comprendre comment les images s'affichent sur le web, d'en savoir plus sur les exigences relatives aux images sur Squarespace et de trouver des conseils de formatage pour vos images. Nous proposons également des étapes pour résoudre les problèmes de format des images.

Conseil : faites que votre site se démarque des autres avec des images de haute qualité et bien placées. Pour en savoir plus, consultez notre guide sur le choix d'images attrayantes.

Regarder une vidéo

Comment les images s’affichent sur le web

Plusieurs facteurs influencent l’affichage de vos images sur les sites web :

  • Spécifications des fichiers image - Consultez nos exigences en matière d'images pour vous assurer que vous pouvez importer des images sur votre site.
  • Largeur de l’image – Les images de largeur étroite peuvent être parfaites sur les appareils mobiles, mais elles sont floues sur les ordinateurs, car les écrans d’ordinateur sont plus larges que les appareils mobiles.
  • Forme de l’image – Également appelée valeur de proportion, il s’agit du rapport entre la hauteur et la largeur de votre image. La forme de votre image influence la façon dont elle s’affiche sur votre site. Pour en savoir plus, consultez la page Comprendre les valeurs de proportion. Nous proposons également des exemples de valeurs de proportion courantes.
  • Conteneurs d’images et recadrage – Chacune des images de votre site se trouve dans un conteneur, c’est-à-dire une zone invisible qui contrôle la façon dont l’image s’affiche par rapport aux autres contenus de la page. Par exemple, les bannières sont dotées d’un conteneur rectangulaire. Pour réduire ou empêcher le recadrage, assurez-vous que la forme de votre image correspond à la forme du conteneur. Si votre image apparaît recadrée, consultez l’article Résoudre les problèmes de recadrage.
  • Design adaptatif – Chaque site Squarespace dispose d’un design adaptatif qui modifie automatiquement la taille de vos images, en fonction de l’appareil de votre visiteur.

Exigences et recommandations relatives aux images

Avant de transférer des images sur votre site, assurez-vous que vos images respectent nos exigences en matière d’images. Il s’agit du minimum que nous vous conseillons pour garantir que vos images s’affichent correctement sur votre site. Gardez la taille de votre page inférieure à 5 Mo pour vous assurer que votre site se charge rapidement. Si vous remarquez que votre site se charge lentement, consultez l’article Réduire la taille des pages pour un chargement plus rapide.

Attribut d’image Caractéristiques techniques Note
Type de fichier Seuls les fichiers .jpg, .gif, ou .png Les fichiers .PDF, .PSD et .DOC ne sont pas compatibles. Internet Explorer ne peut pas afficher les fichiers .PNG en tant que favicons.
Taille de fichiers

Limite de 20 Mo

Utilisez des images de maximum 500 Ko pour que votre site charge rapidement.

Le poids des images ne doit pas dépasser 1,5 Mo dans Squarespace Scheduling. Pour plus d'informations sur les exigences relatives aux images de Scheduling, consultez la page Images dans Squarespace Scheduling.

Nom de fichiers Utilisez uniquement des lettres, des chiffres, des tirets bas et des traits d’union. Les lettres accentuées, les points d'interrogation, les signes de pourcentage et les esperluettes risquent de ne pas permettre l'importation ou de provoquer des problèmes inattendus.
Largeur des images Une largeur de 2 500 pixels est idéale dans la plupart des cas.

Vous n’avez pas besoin de redimensionner vos images si leur largeur est supérieure à 2 500 px et qu’elles répondent à nos autres spécifications. Pour les images de moins de 1 500 pixels de large, l’affichage peut être flou. Nous suggérons différentes largeurs pour les logos de site, les icônes de navigateur et les .gifs animés.

Résolution Limite de 60 Mpx (mégapixels) Pour déterminer la résolution d’une image, utilisez ce convertisseur ou multipliez ses dimensions, puis divisez le résultat par un million. Par exemple, une image mesurant 1 500 px sur 1 650 px fait 2,47 Mpx.
Mode de couleur RVB (rouge, vert, bleu) Le mode couleur CMJN est réservé aux documents imprimés et n’apparaît pas correctement dans la plupart des navigateurs. Sur Mac, il est possible que cet attribut s’appelle Profil de couleurs ou Espace de couleurs.
Profil de couleur sRVB Si les images ne s’affichent pas correctement sur les appareils mobiles, la source du problème est probablement l’absence d’un profil de couleur sRVB.
DPI et PPI n/a Inutile de vous préoccuper des unités DPI et PPI, car elles affectent la qualité d’impression d’une image, mais pas la qualité de l’affichage sur le web.

Formatage des images

L'affichage des images sur vos pages dépend de la façon dont vous les ajoutez et de l'endroit où vous les placez. Vous pouvez ajouter des images à votre site à l'aide de blocs, de sections et de pages.

À retenir :

  • Assurez-vous que votre image est orientée dans le bon sens avant de l’importer. Si votre image est enregistrée à l’envers, faites-la pivoter avec un logiciel de retouche d’image avant de la charger sur votre site. Si vous avez déjà ajouté l’image à votre site, faites-la pivoter à l’aide de notre éditeur d’image intégré.
  • Les images ajoutées aux galeries s’affichent mieux lorsqu’elles ont toutes une forme similaire. Par exemple, utilisez uniquement des images en mode paysage (plus larges que hautes) ou en mode portrait (plus hautes que larges), mais pas un mélange des deux.
  • Pour afficher un aperçu de l’apparence de votre site sur les appareils mobiles, utilisez la vue par appareil.

Comment mes images sont-elles redimensionnées en fonction des appareils ?

Lorsque vous importez une image, Squarespace crée jusqu’à sept versions de cette image, chacune ayant une largeur différente. La hauteur change par rapport à la largeur pour préserver la forme de l’image. Le design adaptatif intégré de Squarespace choisit automatiquement la taille d’image appropriée en fonction de l’écran du visiteur. Les largeurs que nous créons sont les suivantes :

  • 100 pixels
  • 300 pixels
  • 500 pixels
  • 750 pixels
  • 1 000 pixels
  • 1 500 pixels
  • 2 500 pixels

Mes images doivent-elles avoir des dimensions exactes ?

Non. Notre système redimensionne automatiquement vos images pour qu’elles soient plus grandes ou plus petites selon la largeur de l’appareil. Il est donc inutile de formater vos images à des dimensions exactes, comme 750 px × 500 px. Par exemple, il n’y a pas d’exigence spécifique de hauteur et de largeur d’image pour les blocs d’images et d’exigence différente pour les images dans les sections de la galerie. Suivez nos conseils sur la largeur d’image pour vous assurer que vos images ne sont pas floues.

Si vos images ne s’affichent pas comme vous le souhaitez :

Ajoutez et personnalisez vos images

Vous pouvez utiliser les styles de site, les panneaux de design et les paramètres des sections Bloc ou Page pour modifier le style et personnaliser l’apparence de vos images. La façon dont vous ajoutez et personnalisez vos images dépend de la version sur laquelle se trouve votre site. Parcourez le tableau ci-dessous pour savoir comment ajouter et personnaliser des images sur votre site :

 

Afficher l’image en utilisant Comment personnaliser vos images

Logo du site

Favicon ou icône de navigateur

Blocs Image

Bannières

Pages de couverture

Pages Galerie

Blocs Galerie

Miniatures

Blocs Produit

Images d’arrière-plan appliquées à l’ensemble du site

Fichiers GIF animés

Texte et noms de fichiers d’images

Noms d’images et texte de remplacement

Le nom d’une image sert de texte de remplacement si aucun autre texte de remplacement n’est fourni. Ce nom indique également aux moteurs de recherche le contenu de l’image, ce qui augmente vos chances d’apparaître dans les recherches d’images.

En créant vos images, respectez nos bonnes pratiques concernant le texte de remplacement.

Astuce : pour la plupart des images, vous pouvez changer le nom du fichier en chargeant de nouveau l‘image avec un nouveau nom. Dans les blocs Image, vous pouvez modifier le champ Nom de fichier dans l’onglet Contenu.

Texte lié à l'image

Pour ajouter du texte sur votre image, nous vous recommandons de l'ajouter en superposition au lieu de l'incorporer dans votre image. Cela permet de rechercher le texte et que celui-ci reste visible si l'image est recadrée sur des appareils plus petits. Consultez nos conseils pour ajouter du texte de superposition aux blocs Image, aux bannières, aux pages Galerie et aux blocs Galerie.

Si votre image contient du texte, enregistrez-la au format .png. Le texte d’un fichier .jpg devient flou lorsque l’image est compressée. Un fichier .png conserve la netteté du texte, en particulier si l’image est affichée dans sa taille d’origine.

Résoudre les problèmes de formatage de vos images

Si vos images apparaissent recadrées ou déformées, vous pouvez :

Pourquoi un message d’erreur apparaît-il lorsque je transfère mon image ?

Tout d’abord, consultez nos exigences en matière d’image. Si vous utilisez un type de fichier compatible et que votre image pèse 20 Mo ou moins, le problème peut être lié à la résolution de votre image. La résolution des images se mesure en mégapixels et notre limite est de 60 Mpx.

Pourquoi la couleur de mon image est-elle déformée ?

Le mode colorimétrique ou le profil colorimétrique de votre image n'est peut-être pas correctement formaté. Consultez nos exigences relatives aux images pour confirmer que vous utilisez les paramètres acceptés.

Pourquoi les images de ma bannière sont-elles recadrées sur des appareils mobiles ?

Les images des bannières sont presque toujours recadrées sur les appareils mobiles, car une bannière est large et que les appareils mobiles ont une largeur étroite. Plusieurs facteurs entraînent le recadrage des images des bannières sur les appareils mobiles. Si vous remarquez un recadrage sur des appareils mobiles :

Images dans Squarespace Scheduling

Lorsque vous importez des images dans Squarespace Scheduling, vous pouvez utiliser les mêmes types de fichiers image que ceux utilisés pour le reste de votre site. Toutefois, lorsque vous formatez vos images pour Scheduling, gardez à l'esprit les différences suivantes :

  • La taille des fichiers doit être inférieure à la taille limite des images de sites web.
  • Scheduling redimensionne automatiquement les images de plus de 600 x 120 px lorsqu'elles sont importées dans le champ Logo de l'entreprise.
  • Scheduling redimensionne automatiquement les images de plus de 600 x 600 px lorsqu'elles sont importées en tant qu'image pour un type de calendrier ou de rendez-vous.
  • Pour obtenir de meilleurs rendus visuels, nous vous recommandons d'utiliser des images carrées, soit, dont la valeur de proportion est 1:1.

Aide supplémentaire

Pour en savoir plus sur l’ajout d’images sur Squarespace, consultez ces guides :

En plus de nos guides ci-dessus, nous offrons d’autres ressources pour vous aider à formater les images :

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 773 sur 1331
Formater vos images en vue d'un affichage sur le Web