Exigences et bonnes pratiques pour le chargement des images.

Squarespace facilite le formatage de vos images pour pouvoir les afficher sur le web. Nous créons sept versions de chaque image chargée afin de garantir un affichage optimal 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. Pour les étapes de résolution des problèmes, consultez l’article Résoudre les problèmes de chargement et de formatage des images.

Après avoir chargé des images sur votre site, conservez tous les fichiers image sur votre ordinateur afin de réduire le risque de perdre les fichiers d’origine.

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 relatives aux images pour vous assurer que vous pouvez importer des images sur votre site. Par défaut, toutes les images chargées sur votre site sont converties au format WebP.
• 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. Les images ajoutées aux galeries s’affichent généralement mieux si elles ont toutes une forme similaire. Pour en savoir plus, consultez l’article 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 minimiser le recadrage, assurez-vous que la forme de votre image correspond à la forme du conteneur. Pour en savoir plus, 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 relatives aux images

Avant de charger des images sur votre site, assurez-vous qu’elles respectent nos exigences en matière d’images. Vous ne pouvez pas changer le fichier image lui-même une fois le chargement terminé, mais vous pouvez modifier son apparence à l’aide de notre éditeur d’image intégré. Pour modifier les attributs de l’image, formatez-la sur votre ordinateur, puis chargez-la de nouveau.

Attribut d’image	Caractéristiques techniques	Note
Type de fichier	Seuls les fichiers .jpg, .gif, .png ou .webp	Les fichiers .pdf, .psd et .doc ne sont pas compatibles.
Taille de fichiers	Limite de 20 Mo	Pour accélérer le chargement de votre site, nous vous recommandons de charger des images de 500 Ko ou moins.
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 pour la plupart des images.	Si vous chargez des images d’une largeur de 2 500 pixels, vous avez 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 de plus petite largeur afin de limiter la résolution maximale qui s’affichera sur votre site. Cela peut vous permettre de réduire le temps de chargement du site sur certains appareils ou de limiter la qualité des images que les visiteurs peuvent télécharger, mais les images de moins de 1 500 pixels de large peuvent apparaître 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.

Ces exigences et recommandations contribuent à garantir que vos images s’affichent correctement sur votre site. Si votre site contient de nombreuses images de grande taille et que vous remarquez qu’il se charge lentement, consultez l’article Réduire la taille de votre page pour accélérer son chargement.

Conseil : 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.

Format de fichier WebP

Pour optimiser les performances de votre site Squarespace, toutes les images sont automatiquement affichées au format WebP. Le format d’image WebP améliore le temps de chargement tout en préservant la qualité. Par rapport aux fichiers .jpg et .png de qualité similaire, les fichiers WebP sont plus petits, ce qui est utile pour afficher de nombreuses images. 

Lorsque vous chargez une image sur Squarespace, nous la convertissons au format WebP et nous affichons cette version dans le contenu de votre site. Le fichier d’origine reste dans votre bibliothèque de ressources et toutes les modifications apportées au fichier seront appliquées à toutes les versions WebP de votre site. Vous pouvez également charger des fichiers WebP directement sur votre site.

Si vous ne voulez pas que vos images soient converties en fichiers WebP, vous pouvez désactiver ce paramètre :

1. Ouvrez le panneau Performances du site.
2. Cliquez pour désactiver l’option Format d’image WebP.

Toutes les images de votre site reprendront leur format d’origine dans les 24 heures.

Trouver des informations sur une image

Pour déterminer si votre image répond à nos exigences, consultez les informations du fichier image.

Mac

Pour trouver les informations d’un fichier 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 trouver les informations d’un fichier 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.

Arrière-plans transparents

Si vous avez besoin d’une image sans arrière-plan ni couleur d’arrière-plan (pour un logo, par exemple), utilisez un fichier .png avec un arrière-plan transparent. Pour cela, vous pouvez utiliser un logiciel tiers ou 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, modifiez l’image à l’aide d’un logiciel tiers.

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.

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

Pour afficher un aperçu de l’apparence de votre site sur les appareils mobiles, utilisez la vue par appareil.

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 :

• Assurez-vous de respecter nos exigences relatives aux images
• Personnalisez vos images
• Résolvez les problèmes de formatage de vos images

Aide supplémentaire

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

• Série de vidéos : Tout savoir sur les images
• Ajouter et redimensionner des images
• Résoudre les problèmes de chargement et de formatage des images
• Ajouter un logo à votre site
• Modifier des images sur votre site
• Améliorer l’accessibilité des images, de l’audio et des vidéos
• Rechercher et ajouter des images d’archive
• Bonnes pratiques relatives aux images d’archive
• Importer des métadonnées d’images

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

• Obtenez des conseils de la communauté sur Squarespace Forum.
• Trouvez un Squarespace Expert pour vous aider.