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.

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 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, les campagnes e-mail et les .gifs animés.
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.

N’oubliez pas qu’en fonction de la taille de l’image, télécharger votre fichier image original depuis 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.

Vérifier vos fichiers images

Pour savoir si votre image répond à nos spécifications, 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 :

• Assurez-vous de respecter nos exigences en matière d'images
• Personnalisez vos images
• Résolvez les problèmes de formatage de vos images

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 :

Texte et noms de fichiers d’images

Texte de remplacement et noms de fichiers d’images

Si aucun autre texte de remplacement n’est renseigné, le nom de fichier d’une image est utilisé comme texte de remplacement. Le texte de remplacement indique également aux moteurs de recherche le contenu de l’image, ce qui augmente les chances que votre site apparaisse dans les recherches d’images. Les blocs Image ne comportent qu’une seule source de texte de remplacement. 

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.

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 :

• Modifier le style du bloc, de la section ou de la page où vous avez ajouté des images.
• Suivre les étapes de l’article Résoudre les problèmes de recadrage.
• Utilisez le point focal pour centrer des images.
• Utiliser notre éditeur d’image intégré pour apporter des modifications telles que le recadrage et la valeur de proportion.
• Redimensionner, recadrer ou modifier l’image d’origine sur votre appareil, avant d’importer à nouveau votre image.

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

Tout d’abord, consultez nos exigences en matière d’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 :

• Découvrez comment les images des bannières et des arrière-plans de section s’affichent sur les appareils mobiles
• Découvrez comment personnaliser vos bannières

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 :

• Série de vidéos : Tout savoir sur les images
• Ajouter et redimensionner 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.