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

Les pages et composants Web Parts modernes sont conçus pour être entièrement réactifs sur tous les appareils, ce qui signifie que les images utilisées dans les composants Web Parts changent de mise à l’échelle en fonction de l’endroit 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 s’améliorer sur les appareils mobiles, et la mise à l’échelle automatique des images vous permet de créer cette expérience attrayante.

Exemples de pages sur plusieurs appareils

Quelles tailles d’image sont les plus pratiques ?

En raison de la conception réactive de la page, il n’existe pas de hauteur ou de largeur spécifique en pixels qui garantit qu’une image conservera une forme spécifique sur tous les appareils et dispositions. Les images sont recadrées et rogisées automatiquement pour afficher le meilleur résultat possible sur un large éventail de dispositions et d’appareils. Toutefois, certaines instructions peuvent vous aider à vous assurer que vos images s’assurent de l’apparence de vos images 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: le type et le nombre de colonnes dans votre page

  • Mise en page del’élément Web Part : disposition que vous choisissez pour le partie web 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 la mesure de deux nombres, tels que 3:2, 4:3 ou 16:9. La largeur est toujours le premier nombre. Par exemple, une proportion de 16:9 pourrait faire 1 600 pixels de largeur et 900 pixels de hauteur. Vous pouvez également calculer 1920 x 1080, 1280 x 720 ou toute autre combinaison largeur/hauteur dont le calcul peut être égal à 16:9. Vous pouvez trouver des calculateurs 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 Web Parts modernes fonctionnent le mieux sur l’ensemble des dispositions et appareils lorsque les proportions sont 16:9 ou 4:3, selon la disposition.

Mises en page des colonnes

Une page peut être disposée avec des sections qui incluent différents types de colonnes et dispositions, par exemple des colonnes à pleine largeur, une colonne, deux colonnes, trois colonnes, une troisième colonne à gauche et une troisième colonne à droite. Une règle générale pour les images devant remplir la largeur d’une colonne est qu’elles ont au moins la même largeur que la colonne dans laquelle elles sont placées. Par exemple, dans une colonne, une image dans le partie Web D’une image doit avoir une largeur d’au moins 1 204 pixels. Voici les instructions de largeur pour chacun des mises en page de colonnes :

Mise en page

Largeur en pixels

Colonne à pleine largeur

1920

Une colonne

1204

Deux colonnes

586 par colonne

Trois colonnes

380 par colonne

Une troisième colonne de gauche

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

Une troisième colonne 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 à pleine largeur s’afficheront toujours en pleine largeur de l’écran avec une hauteur automatique en fonction de la taille de l’écran.

La hauteur des images placées dans d’autres mises en page de colonnes dépend de vos proportions. Voici des instructions de hauteur/largeur pour les proportions 16:9 et 4:3 (arrondies au pixel le plus proche en haut/en bas). Ceci est utile pour conserver vos images à une largeur et une hauteur adaptées aux appareils mobiles, par exemple.

PROPORTIONS

DISPOSITION

16 x 9

Width x Height in pixels

4 x 3

Width x Height in 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

Une 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

Une troisième colonne 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

Dispositions de part et d’autre du web

Les dispositions des composants Web Parts que vous utilisez affectent également l’échelle de vos images. Les exemples suivants montrent les différents composants Web Parts et leurs dispositions dans une colonne, ainsi que les proportions utilisées dans chacun d’eux.

Prenez en compte cette image qui présente des proportions d’origine de 16:9 :

Exemple d’image 16_9

Voici des exemples de cette image affichée dans une mise en page d’une colonne, dans différents composants Web Parts et dispositions.

Part Web Part Hero

Les proportions suivantes pour les dispositions de mosaïques et de calques sont les suivantes :

  • Vignettes : la hauteur du partie Web Part est réduite pour suivre les proportions 8:3, et les images à l’intérieur de l’échelle du pièce web par rapport à des proportions de 4:3.

  • Calques : un calque individuel s’a scale à des proportions de 8:3, et les images à l’intérieur de chaque échelle de couche par rapport à des proportions proches de 16:9.

  • Sur les appareils mobiles, un carrousel est utilisé à 16:9.

Voici un exemple d’image affichée dans la disposition Calques (haut) et Mosaïques (bas)

Exemple d’images de part et d’autre du site Web Part Hero dans les dispositions Calques et mosaïques

Partie web du contenu en surbrillant

16:9 est le rapport entre les dispositions Carrousel, Pellicule et Cartes.

Voici un exemple d’image affichée dans la disposition Pellicule (haut) et Cartes (bas).

Exemples d’images de la partie Web Part Contenu en surbrill

Image web part

Les images s’élargiront jusqu’à la largeur de la section contenant le partie web. Vous avez la possibilité de modifier les proportions ou le roglage libre à l’aide de la barre d’outils Image, ou d’utiliser les poignées de re taille pour agrandir ou agrandir votre image.

Voici un exemple montrant des repères de rog image (lignes bleues) à 4:3

Image montrant les repères de rognation à 4:3

Image Gallery Web Part

Les proportions suivantes sont utilisées dans différentes dispositions :

  • La mise en page en blocs respecte les proportions de toutes les images affichées : 16:9, 1:1, 4:3, etc. 

  • Mosaïques, cartes : 4:3

Voici un exemple d’image affichée dans la disposition Mosaïques (haut) et Blocs (bas)

Exemple de dispositions de mosaïques et de blocs pour le site Web Part Galerie d’images

Actualités -

Selon la disposition, les images dans le volet Actualités peuvent avoir la forme 4:3, 16:9 ou 21:9. Voici un exemple d’images dans une histoire haute avec une disposition de carrousel.

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

Zone de titre de la page

L’aspect des images est préférable lorsque les proportions sont au minimum 16:9 et qu’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 dans la 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 sur le haut-parleur.

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

Miniature de page

Des miniatures de page sont affichées dans des lieux tels que les résultats de recherche, les résultats de contenu mis en surbrillant, les billets d’actualités, etc. Par défaut, la miniature provient de la zone de titre de la page ou du partie web qui se trouve 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)

Example of page thumbnail image in Highlighted content web part

Quick Links Web Part 

Le volet Liens rapides présente six dispositions différentes. Voici les proportions recommandées :

  • Pellicule, Grille, Bouton : 16:9

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

Voici un exemple d’image affichée dans une disposition Compact (haut) et une disposition Pellicule (bas)

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

Conseils : 

  • Lorsque vous ajoutez une image à la zone de titre d’une page ou à un partie du site Web Hero, il est également préférable de définir le point focal dans la zone de l’image que vous souhaitez toujours afficher. Pour en savoir plus sur la définition d’un point focal pour ces deux scénarios, voir Modifier le point focal d’une image dans le partie web Hero et personnaliser la zone de titre d’une page.

  • Focal point

Recommandations pour les images d’en-tête de site

En plus des pages, vous souhaitez peut-être ajouter des logos ou images personnalisés dans une disposition étendue. Voici des recommandations en matière de taille pour ces éléments.

Élément

Description

Recommandation

Width x Height in pixels

Logo du site

Logo plus grand qui peut être non carré et transparent selon la conception téléchargée

192 x 64 

Format : PNG, JPEG, SVG (SVG non autorisé sur les sites connectés à des groupes)

Miniature du logo de site

Miniature carrée de logo utilisée si aucun logo de site n’est téléchargé ou aux emplacements où un format carré est requis

Cet élément est obligatoire.

64 x 64 

Format : PNG, JPEG, SVG (SVG non autorisé sur les sites connectés à des groupes)

Logo de site de mise en page étendu

La mise en page étendue de l’en-tête présente une largeur de logo de site étendue.

300 x 64p

Format : JPEG, PNG, SVG

Image d’arrière-plan de la 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 ?

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoindre Microsoft Insider

Ces informations vous ont-elles été utiles ?

Dans quelle mesure êtes-vous satisfait(e) de la qualité de la traduction ?

Qu’est-ce qui a affecté votre expérience ?

Avez-vous d’autres commentaires ? (Facultatif)

Nous vous remercions pour vos commentaires.

×