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 chargées à partir du panneau Styles du site (comme les images d’arrière-plan) s’affichent toujours avec leur largeur d’image d’origine. Nous vous conseillons de charger ces images avec un maximum de 2 500 pixels pour le bord le plus long. Pour plus de conseils, consultez ci-dessous les recommandations concernant les images.

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.

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

Taille de fichiers

Pour un résultat optimal, la taille recommandée des fichiers d'image est inférieure à 500 Ko, bien que la limite prévue pour le chargement de chaque image soit de 20 Mo. Une taille d'image supérieure n'est pas toujours préférable, le chargement d'images volumineuses pouvant affecter les performances du site. Si vous ajoutez plusieurs images à une page, prenez également en compte la taille globale de votre page.

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 redimensionne les images de grande taille pour qu’elles ne dépassent pas 2 500 pixels de largeur. Toutefois, le chargement des images que vous ajoutez à partir du panneau Styles du site (images d’arrière-plan et images de bannière de site) s’effectue avec les dimensions d’origine. Ceci peut engendrer des problèmes de chargement de page si l’image comporte plus de 2 500 pixels pour le bord le plus long.

Vous pouvez utiliser des logiciels tiers pour réduire les dimensions d’une image. Nous vous déconseillons d’agrandir une image, car elle pourrait apparaître pixelisée. Nous vous recommandons de commencer avec une image d’au moins 1 500 pixels de large. Vous pouvez également rechercher et ajouter des images d’archive de haute qualité directement à partir de votre 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

Les images recadrées par votre site à l’aide de la poignée de recadrage ou des ajustements de la valeur de proportion dans les Styles du site sont chargées sur le navigateur en format intégral. Pour réduire la taille des images volumineuses, il est conseillé de les recadrer manuellement jusqu'à obtention de la taille souhaitée, en utilisant un logiciel tiers ou l’éditeur d’image intégré.

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.

Nom des images

Le nom des images sert de texte de remplacement si aucun autre texte de remplacement n’est fourni. Ce nom indique également aux moteurs de recherche le contenu de l’image, ce qui augmente vos chances d’apparaître dans les recherches d’images. 

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 téléchargeant de nouveau l‘image avec un nouveau nom. Dans les blocs Image, vous pouvez modifier le champ Nom de fichier dans l’onglet Contenu.

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

Vérifiez l’orientation de votre image avant de la télécharger. Si votre image est enregistrée à l’envers, faites-la pivoter avec un logiciel de retouche d’image avant de la télécharger sur votre site. 

Si vous avez déjà ajouté l’image sur votre site, vous pouvez la faire pivoter à l’aide de l’Éditeur d’image intégré.

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

Lorsque vous ajoutez un logo, chargez-le avec une hauteur similaire à la hauteur souhaitée.

Dans certains modèles, vous pouvez modifier la hauteur. Dans ce cas, il est préférable de commencer par une grande image, puis d’en diminuer la taille après l’avoir chargée 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

Remarque : pour obtenir une aide plus approfondie concernant le formatage des images sur votre site, nous vous invitons à consulter Squarespace Answers, notre forum d'échange entre clients et développeurs. Vous pouvez également consulter un expert Squarespace.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 441 sur 800
Formater vos images en vue d'un affichage sur le Web