Dimensionnement et mise à l’échelle des images dans les pages modernes SharePoint
Applies ToSharePoint dans Microsoft 365

Les pages et composants WebPart modernes sont conçus pour être entièrement réactifs sur les appareils, ce qui signifie que les images utilisées dans les composants WebPart sont mises à l’échelle différemment en fonction de l’emplacement où elles sont affichées, de la disposition utilisée et de l’appareil sur lequel elles sont affichées. Par exemple, les pages modernes sont conçues pour être attrayantes sur les appareils mobiles, et la mise à l’échelle automatique des images permet de créer cette expérience attrayante.

Exemples de pages sur plusieurs appareils

Quelles sont les tailles d’image qui fonctionnent le mieux ?

En raison de la conception de page réactive, il n’existe pas de hauteur ou de largeur spécifique en pixels qui garantit qu’une image conserve une forme spécifique sur les appareils et les dispositions. Les images sont redimensionnées et rognées automatiquement pour afficher le meilleur résultat possible sur une variété d’appareils et de dispositions. Toutefois, certaines recommandations peuvent vous aider à vous assurer que vos images s’affichent bien sur vos pages.

La recherche des meilleures tailles d’image pour votre page dépend des facteurs suivants :

  • Proportions : relation entre la hauteur et la largeur des images

  • Disposition des colonnes : type et nombre de colonnes sur votre page

  • Disposition du composant WebPart : disposition que vous choisissez pour le composant WebPart dans lequel l’image est utilisée

Proportions

Un rapport d’aspect est la relation entre la largeur et la hauteur des images. Il est généralement exprimé sous la forme de deux nombres, tels que 3:2, 4:3 ou 16:9. La largeur est toujours le premier nombre. Par exemple, un rapport de 16:9 peut être de 1600 pixels de largeur par 900 pixels en hauteur. Il peut également s’agir de 1920 x 1080, 1280 x 720 ou de toute autre combinaison largeur/hauteur qui peut être calculée à 16:9. Vous pouvez trouver des calculatrices de proportions en ligne et dans certains outils de retouche photo pour vous aider à déterminer les proportions de vos images. 

Exemples de proportions 16:9 et 4:3.

Dans la plupart des cas, les images des composants WebPart modernes fonctionnent mieux sur les dispositions et les appareils lorsqu’elles ont des proportions de 16:9 ou 4:3, selon la disposition.

Dispositions de colonne

Une page peut être disposée avec des sections qui incluent différents types de colonnes et mises en page, telles que des colonnes pleine largeur, une colonne, deux colonnes, trois colonnes, un tiers à gauche et un tiers à droite. Une règle générale pour les images censées remplir la largeur d’une colonne est qu’elles sont au moins aussi larges que la colonne dans laquelle elles sont placées. Par exemple, une image d’un composant WebPart image dans une colonne doit avoir au moins 1204 pixels de large.

Voici les instructions de largeur pour chacune des dispositions de colonne :

Mise en page

Largeur en pixels

Colonne pleine largeur

1920

Une colonne

1204

Deux colonnes

586 par colonne

Trois colonnes

380 par colonne

Un tiers de la colonne de gauche

380 pour la colonne de gauche ; 792 pour la colonne de droite

Une colonne de droite d’un tiers

792 pour la colonne de gauche ; 380 pour la colonne de droite

En raison de la nature réactive des pages, les images dans des colonnes pleine largeur s’affichent toujours à pleine largeur de votre écran avec une hauteur automatique basée sur la taille de l’écran.

La hauteur des images placées dans d’autres dispositions de colonne dépend de vos proportions. Voici des recommandations de hauteur/largeur pour les proportions 16:9 et 4:3 (arrondies au pixel le plus proche). Cela est utile pour conserver vos images à une largeur et une hauteur qui sont mises à l’échelle de manière appropriée pour les appareils mobiles, par exemple :

PROPORTIONS

DISPOSITION

16 x 9

Largeur x Hauteur en pixels

4 x 3

Largeur x Hauteur en pixels

Une colonne

1204 x 677

1204 x 903

Deux colonnes

586 x 330

586 x 439

Trois colonnes

380 x 214

380 x 285

Un tiers de la colonne de gauche

380 x 446 pour la colonne de gauche ; 792 x 446 pour la colonne de droite

380 x 594 pour la colonne de gauche ; 792 x 594 pour la colonne de droite

Une colonne de droite d’un tiers

792 x 446 pour la colonne de gauche ; 380 x 446 pour la colonne de droite

792 x 594 pour la colonne de gauche ; 380 x 594 pour la colonne de droite

Dispositions de composants WebPart

Les dispositions des composants WebPart que vous utilisez affectent également la façon dont vos images sont mises à l’échelle. Les exemples suivants montrent différents composants WebPart et certaines des options et proportions que vous pouvez utiliser.

Composant WebPart Héros

Les proportions suivantes pour les dispositions Tiles et Layers sont les suivantes :

  • Vignettes : la hauteur du composant WebPart est mise à l’échelle pour suivre un rapport d’aspect de 8:3, et les images à l’intérieur du composant WebPart sont mises à l’échelle pour atteindre des proportions de 4:3.

  • Couches : une couche individuelle est mise à l’échelle à un rapport d’aspect de 8:3, et les images à l’intérieur de chaque couche sont mises à l’échelle à un rapport d’aspect proche de 16:9.

  • Sur les appareils mobiles, une disposition de carrousel est utilisée à 16:9.

Voici un exemple d’image affichée dans la disposition Calques (en haut) et la disposition Vignettes (en bas) :

Exemple d’images de composant WebPart Hero dans les dispositions Calques et Vignettes

Composant WebPart de contenu mis en surbrillance

16:9 correspond aux proportions des dispositions Carrousel, Filmtrip et Grid.

Voici un exemple de proportions 16:9. La première image montre la disposition Filmtrip, et la seconde montre la disposition Grid :

Composant WebPart Contenu mis en surbrillance à l’aide de la disposition Filmtrip.

Disposition de grille de contenu mis en surbrillance avec des photos développées affichées.

Composant WebPart Image

Les images s’étendent à la largeur de la section contenant le composant WebPart. 

Voici un exemple d’image dans le composant WebPart Image qui utilise les proportions 16:9.

Image dans le composant WebPart Image utilisant le rapport Carrousel 16:9.

Vous avez également la possibilité de modifier les proportions ou le rognage en main libre à l’aide de l’outil d’édition d’image ou d’utiliser les poignées de redimensionnement pour agrandir ou réduire votre image.

Photo ouverte dans l’outil d’édition SharePoint.

Composant WebPart Galerie d’images

Les proportions suivantes peuvent être utilisées dans différentes dispositions :

  • Les dispositions Brique et Carrousel respectent les proportions de toutes les images : 16:9, 1:1, 4:3, etc. 

  • La disposition Grid permet trois proportions : 1:1 carré, 16:9 de large et 4:3 standard.

La première image montre la disposition Brique dans lecomposant WebPart Galerie d’images (en conservant les proportions 16:9 et 1:1). La deuxième image montre la disposition Grid (en utilisant les proportions 1:1).

Composant WebPart Galerie d’images utilisant l’option de disposition en brique.

Composant WebPart Galerie d’images utilisant l’option de disposition de grille.

Composant WebPart Actualités

Selon la disposition, les images du composant WebPart Actualités peuvent être 4:3, 16:9 ou 21:9.

Voici un exemple d’images dans un Article principal et une disposition carrousel :

Exemples d’images de mises en page d’actualités

Zone de titre de page

Les images sont plus belles lorsqu’elles sont en mode paysage ou 16:9 ou plus dans les proportions, et lorsqu’elles ont une taille d’au moins 1 Mo. Veillez également à définir un point focal pour conserver la partie la plus importante de l’image en vue, en particulier lorsque l’image est utilisée dans des miniatures, des mises en page d’actualités et des résultats de recherche.

Exemple (image d’origine 16:9) avec le point focal défini sur le haut-parleur :

Exemple d’image 16:9 dans la zone de titre de page.

Miniature de page

Les miniatures de page sont affichées à des endroits tels que les résultats de recherche, les résultats de contenu mis en surbrillance, les billets d’actualités, etc. Par défaut, la miniature provient de la zone de titre de la page ou du composant WebPart dans le premier ordre de la page (par exemple, en haut à gauche d’une mise en page). Vous pouvez remplacer la valeur par défaut et modifier la miniature de la page. Dans ce cas, il est préférable d’utiliser une image avec des proportions de 16:9.

Exemple (image d’origine 16:9) :

Exemple d’image miniature de page dans le composant WebPart Contenu en surbrillance

Composant WebPart Liens rapides

Le composant WebPart Liens rapides a six dispositions différentes. Voici les proportions prédéfinies :

  • Compact, Liste, Vignettes : 1:1, 4:3

  • Filmtrip, Grid, Button : 16:9

La première image montre la disposition Compact dans lecomposant WebPart Liens rapides. La deuxième image montre le même composant WebPart Liens rapides utilisant la disposition Filmstrip.

Le composant WebPart Liens rapides montrant des images miniatures pour les liens.

Le composant WebPart Liens rapides montrant le ratio 16:9 pour les images.

Conseils : 

Recommandations relatives à l’image d’en-tête de site

En plus des pages, vous pouvez ajouter des logos ou des images personnalisés dans une disposition étendue. Voici des recommandations de taille pour ces éléments.

Élément

Description

Recommandation

Largeur x Hauteur en pixels

Logo du site

Logo plus grand qui peut être non carré et transparent en fonction de la conception chargée.

192 x 64 

Format : PNG, JPEG, SVG (SVG n’est pas autorisé sur les sites connectés à un groupe)

Miniature du logo du site

Miniature de logo carrée utilisée si aucun logo de site n’est chargé ou à des endroits où un format carré est requis.

Cet élément est obligatoire.

64 x 64 

Format : PNG, JPEG, SVG (SVG n’est pas autorisé sur les sites connectés à un groupe)

Logo du site de disposition étendue

La disposition d’en-tête étendue a une largeur de logo de site étendue.

300 x 64

Format : JPEG, PNG, SVG

Image d’arrière-plan de disposition étendue

Nouvelle image d’arrière-plan qui peut être utilisée avec l’en-tête étendu.

2560 x 164

Format : JPEG, PNG

Besoin d’aide ?

Vous voulez plus d’options ?

Explorez les avantages de l’abonnement, parcourez les cours de formation, découvrez comment sécuriser votre appareil, etc.

Les communautés vous permettent de poser des questions et d'y répondre, de donner vos commentaires et de bénéficier de l'avis d'experts aux connaissances approfondies.