Remarque : même si nos guides les plus populaires ont été traduits en espagnol, 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.

Note: Images uploaded via Site Styles, such as background images, always display at their original image width. We recommend loading these images with a maximum of 2500 pixels along their longest edge. For more tips, see Image best practices below.

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 limite pour une image est de 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).

Conseil : pour trouver la valeur en Mpx d'une image, multipliez ses dimensions, puis divisez le résultat par un million. Par exemple, une image mesurant 1500 px sur 1650 px fait 2,475 Mpx.

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.
  • In most cases, Squarespace will reformat large images to a maximum width of 2500 pixels. However, images added through Site Styles (background images and site-wide banner images) load at their original dimensions. This can cause page loading issues if the image is over 2500 pixels along its longest edge.

You can reduce an image's dimensions in the Adobe Creative Cloud Image Editor, or use third-party software. We don't recommend enlarging a smaller image, as this can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide. You can also search and add high-quality stock images directly from your site.

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

Browsers load the full image for images cropped by your site, such as those cropped with the cropping handle or Site Styles aspect ratio tweaks. To reduce the file size of large images, it's better to first crop them close to the intended size manually with third party software or the built-in Adobe Creative Cloud Image Editor.

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.

Image names

An image's name acts as alt text if there isn't any other alt text provided. It also tells search engines what the image is about, which makes it more likely that you'll show up in image searches.

When creating your images, use readable names that will make sense to people who use assistive screen readers or who've disabled images in their browser. For example, if your image name is IMG_0178.jpg, change it to something that describes the image, like blue-ceramic-glazed-planter.jpg.

Keep these tips in mind:

  • Be descriptive and helpful. How would you describe this image to someone who couldn't see it?
  • Separate each word with a hyphen or underscore.
  • Keep your image names short, typically eight words or fewer.
  • Incorporate keywords, without "keyword-stuffing."
  • You can omit words like "the" and "a," and terms like "photo" or "picture." For example, instead of a-picture-of-a-green-vase.jpg, use the name green-vase.jpg.
Tip: To change the filename for most images, re-upload the image with the new name. In Image Blocks, you can change the Filename field in the Content tab.

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

When adding a logo, upload it at a similar height to that which you'd like to display. In some templates, you can adjust the display height using the Logo Image Height tweak in Site Styles

Tip: Avoid having to increase the size of your logo in Site Styles. It's better to start with a large image and then decrease its size once it's uploaded to your 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.

Stock images

Before adding a stock image to your site, review our best practices.

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

When uploading images of products you sell on your site, ensure that the aspect ratio matches what you select for the product size options in Site Styles.

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 : 367 sur 681
Formater vos images en vue d'un affichage sur le Web