Dimensionnement et mise à l’échelle d’images dans les pages modernes de SharePoint

Dimensionnement et mise à l’échelle d’images dans les pages modernes de SharePoint

Les pages et les composants WebPart modernes sont conçus pour répondre à tous les appareils, ce qui signifie que les images utilisées dans les composants WebPart seront mises à l’échelle différemment selon l’endroit où elles sont affichées, la disposition utilisée et l’appareil sur lequel elles sont affichées. Par exemple, les pages modernes sont conçues pour s’améliorer sur les appareils mobiles, et la mise à l’échelle automatique des images vous permet de créer une interface attrayante.

Exemples de pages sur plusieurs appareils

Quelles sont les tailles d’image les plus adaptées ?

En raison de la conception de page réactive, il n’existe pas de hauteur et de largeur spécifiques en pixels permettant de garantir qu’une image conservera une forme spécifique sur les appareils et les mises en page. Les images sont redimensionnées et rognées automatiquement pour montrer 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’importent correctement dans 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 d’images

  • Mise en page des colonnes: type et nombre de colonnes sur votre page

  • Disposition du composantWebPart : la mise en page que vous choisissez pour le composant WebPart dans lequel l’image est utilisée

Rapport hauteur/largeur

Les proportions sont la relation entre la largeur et la hauteur des images. Elle est généralement exprimée sous la forme de deux nombres, par exemple 3:2, 4:3 ou 16:9. La largeur correspond toujours au premier nombre. Par exemple, un rapport de 16:9 peut être de 1600 pixels en largeur de 900 pixels en hauteur. Il peut également s’agir de 1920 x 1080, 1280 x 720 ou de toute autre combinaison de largeur/hauteur qui peut être calculée sur la valeur 16:9. Vous pouvez rechercher des proportions en ligne et des 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 dans les composants WebPart modernes fonctionnent mieux sur les mises en page et les appareils lorsqu’elles présentent des proportions de 16:9 ou 4:3, en fonction de la disposition.

Dispositions de colonnes

Une page peut être disposée avec des sections qui incluent différentes dispositions et types de colonnes, telles que des colonnes à pleine chasse, une colonne, deux colonnes, trois colonnes, une de troisième gauche et une troisième. Une règle générale pour les images attendues pour 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 dans un composant WebPart d’image dans une colonne doit avoir une largeur d’au moins 1204 pixels. Vous trouverez ci-après les recommandations en matière de largeur pour chaque disposition de colonne :

Disposition

Largeur en pixels

Colonne à pleine chasse

1920

Une colonne

1204

Deux colonnes

586 par colonne

Trois colonnes

380 par colonne

Troisième colonne de gauche

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

Colonne de la troisième droite

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

En raison de la nature réactive des pages, les images dans les colonnes de pleine chasse s’afficheront toujours en pleine chasse 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 colonnes dépend de vos proportions. Vous trouverez ci-dessous des recommandations en matière de hauteur/largeur pour les proportions 16:9 et 4:3 (arrondies au pixel le plus proche). Cela vous permet de conserver vos images à une largeur et une hauteur adaptées aux appareils mobiles, par exemple.

PROPORTIONS

16 x 9

4 x 3

Une colonne

1204 x 677

1204 x 903

Deux colonnes

586 x 330

586 x 439

Trois colonnes

380 x 214

380 x 285

Troisième 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

Colonne de la troisième droite

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

Mises en page des composants WebPart

Les mises en page des composants WebPart, que vous utilisez, affectent également la façon dont vos images sont mises à l’échelle. Les exemples suivants illustrent différents composants WebPart et leurs dispositions au sein d’une même colonne et les proportions qui sont utilisées dans chaque colonne.

Prenons l’image suivante qui comporte des proportions d’origine de 16:9 :

Exemple d’image de 16_9

Vous trouverez ci-dessous des exemples d’image dans une mise en page à une seule colonne, dans différents composants WebPart et dispositions.

Composant WebPart héros

Les proportions suivantes pour les vignettes et les mises en page des couches sont les suivantes :

  • Vignettes : la hauteur du composant WebPart est mise à l’échelle pour suivre les proportions de 8:3, et les images dans le composant WebPart sont mises à l’échelle pour atteindre les proportions d' 4:3.

  • Calques : une couche individuelle est diajustée aux proportions de 8:3, et les images à l’échelle de chaque calque ont un rapport hauteur proche de 16:9.

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

Voici un exemple d’image illustrée dans la disposition couches (haut) et vignettes (en bas)

Exemple d’images de composants WebPart héros en dispositions de calques et de vignettes

Composant WebPart contenu en surbrillance

16:9 est le rapport hauteur-largeur des mises en page de carrousel, de pellicule et de cartes.

Voici un exemple d’image illustrée dans la disposition de la carte de film (haut) et la disposition cartes (en bas).

Exemples d’image de composant WebPart contenu en surbrillance

Composant WebPart image

Les images s’étendent à la largeur de la section qui contient le composant WebPart. Vous avez la possibilité de modifier les proportions ou le rognage libre à l’aide de la barre d’outils image ou d’utiliser les poignées de redimensionnement pour agrandir ou réduire la taille de l’image.

Voici un exemple illustrant les repères de rognage d’image (traits bleus) à 4:3

Image illustrant les repères de rognage sur 4:3

Composant WebPart bibliothèque d’images

Les rapports d’aspect suivants sont utilisés dans différentes dispositions :

  • La disposition briques respecte les proportions de toutes les images affichées : 16:9, 1:1, 4:3, etc. 

  • Vignettes, cartes : 4:3

Voici un exemple d’image illustrée dans la disposition vignettes (haut) et briques (en bas)

Exemples de dispositions de vignettes et de briques pour le composant WebPart bibliothèque d’images

Composant WebPart Actualités -

Selon la disposition, les images dans le composant WebPart Actualités peuvent être 4:3, 16:9 ou 21:9. Voici un exemple d’images dans un article supérieur et une disposition de carrousel.

Exemples d’image de dispositions d’actualité

Zone de titre de la page

Les images sont de meilleure qualité s’il s’agit d’un format paysage ou 16:9 ou d’une taille supérieure, et de la taille d’au moins 1 Mo. Veillez également à définir un point focal sur la partie conserver la partie la plus importante de l’image dans l’affichage, en particulier lorsque l’image est utilisée dans des miniatures, des dispositions d’actualités et des résultats de recherche.

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

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

Miniature de page

Les miniatures de page sont affichées dans des emplacements tels que des résultats de recherche, des résultats de contenu en surbrillance, des billets d’actualité, etc. Par défaut, la miniature provient de la zone de titre de la page ou du composant WebPart dans la première commande de la page (par exemple, dans le coin supérieur gauche d’une mise en page). Vous pouvez remplacer la valeur par défaut et changer la miniature de la page. Lorsque vous procédez ainsi, il est préférable d’utiliser une image avec des proportions 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 comporte six mises en page différentes. Voici des proportions recommandées :

  • Filmstrip, grille, bouton : 16:9

  • Compact, liste, vignettes : 1:1, 4:3

Voici un exemple d’image affichée dans une disposition compacte (haut) et une présentation de type pellicule (en bas)

Exemples d’images dans les mises en page de liens rapides

Conseils : 

Remarque :  Cette page a été traduite automatiquement et peut donc contenir des erreurs grammaticales ou des imprécisions. Notre objectif est de faire en sorte que ce contenu vous soit utile. Pouvez vous nous dire si les informations vous ont été utiles ? Voici l’article en anglais pour référence.

Développez vos compétences dans Office
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×