Les pages modernes et les composants WebPart sont conçus pour être entièrement réactifs sur tous 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 s’afficher parfaitement sur les appareils mobiles, et la mise à l’échelle automatique des images contribue à créer cette expérience attrayante.
Quelles tailles d’image fonctionnent le mieux ?
En raison de la conception réactive de la page, il n’y a pas de hauteur ou de largeur spécifique en pixels qui garantira qu’une image conservera une forme spécifique sur tous les appareils et 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 mises en page. Toutefois, il existe certaines directives qui peuvent vous aider à vous assurer que vos images s’affichent parfaitement sur vos pages.
Trouver les 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
Les proportions sont 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 en 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 pour être égale à 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.
Dans la plupart des cas, les images des composants WebPart modernes fonctionnent mieux entre les mises en page et les appareils lorsqu’elles ont un rapport hauteur/largeur de 16:9 ou 4:3, selon la mise en page.
Dispositions des colonnes
Une page peut être mise en page avec des sections qui incluent différents types de colonnes et dispositions, telles que des colonnes à pleine largeur, une colonne, deux colonnes, trois colonnes, un tiers à gauche et un tiers à droite. En règle générale, les images censées remplir la largeur d’une colonne sont au moins aussi larges que la colonne dans laquelle elles sont placées. Par exemple, une image d’un composant WebPart d’image dans une colonne doit avoir une largeur d’au moins 1 204 pixels.
Vous trouverez ci-dessous les instructions de largeur pour chacune des dispositions de colonne :
| Mise en page | Largeur en pixels |
|---|---|
| Colonne à pleine chasse | 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 |
| Un tiers de la colonne de 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’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 les instructions de hauteur/largeur pour les proportions 16:9 et 4:3 (arrondies au pixel près/inférieur). Cela est utile pour conserver vos images à une largeur et une hauteur adaptées aux appareils mobiles, par exemple :
| PROPORTIONS MISE EN PAGE |
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 |
| Un tiers de la colonne de 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 du composant WebPart
Les dispositions des composants WebPart que vous utilisez affecteront également la mise à l’échelle de vos images. Les exemples suivants montrent différents composants WebPart et certaines des options et proportions que vous pouvez utiliser.
| Composant WebPart | Proportions |
|---|---|
| Composant WebPart Hero | Les proportions suivantes pour les dispositions Vignettes et Couches sont les suivantes :
|
| Composant WebPart Contenu mis en évidence | 16:9 est le rapport d’aspect pour les dispositions Carrousel, Pellicule et Grille. Voici un exemple de proportions 16:9. La première image montre la disposition Films et la seconde montre la disposition Grille : 
|
| 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. 
Vous avez également la possibilité de modifier les proportions ou de recadrer à main levée à l’aide de l’outil d’édition d’image ou d’utiliser les poignées de redimensionnement pour agrandir ou réduire votre image. 
|
| Composant WebPart Bibliothèque d’images | Les proportions suivantes peuvent être utilisées dans différentes mises en page :
|
| Composant WebPart Actualités | Selon la disposition, les images du composant WebPart Actualités peuvent être au format 4:3, 16:9 ou 21:9. Voici un exemple d’images dans un article à la une et une disposition Carrousel : 
|
| Zone de titre de la page | Les images s’affichent mieux lorsqu’elles sont en mode paysage ou au format 16:9 ou plus, et lorsqu’elles ont une taille d’au moins 1 Mo. Veillez également à définir un point focal pour garder 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 originale 16:9) avec un point focal sur le haut-parleur : 
|
| Miniature de page | Les miniatures de page s’affichent à 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 qui se trouve dans le premier ordre sur 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 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) : 
|
| Composant WebPart Liens rapides | Le composant WebPart Liens rapides comporte six mises en page différentes. Voici les proportions prédéfinies :
|
Conseil
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 d’images d’en-tête de site
En plus des pages, vous pouvez ajouter des logos ou des images personnalisés dans une mise en page é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 du design téléchargé. | 192 x 64 Format : PNG, JPEG, SVG (SVG n’est pas autorisé sur les sites connectés à des groupes) |
| Miniature du logo du site | Une miniature de logo carrée qui est utilisée si aucun logo de site n’est chargé ou aux 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 à des groupes) |
| Logo du site à disposition étendue | La disposition d’en-tête étendu a une largeur étendue du logo du site. | 300 x 64 Format : JPEG, PNG, SVG |
| Image d’arrière-plan de disposition étendue | Nouvelle image d’arrière-plan pouvant être utilisée avec l’en-tête étendu. | 2560 x 164 Format : JPEG, PNG |