Squarespace élimine les conjectures liées au formatage de vos images pour l’affichage sur le web. Nous créons sept variations de chaque image téléchargée, pour assurer un affichage parfait sur n’importe quelle taille d’écran.

Nous avons quelques recommandations sur la façon de formater vos images avant de les télécharger. Pour de meilleurs résultats, suivez les suggestions ci-dessous.

astuce: visitez notre série vidéo All About Images pour plus de conseils et de tutoriels étape par étape sur l’ajout d’images sur votre site.,

Regarder une vidéo

Avant de commencer

Pour trouver la taille et les dimensions de votre image d’origine avant de le télécharger sur votre site:

• PC – clic Droit sur le fichier image et sélectionnez Propriétés.
• Mac-appuyez sur Option tout en cliquant sur le fichier image, puis sélectionnez Obtenir des informations.

Glossaire

Voici une partie de la terminologie que vous verrez dans ce guide.

• rapport D’Aspect – le rapport d’aspect d’une image est son rapport largeur / hauteur exprimé en nombre, comme 3:4., Le maintien d’un rapport d’aspect cohérent empêche les images de se déformer. Par exemple, si vous réduisez la largeur de l’image en demi, vous devez également réduire la hauteur de moitié.
• largeur de L’Image – dans ce guide, les tailles d’image se réfèrent au nombre de pixels le long de la largeur et de la hauteur de l’image. Votre image peut s’Afficher plus ou moins sur votre site en fonction de la taille de son conteneur. Pour en savoir plus, visitez redimensionnement d’une image.

que se passe-t-il après avoir téléchargé une image?

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

• 100 pixels
• 300 pixels
• 500 pixels
• 750 pixels
• 1000 pixels
• 1500 pixels
• 2500 pixels

La hauteur de changements par rapport à la largeur de préserver le format de l’image. La conception réactive intégrée de Squarespace sélectionne la taille d’image appropriée en fonction de l’écran du visiteur.

Remarque: Les Images téléchargées via les Styles de Site, telles que les images d’arrière-plan, s’affichent toujours à leur largeur d’image d’origine. Nous vous recommandons de charger ces images avec un maximum de 2500 pixels le long de leur bord le plus long., Pour plus de conseils, voir L’Image meilleures pratiques ci-dessous.

exigences relatives aux images

lors du téléchargement d’images sur votre site, suivez les instructions suivantes:

types de fichiers

enregistrer les images dans .jpg, .gif, ou .format png uniquement.

.PDF, .psd, .la fft, et .les fichiers doc ne sont pas compatibles avec le web.

astuce: vous pouvez créer des liens de téléchargement pour les fichiers non compatibles avec le web.

nom de fichier

n’utilisez que des lettres, des chiffres, des traits de soulignement et des tirets dans les noms de fichier., D’autres caractères (comme les lettres accentuées, les points d’interrogation, les signes de pourcentage et les esperluettes) peuvent être téléchargés de manière incorrecte ou provoquer un comportement inattendu dans les galeries.

résolution

Il y a une limite de résolution d’image de 60 MP (mégapixels).

astuce: pour trouver le MP d’une image, multipliez les dimensions et divisez par un million. Par exemple, une image avec des dimensions de 1500px x 1650px est de 2,475 MP.

Mode Couleur

enregistrer les images en mode couleur RVB. Le mode couleur CMJN est uniquement destiné aux documents imprimés et n’apparaît pas correctement dans la plupart des navigateurs., Si vous remarquez des variations avec vos images, vérifiez vos fichiers image pour vous assurer qu’ils sont en mode couleur RVB.

profil de Couleur

d’Enregistrer les images dans le profil colorimétrique sRGB. Si les images ne semblent pas correctes sur les appareils mobiles, c’est probablement parce qu’elles n’ont pas de profil couleur sRGB.

meilleures pratiques D’Image

Taille du fichier

Nous recommandons d’utiliser des fichiers image de moins de 500 Ko pour de meilleurs résultats, bien que la limite pour un téléchargement d’image individuel soit de 20 Mo. En ce qui concerne la taille de l’image, plus grand n’est pas toujours mieux, car le téléchargement de plusieurs grandes images peut affecter les performances du site., Si vous ajoutez plusieurs images à une page, gardez à l’esprit la taille globale de votre page.

largeur de L’Image

Les dimensions de l’image originale que vous téléchargez sur votre site peuvent avoir un impact important sur son affichage. Nous vous recommandons d’utiliser des images d’une largeur comprise entre 1500 et 2500 pixels.

• Les Images de moins de 1500 pixels peuvent apparaître floues ou pixélisées lorsqu’elles s’étirent pour remplir des conteneurs, tels que des bannières. Pour savoir comment redimensionner les bannières sur différents appareils et largeurs d’écran, visitez Responsive design.,
• Dans la plupart des cas, Squarespace reformatera de grandes images à une largeur maximale de 2500 pixels. Cependant, les images ajoutées via les Styles de Site (images d’arrière-plan et images de bannière à l’échelle du site) se chargent à leurs dimensions d’origine. Cela peut entraîner des problèmes de chargement de page si l’image est supérieure à 2500 pixels le long de son bord le plus long.

Vous pouvez utiliser un logiciel tiers pour réduire les dimensions d’une image. Nous ne recommandons pas d’agrandir une image plus petite, car cela peut la faire apparaître pixélisée. Au lieu de cela, commencez par une image d’au moins 1500 pixels de large., Vous pouvez également rechercher et ajouter des images stock de haute qualité directement à partir de votre site.

Astuce: Si vous rencontrez des problèmes de chargement, tels qu’une image d’arrière-plan ne se chargeant pas sur mobile, essayez de réduire le bord le plus long de toutes les images à 1500 pixels. C’est la combinaison la plus sûre de qualité d’image et de vitesse de chargement pour vos visiteurs.

recadrage D’Image

Les navigateurs chargent l’image complète pour les images recadrées par votre site, telles que celles recadrées avec la poignée de recadrage ou les réglages du rapport d’aspect des styles de site., Pour réduire la taille du fichier des grandes images, il est préférable de les recadrer manuellement à proximité de la taille prévue avec un logiciel tiers ou l’éditeur D’Image intégré.

texte de L’Image

dans la mesure du possible, nous vous recommandons d’ajouter du texte en superposition au lieu de l’inclure dans l’image. Cela rend le texte consultable et le maintient visible si l’image se recadre sur des appareils plus petits. Consultez nos conseils pour ajouter du texte de superposition à des blocs D’Image, des bannières, des Pages de Galerie et des blocs de Galerie.

Si votre image contient du texte, il est préférable de l’enregistrer en tant que .fichier png. Texte dans un .,le fichier jpg devient souvent flou lorsque l’image est compressée. Un .le fichier png conserve généralement sa netteté, surtout si l’image s’affiche à sa taille d’origine.

noms D’Image

le nom d’une image agit comme un texte alternatif s’il n’y a pas d’autre texte alternatif fourni. Il indique également aux moteurs de recherche de quoi parle l’image, ce qui rend plus probable que vous apparaissiez dans les recherches d’images.

lors de la création de vos images, gardez à l’esprit nos meilleures pratiques alt text.

astuce: pour changer le nom de fichier de la plupart des images, téléchargez à nouveau l’image avec le nouveau nom., Dans les blocs D’Image, vous pouvez modifier le champ Nom de fichier dans L’onglet Contenu.

rapport D’Aspect

Il permet de s’assurer que chaque image que vous utilisez a le même rapport d’aspect (Hauteur:Largeur) avant le téléchargement, car les images sont généralement recadrées en fonction de leur largeur et de leur hauteur. Si toutes vos images ont le même rapport d’aspect, il sera plus facile d’anticiper la façon dont elles seront recadrées. Pour en savoir plus, consultez la section comprendre les proportions.

Orientation

assurez-vous que votre image est dans le bon sens avant de le télécharger., Si votre image est enregistrée à l’envers, faites pivoter l’image avec un logiciel de retouche d’image avant de la charger sur votre site.

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

DPI et PPI

Si vous êtes préoccupé par la résolution de l’image, concentrez-vous sur les dimensions de l’image et gardez les tailles de fichier sous 500 Ko, plutôt que DPI (points par pouce) ou PPI (pixels par pouce). Le DPI et le PPI affectent la qualité d’impression d’une image, mais pas son affichage web.,

Taille de la Page

même si toutes vos photos sont inférieures à 500 Ko, Si vous avez un grand nombre d’images sur une page, cela peut entraîner des problèmes tels que des vitesses de chargement lentes. Vérifiez le contenu de votre page pour vous assurer que la taille de votre page est inférieure ou égale à 5 Mo.

Logos

consultez nos exigences en matière d’image avant d’ajouter un logo. Formatez l’image afin qu’elle soit similaire en hauteur à la façon dont vous voulez qu’elle s’affiche. Nous n’avons pas besoin d’une taille spécifique pour votre logo, mais il est préférable de commencer avec une image plus grande. Lorsque votre image est trop petite pour commencer, elle peut pixelliser lors du redimensionnement. Vous pouvez changer la taille après avoir téléchargé le logo.,

Si votre site est sur la version 7.0, comment vous redimensionnez un logo dépend de votre modèle.

Favicons

lorsque vous ajoutez un favicon à votre site, assurez-vous que l’image est enregistrée en tant que .ico ou .fichier png.

Les dimensions de fichier recommandées pour un favicon sont de 100px × 100px à 300px × 300px. Favicons s’affichera dans les navigateurs comme 16px × 16px.

Remarque: Internet Explorer ne peut pas s’afficher .PNG comme favicons.

animé .gif

d’Animation .les GIF sont une exception à notre règle des 1500-2500 pixels, en particulier .gifs dans les blocs D’Image., Un 1500 pixels de large .gif sera probablement très grand, ce qui pourrait ralentir votre site. Nous recommandons le formatage animé .gifs dans la taille que vous voulez qu’ils affichent sur votre site.

plus d’aide

• éditeur D’images intégré-visitez L’édition d’images sur votre site.
• images de Stock – avant d’ajouter une image de stock à votre site, passez en revue nos meilleures pratiques.
• écrans haute densité et rétine-visitez Responsive design.
• images de produits-visitez les types de pages de magasin.
• blocs D’images-visitez les blocs D’images.,
• sections de la galerie-visitez les sections de la galerie dans la version 7.1.
• blocs de Galerie – visitez les blocs de Galerie.
• pages de la galerie-visitez les Pages de la galerie.
• métadonnées D’Image-visitez importation de métadonnées d’image.