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.
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.
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 :
Voici des exemples de cette image affichée dans une mise en page d’une colonne, dans différents composants Web Parts et dispositions.
|
Les proportions suivantes pour les dispositions de mosaïques et de calques sont les suivantes :
Voici un exemple d’image affichée dans la disposition Calques (haut) et Mosaïques (bas)
|
|
|
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).
|
|
|
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
|
|
|
Les proportions suivantes sont utilisées dans différentes dispositions :
Voici un exemple d’image affichée dans la disposition Mosaïques (haut) et Blocs (bas)
|
|
|
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.
|
|
|
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.
|
|
|
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)
|
|
|
Le volet Liens rapides présente six dispositions différentes. Voici les proportions recommandées :
Voici un exemple d’image affichée dans une disposition Compact (haut) et une disposition Pellicule (bas)
|
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.
-
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 |
