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 téléchargée, afin de garantir un affichage parfait sur des écrans de toutes tailles.

Nous avons quelques recommandations sur le formatage de vos images avant de les mettre en ligne. Pour obtenir les meilleurs résultats possibles, suivez les suggestions ci-dessous.

Astuce : consultez notre série Tout Savoir sur les Images pour des conseils supplémentaires et des tutoriels étape par étape sur l'ajout d'images sur l'ensemble de votre site.

Regarder une vidéo

Avant de commencer

Pour trouver la taille et les dimensions de votre image originale avant de la télécharger sur votre site :

  • PC - cliquez droit sur l'image et sélectionnez Propriétés
  • Mac - Appuyez sur Options tout en cliquant sur le fichier de l'image, puis sélectionnez Informations.

Glossaire

Voici certains des termes que vous verrez dans ce guide.

  • Rapport d'aspect - Le rapport d'aspect d'une image est le rapport entre sa largeur et sa hauteur exprimé sous forme chiffrée, comme 3/4. Conserver un rapport d'aspect homogène empêche les images de se déformer. Par exemple, si vous réduisez la largeur d'une image de moitié, vous devez également réduire sa hauteur de moitié.
  • Largeur de l'image - Dans ce guide, les tailles d'image correspondent au nombre de pixels le long de la largeur et de la hauteur de l'image. Votre image peut s'afficher de manière plus large ou plus petite sur votre site en fonction de la taille de son conteneur. Pour en savoir plus, rendez-vous sur Redimensionner une image.

Que se passe-t-il après le téléchargement d'une image ?

Lorsque vous téléchargez une image, Squarespace crée jusqu'à sept versions de cette image, chacune avec une largeur différente. Ces largeurs sont les suivantes :

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

La hauteur s'adapte aux changements de la largeur afin de préserver le rapport d'aspect de l'image. Le design adaptatif intégré de Squarespace sélectionne la taille d'image appropriée selon l'écran du visiteur.

Remarque : les images téléchargées via l'Éditeur de Style, comme les images d'arrière-plan, s'affichent toujours avec leur largeur d'image d'origine. Nous vous recommandons de charger ces images avec un maximum de 2 500 pixels le long de leur bordure la plus longue. Pour plus de conseils, consultez les recommandations relatives à l'utilisation d'images ci-dessous.

Exigences relatives aux images

Suivez ces recommandations quand vous mettez des images en ligne sur votre site :

Types de fichiers

Enregistrez des images au format .jpg, .gif, ou .png uniquement.

Les fichiers .pdf, .psd, .tff et .doc ne sont pas compatibles.

Conseil : vous pouvez créer des liens de téléchargement pour les fichiers non compatibles.

Nom de fichiers

Utilisez uniquement des lettres, des chiffres, des tirets baset des traits d'union dans les noms de fichiers. Tout autre caractère (comme un point d'interrogation, un signe de pourcentage ou une esperluette) peut se poser problème ou provoquer un comportement inattendu dans les galeries.

Taille de fichiers

Nous vous recommandons d'utiliser des Images de  moins de 500 Ko pour obtenir les meilleurs résultats, même si la taille des images téléchargées est limitée à 20 Mo. En matière de taille d'Image, le téléchargement de grandes Images n'est pas toujours la meilleure solution, parce que cela peut influer sur la performance du Site.

Résolution

Il existe une limite de résolution d'image de 60 MP (mégapixels).

Mode de couleur

Enregistrez des images en mode couleur RVB. Le mode impression (CMJN) ne s'affichera pas dans la plupart des navigateurs.

Profil de couleur

Enregistrez des images dans le 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.

Recommandations relatives aux images

Largeur des images

Les dimensions de l'image d'origine que vous téléchargez sur votre site peuvent avoir un impact important sur sa manière de s'afficher. Nous vous recommandons d'utiliser des images dont la largeur se situe entre 1 500 et 2 500 pixels.

  • Les images de moins de 1 500 pixels peuvent apparaître floues ou pixellisées lorsqu'elles sont étirées pour remplir certain conteneurs, comme des bannières.
  • Dans la plupart des cas, Squarespace reformatera les images de grande taille pour obtenir une largeur maximale de 2 500 pixels. Toutefois, le chargement des images ajoutées via l'Éditeur de Style (images d'arrière-plan et images de bannière de site) se fait dans leurs dimensions d'origine. Cela peut causer des problèmes de chargement de page si l'image comporte plus de 2 500 pixels le long de sa bordure la plus longue.

Vous pouvez réduire les dimensions d'une image dans l'Éditeur d'image Adobe Creative Cloud, ou utiliser un logiciel tiers. Nous recommandons de ne pas élargir une image plus petite, car cela peut la faire apparaître de manière pixellisée. Au lieu de cela, commencez avec une image d'une largeur d'au moins 1 500 pixels. Notre partenariat avec Getty Images peut vous aider à trouver des images de haute qualité.

Astuce : si vous remarquez des problèmes de chargement, comme une image d'arrière-plan ne chargeant pas sur mobile, essayez de réduire la bordure la plus longue de l'image à 1 500 pixels. Il s'agit de la combinaison la plus sûre de qualité d'image et de vitesse de chargement pour vos visiteurs.

Recadrage de l'image

Les éditeurs chargent l'image complète pour les images recadrées par votre site, telles que celles recadrées à l'aide de la poignée de recadrage ou des ajustements de ratio d'aspect de Style Editor. Pour réduire la taille des images volumineuses, il est conseillé de tout d'abord les recadrer de manière proche de leur taille souhaitée avec des logiciels tiers ou de l'éditeur d'image intégré Adobe Creative Cloud.

Texte lié à l'image

Nous vous conseillons le plus possible d'ajouter du texte en superposition plutôt que de l'inclure dans l'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, il est préférable de l'enregistrer 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.

Rapport d'aspect

Permet de vérifier que chaque image utilisée possède le même rapport d'aspect (hauteur/largeur) avant d'être mise en ligne. En effet, les images sont généralement recadrées en fonction de leur hauteur et de leur largeur. Si toutes vos images possèdent le même rapport d'aspect, il sera plus facile d'anticiper leur recadrage. Pour en savoir plus, rendez-vous à la section Comprendre le rapport d'aspect.

Orientation

Assurez-vous que votre image soit orientée dans le bon sens avant de la télécharger. Si votre image est enregistrée à l'envers, faites-la pivoter avec un logiciel d'édition d'images avant de la charger sur votre site. Pour consulter une liste de programmes d'édition d'images, rendez-vous sur Édition d'images pour votre site.

Si vous avez déjà ajouté l'image sur votre site, vous pouvez faire pivoter l'image à l'aide de l'Éditeur d'Image intégré Adobe Creative Cloud.

DPI

Si vous vous souciez de la résolution d'image, vous ne devez pas vous inquiéter à propos des DPI (Dots Per Inch, ou « points par pouce ») ou PPP (pixels par pouce), car aucun de ces indicateurs n'affecte la qualité de l'affichage sur le Web. Concentrez-vous plutôt sur l'utilisation de dimensions d'images adaptées à votre site et sur le maintien d'une taille de fichiers inférieure à 500 Ko.

Taille de la page

Même si vos photos pèsent moins de 500 Ko, s'il y a un grand nombre d'images sur une page, cela peut causer des problèmes, comme des vitesses de chargement lentes. Vérifiez le contenu de votre page pour vous assurer que la taille de votre page est de 5 Mo ou inférieure.

Logos

Lors de l'ajout d'un logo, téléchargez-le avec une hauteur similaire à celle que vous souhaitez afficher. Dans certains templates, vous pouvez régler la hauteur d'affichage à l'aide de l'ajustement Logo Image Height (Hauteur de l'Image d'un Logo) dans l'Éditeur de Style

Conseil : évitez la nécessité d'augmenter la taille de votre logo dans l'Éditeur de Style. Il est préférable de commencer par une grande image, puis d'en diminuer la taille après son ajout sur votre site.
Remarque : chaque template traite les logos différemment. Consultez nos guides dédiés aux templates pour découvrir le mode d'affichage du logo sur votre template.

Favicons

Lors de l'ajout d'une favicon sur votre site, assurez-vous que l'image soit enregistrée au format .ico ou .png.

Les dimensions de fichiers recommandées pour une favicon se situent entre 100px × 100px et 300px × 300px. Les favicons s'afficheront dans les navigateurs en adoptant la dimension 16px × 16px.

Remarque  : Internet Explorer ne peut pas afficher les fichiers PNG en tant que favicons.

Fichiers GIF animés

Les .gifs animés font figure d'exception à notre règle des 1 500 - 2 500 pixels, en particulier les .gifs dans les Blocs Images. Un .gif de 1 500 pixels de large sera certainement très lourd, ce qui pourrait potentiellement ralentir votre site. Nous vous recommandons de formater les .gifs animés à la taille à laquelle vous souhaitez les voir s'afficher sur votre site.

Liens utiles

Créer et éditer des images

Rendez-vous sur Éditer les images pour votre site afin d'accéder à des liens vers des logiciels d'édition d'image recommandés.

L'Éditeur d'Image intégré Adobe Creative Cloud

Pour en savir plus sur l'édition d'images sur votre site Squarespace, rendez-vous sur Édition d'images avec l'Éditeur d'Image Adobe Creative Cloud.

Affichage haute densité et Retina

Pour en savoir plus sur l'affichage d'images haute densité ou Retina, rendez-vous sur Comment mon site s'affichera-t-il sur les écrans Retina ?

Images de produits

Lors du téléchargement d'images de produits que vous vendez sur votre site, assurez-vous que le rapport d'aspect corresponde aux options de taille de produit que vous sélectionnez dans l'Éditeur de Style.

Pour en savoir plus, rendez-vous sur Stylisation de la Page Produits.

Blocs Image

Pour en savoir plus sur l'utilisation d'images dans les Blocs Image, rendez-vous sur Utilisation du Bloc Image.

Blocs Galerie

Pour en savoir plus sur l'affichage d'images dans les Blocs Galerie, rendez-vous sur Utilisation de Blocs Galerie.

Pages Galerie

Pour en savoir plus sur l'affichage d'images dans les Pages Galerie, rendez-vous sur Utilisation de la Page Galerie.

Remarque : pour obtenir de l'aide supplémentaire au sujet du formatage d'images pour votre site, nous vous recommandons de consulter Squarespace Answers, notre forum d'échanges entre clients et développeurs. Vous pouvez également envisager de consulter un Spécialiste Squarespace.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 308 sur 578
Formater vos images en vue d'un affichage sur le Web