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.
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.
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.
|
Les proportions suivantes pour les dispositions Tiles et Layers sont les suivantes :
Voici un exemple d’image affichée dans la disposition Calques (en haut) et la disposition Vignettes (en bas) :
|
|
|
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 :
|
|
|
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.
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.
|
|
|
Les proportions suivantes peuvent être utilisées dans différentes dispositions :
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).
|
|
|
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 :
|
|
|
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 :
|
|
|
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) :
|
|
|
Le composant WebPart Liens rapides a six dispositions différentes. Voici les proportions prédéfinies :
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.
|
Conseils :
-
Lorsque vous ajoutez une image à une zone de titre de page ou à un composant WebPart 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 Utiliser le composant WebPart Hero et Créer et utiliser des pages modernes sur un site SharePoint.
-
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 |
