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

Conseils pour personnaliser les images afin qu’elles s’affichent clairement sur n’importe quelle taille d’écran.

Dernière mise à jour le 31 décembre 2024

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 formatage de vos images.

Astuce

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 relatives aux 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 réactif – Chaque site Squarespace dispose d’un design réactif qui modifie automatiquement la taille de vos images, en fonction de l’appareil de votre visiteur.

Exigences et bonnes pratiques relatives aux images

Avant de charger des images sur votre site, assurez-vous que vos images respectent nos exigences concernant les images. Vous ne pouvez pas modifier le fichier image lui-même une fois le chargement terminé, mais uniquement son apparence à l'aide de notre éditeur d'image intégré.

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.
Taille de fichiers

Limite de 20 Mo

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

Il est préférable de charger des images de haute qualité dont la taille est égale ou supérieure à la taille d’affichage maximale de l’image sur votre site. Les versions redimensionnées de l’image s’afficheront ainsi dans la meilleure qualité possible.

Dans Acuity, les images ne doivent pas dépasser 1,5 Mo. 

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.

Il n’est pas nécessaire de redimensionner vos images si leur largeur est supérieure à 2 500 px et qu’elles répondent à nos autres spécifications, mais si vous exportez vos images spécifiquement pour les charger sur Squarespace, essayez de les adapter à une largeur de 2 500 px. Vous aurez ainsi accès à la gamme complète d’images redimensionnées que nous créons, tout en minimisant vos temps de chargement.

Vous pouvez charger des images inférieures à 2 500 px pour limiter la résolution maximale de l’image qui s’affiche sur votre site. Cela peut être utile pour augmenter la vitesse à laquelle les visiteurs de votre site peuvent télécharger cette image sur certains appareils, ou pour limiter la qualité de l’image que les visiteurs de votre site peuvent télécharger.

Les images de moins de 1 500 pixels de large peuvent sembler floues.

Nous proposons différentes largeurs pour les logos de site, les icônes de navigateur et les campagnes e-mail.

Résolution Limite de 120 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.

Notez qu’en fonction de la taille de l’image, télécharger votre fichier image original à partir de votre site peut ne pas être possible. Pour réduire le risque de perte des fichiers originaux, conservez tous les fichiers image sur votre ordinateur après les avoir chargés sur votre site.

Nos exigences sont le minimum que nous recommandons pour garantir que vos images s'affichent correctement sur votre site. Limitez la taille de votre page à moins de 5 Mo pour garantir un chargement rapide de votre site. Si vous remarquez que votre site se charge lentement, consultez l'article Réduire la taille de votre page pour accélérer son chargement.

Astuce

optimisez la taille des images en connectant l’extension TinyIMG. TinyIMG remplace les images trop grandes par des versions compressées, ce qui accélère le chargement des pages tout en préservant la qualité de l’image. Bien que nous travaillions avec des services tiers pour garantir le bon fonctionnement des Squarespace Extensions, nous ne fournissons pas d’assistance pour les extensions. Nous pouvons vous aider à connecter ou à déconnecter vos extensions. Pour toute autre question, contactez directement le fournisseur d’extensions.

Vérifier vos fichiers images

Pour savoir si votre image répond à nos exigences, vous devez vérifier les informations relatives à votre fichier image.

Mac

Pour vérifier les informations d'une image :

  1. Sélectionnez un fichier image sur votre ordinateur.
  2. Appuyez sur Commande + I.
  3. Dans la fenêtre qui s'ouvre, cliquez sur Plus d'informations.

Windows

Pour vérifier les informations d'une image :

  1. Sélectionnez un fichier image sur votre ordinateur.
  2. Appuyez sur Alt + Entrée.
  3. Dans la fenêtre qui s'ouvre, cliquez sur Détails.

Appareils mobiles

Les étapes pour afficher les informations relatives aux images varient selon votre application, votre appareil et votre système d'exploitation. Consultez la documentation de votre application pour visualiser ou modifier des photos sur votre appareil mobile.

Remarque

les iPhone et les iPad sous iOS 11 et versions ultérieures capturent des images dans le format haute efficacité (HEIF) dont l'extension de fichier est .heic. Ces fichiers sont automatiquement convertis en .jpg lorsqu'ils sont importés ou partagés dans de nombreux cas, y compris dans l'application Squarespace, mais vous pouvez régler les paramètres de votre téléphone pour capturer par défaut vos images au format .jpg. Pour en savoir plus, consultez la documentation d'Apple.

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.

Arrière-plans transparents

Pour créer une image sans couleur d'arrière-plan, assurez-vous que votre image est un fichier .png avec un arrière-plan transparent. Vous pouvez utiliser un logiciel tiers pour y parvenir, ou si vous avez besoin d'un logo, vous pouvez utiliser Squarespace Logo pour en créer un automatiquement avec un arrière-plan transparent.

Si vous modifiez votre image avec notre éditeur d'image intégré, celle-ci sera enregistrée au format .jpg et tout effet de transparence sera supprimé. Pour conserver le format .png, utilisez plutôt un logiciel tiers.

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 réactif 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 Image 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 du 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 méthode à suivre pour ajouter et personnaliser des images dépend de la version que votre site utilise. Consultez le tableau ci-dessous pour découvrir 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

Images mises en avant

Blocs Produit

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

Fichiers GIF animés

Texte sur les images

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 pouvoir rechercher ce texte et le garde visible si l’image est recadrée sur des appareils plus petits. Consultez nos astuces pour ajouter du texte superposé dans les blocs Image, les bannières, les pages Galerie et les 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.

Texte de remplacement

Lorsque vous créez vos images, respectez nos bonnes pratiques concernant le texte de remplacement. Il est important d’ajouter du texte de remplacement à vos images, car votre contenu est alors plus accessible aux visiteurs qui utilisent des lecteurs d’écran. Le texte de remplacement indique également aux moteurs de recherche le sujet de l’image, ce qui augmente les chances que votre site apparaisse dans les recherches d’images.

Si vous n’ajoutez pas de texte de remplacement à vos images, le nom du fichier sera utilisé comme texte de remplacement, sauf pour les blocs Image et les dispositions automatiques. Vous pouvez modifier le nom de fichier d’une image que vous avez déjà chargée dans la bibliothèque de ressources.

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

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

Pourquoi mes images sont-elles floues ?

Si les images apparaissent floues ou pixelisées, elles sont probablement trop étroites pour s’afficher correctement sur le web. Dans la plupart des zones de Squarespace, nous vous recommandons d’utiliser des images d’une largeur supérieure à 1 500 pixels. Cependant, certaines zones de contenu ont des exigences différentes :

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

Tout d’abord, consultez nos exigences relatives aux images. 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 120 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 :

Pourquoi la résolution de mon image varie-t-elle en fonction de sa taille ?

Lorsque vous redimensionnez des images sur votre site, au lieu de redimensionner l’image, qui conserve les mêmes dimensions en pixels, notre processeur d’image rééchantillonne les images. Cela signifie que lorsque la taille du conteneur d’image change, les pixels peuvent se mélanger, ce qui peut entraîner une perte de netteté des images. En chargeant des images conformes à nos exigences et bonnes pratiques, vous obtiendrez des images d’une clarté acceptable, quelle que soit leur taille, mais de légères différences sont à prévoir.

Images dans Acuity Scheduling

Lorsque vous importez des images dans Acuity, 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 Acuity, gardez à l’esprit les différences suivantes :

  • La taille des fichiers doit être inférieure à la taille limite des images de sites web.
  • Acuity redimensionne automatiquement les images de plus de 600 x 120 px lorsqu’elles sont importées dans le champ Logo de l’entreprise.
  • Acuity redimensionne automatiquement les images de plus de 600 x 600 px lorsqu’elles sont importées en tant qu’image pour un calendrier ou un type 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 :

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

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