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 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 leur chargement. Pour obtenir les meilleurs résultats possibles, suivez les suggestions ci-dessous.

Astuce : regardez nos vidéos Tout savoir sur les images pour obtenir des conseils supplémentaires ainsi que des tutoriels sur l’ajout d’images dans votre site.

Regarder une vidéo

Avant de commencer

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

  • PC - Faites un clic 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.

  • Valeur de proportion - La valeur de proportion d’une image correspond au rapport entre sa largeur et sa hauteur exprimé sous forme chiffrée, comme 3:4. Une valeur de proportion constante empêche que les images ne soient déformées. 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, consultez l’article Redimensionner une image.

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

Lorsque vous 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 chargez des images sur votre site :

Élément 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 500 Ko ou moins pour obtenir de meilleurs résultats.
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 ne peuvent pas être téléchargés et peuvent provoquer des problèmes inattendus.
Résolution d'image Limite de 60 Mpx (mégapixels) 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,47 Mpx.
Mode de couleur RVB (rouge, vert, bleu) Le mode couleur CMJN est réservé aux documents imprimés et n’apparaîtra pas correctement dans la plupart des navigateurs.
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, nous vous recommandons d’utiliser des fichiers image dont la taille est inférieure à 500 Ko (notez cependant que la limite prévue pour le chargement de chaque image est de 20 Mo). Une taille d’image plus importante n’est pas toujours préférable, le chargement de plusieurs images volumineuses pouvant affecter les performances du site. Si vous ajoutez plusieurs images à une page, prenez en compte la taille globale de votre page.

Largeur des images

Les dimensions de l'image d'origine que vous 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 pixelisées lorsqu’elles sont étirées pour remplir certains conteneurs, comme des bannières. Pour savoir comment les bannières s’adaptent aux différents appareils et aux différentes largeurs d’écran, consultez l’article Design adaptatif.
  • 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, que ce soit à 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 d’une image 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 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 la même valeur de proportion (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 la même valeur de proportion, il sera plus facile d’anticiper leur recadrage. Pour en savoir plus, consultez l’article Comprendre les valeurs de proportion.

Orientation

Vérifiez l’orientation de votre image avant de la charger. 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 sur votre site, vous pouvez la faire pivoter à l’aide de l’Éditeur d’image intégré.

DPI et PPI

Si la résolution des images vous préoccupe, concentrez-vous sur les dimensions de votre image et assurez-vous que celle-ci ne dépasse pas les 500 Ko. Les unités DPI (Dots Per Inch, ou « points par pouce ») et PPI (Pixels Per Inch, ou « pixels par pouce ») affectent la qualité d’impression d’une image, mais pas la qualité de l’affichage sur le web. Vous pouvez donc les ignorer.

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

Consultez nos exigences en matière d’image avant d’ajouter un logo. Formatez l’image de sorte que sa hauteur corresponde à vos attentes en termes d’affichage. Votre logo n’a pas besoin de respecter une taille spécifique, mais nous vous conseillons d’opter pour une image de grande taille. En effet, si votre image est trop petite, elle peut devenir floue lors du redimensionnement. Vous pouvez modifier la taille du logo après l’avoir chargé.

Si votre site utilise la version 7.0, la façon dont vous redimensionnez un logo dépend de 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 100 px × 100 px et 300 px × 300 px. Les favicons s’afficheront dans les navigateurs en adoptant la dimension 16 px × 16 px.

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

Fichiers GIF animés

Les fichiers gif animés font figure d’exception à notre règle des 1 500 - 2 500 pixels, en particulier les fichiers gif dans les blocs Image. Un fichier 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 fichiers gif animés à la taille à laquelle vous souhaitez les voir s’afficher sur votre site.

Aide supplémentaire

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

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 692 sur 1192
Formater vos images en vue d'un affichage sur le Web