Guide Visuels 3 : Explication des spécificités techniques
otto GLOBAL
Écrit par
Andrew
publié le
28.10.2022
2
min

Otto offre de nombreuses possibilités d'animation grâce à ses différents blocs et templates de pages. Ces derniers nécessitent la création de visuels sous différents formats. Ce guide regroupe l'ensemble des formats d'image qui sont utilisés dans Otto, et sert de cahier des charges dans la création graphique pour votre service.

Dans cette dernière partie du guide, on va regarder de près les différentes spécificités techniques pour chaque format d'image. Mais avant de donner ces dernières, il y a un dernier point à comprendre.

Pour chaque format, il n'est pas aussi simple que de donner une seule résolution à créer. Il y a les tailles minimales requises par Otto. En revanche, si votre service est distribué via d'autres canaux, par exemple Amazon Prime qui demande des tailles d'images supérieures à celles d'Otto, vous gagnerez du temps à utiliser les plus grandes tailles pour exporter vos créations. L'outil Otto est équipé d'un script qui prend ce plus grand format - ou format pivot - et le décline pour l'affichage à travers votre service. 

Pour chaque format d'image, il y a donc 4 spécificités techniques :

  1. La taille d'image recommandée : La taille maximale en pixels (largeur x hauteur) qui permet la meilleure qualité d'image à travers tous les environnements. Il s'agit du format pivot. Cette taille est commune entre toutes les déclinaisons d'un même format (ex. Poster & Poster XL, Vignette & Vignette XL).
  2. La taille d'image minimale : La taille en pixels (largeur x hauteur) dont le format s'affiche sur le Front-Office d'un service. 
  3. Le ratio d'image : La relation entre la largeur et la hauteur d’une image. Vous pouvez utiliser ce ratio afin de créer un visuel à n'importe quelle taille conviendra au format en question.
  4. Le poids d'image maximal : Le poids d'un fichier à télécharger dans Otto ne peut pas dépasser les 2Mo. Ce plafond est le même pour chaque image du service.

Pour mieux comprendre ces différentes spécificités techniques, vous pouvez vous référer à la première partie de ce guide

Chaque format de visuel sera illustré par des exemples. Le ratio du format sera indiqué en bleu. Parfois, un format d'image peut changer à travers les différents environnements, dans l'objectif de fournir la meilleure expérience visuelle possible. Lorsque le ratio change, une nouvelle couleur marquera chaque ratio différent.

Poster & Poster XL

Au sein d'Otto, les formats Poster et Poster XL ont le même ratio, simplement de tailles différentes. Il est donc possible d'utiliser 1 même fichier image pour les deux formats. 

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Tous
1200 x 1600
446 x 621
0,75 (3:4)
2Mo

Vignette & Vignette XL

Au sein d'Otto, les formats Vignette et Vignette XL ont le même ratio, simplement de tailles différentes. Il est donc possible d'utiliser 1 même fichier image pour les deux formats.

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Tous
1920 x 1080
827 x 465
1,77 (16:9)
2Mo

Bannière

Le format Bannière s'étend de bord à bord du navigateur. Il apparaît par exemple en haut de la page catalogue, ou encore des pages de sélection & pages métadonnées lorsque le visuel est rattaché à ces derniers. 

*Attention, pour optimiser l'affichage sur des petits écrans, le ratio de ce visuel change pour l'environnement Mobile.

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Desktop, Tablette, TV
1840 x 300
1840 x 300
6,1
2Mo
Mobile
892 x 246
892 x 246
3,6
2Mo

Demi-bandeau

Le format Demi-bandeau s'affiche selon les grilles des rangées. Le ratio du Demi-bandeau est commun à travers les différents environnements, et équivaut au ratio de la déclinaison Mobile du format Bannière.

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Tous
892 x 246
892 x 246
3,6
2Mo

Rond

Le format Rond s'affiche selon les grilles des rangées.

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Tous
225 x 225
225 x 225
1
2Mo

Carrousel & Vidéo

Le format Carrousel est un format particulier car il y existe plusieurs ratios possibles. Vous avez le choix entre 3 hauteurs dans le back-office. Les ratios sont les mêmes pour le bloc Vidéo. Il est donc nécessaire de décider de la hauteur des carrousels sur votre service avant de commencer à faire les visuels.

* Attention, pour optimiser l'affichage sur des petits écrans, le ratio de ce visuel change pour l'environnement Mobile. Il n'y a pas de choix de hauteur pour le Mobile, il s'agit d'un ratio unique.

*  Attention, pour optimiser l'affichage sur les téléviseurs, le ratio change pour chacune des 3 hauteurs.

Environnement
Taille
Recommandée
Taille Minimale
Ratio
Poids Max
Destkop, Tablette
Grand
1920 x 1080
1280 x 720
1,77 (16:9)
2Mo
Moyen
1920 x 801
1280 x 534
2,4
2Mo
Petit
1920 x 600
1280 x 400
3,2
2Mo
Mobile
720 x 640
720 x 640
1,19
2Mo
TV
Grand
1920 x 704
1920 x 704
2,7
2Mo
Moyen
1920 x 524
1920 x 524
3,6
2Mo
Petit
1920 x 392
1920 x 392
4,8
2Mo

Plein-écran

Le bloc plein-écran est un bloc spécifique de la page de présentation du service. Il peut contenir le logo, plusieurs niveaux de texte, et des boutons, avec un visuel en fond. L'affichage de ce visuel de fond varie en fonction de la taille de la fenêtre du navigateur car ce bloc doit toujours occuper 100% de l'écran.

Pour préparer ce visuel, utilisez un format paysage sur le Desktop - ratio 1,77 (16:9). Attention, son ratio s'adapte sur l'environnement mobile. Préparez donc un format portrait pour le mobile - ratio 0,56 (9:16).

Le bloc plein-écran a une spécificité : le ratio du visuel est conservé mais lorsqu'on tire les bords du navigateur, l'image est rognée. Visualisez plutôt cette animation pour comprendre.

Il est donc conseillé de NE PAS écrire du texte à même le visuel, mais d'utiliser plutôt les champs de texte au sein de l'outil. De cette façon, la disposition du texte s'adaptera en fonction de la taille du navigateur.

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Desktop, Tablette, TV
1920 x 1080
1920 x 1080
1,77 (16:9)
2Mo
Mobile
1080 x 1920
1080 x 1920
0,56 (9:16)
2Mo

VISUELS MARKETING

Vignette Offre Tarifaire

Ce format apparaît sur la page de présentation de votre service pour illustrer les cartes offre. Son ratio est le même que pour la Vignette et la Vignette XL.

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Tous
1920 x 1080
1920 x 1080
1,77 (16:9)
2Mo

Argument

Le bloc Arguments, bloc spécifique à la Page de présentation, utilise également un format rond.

Environnement
Recommandée
Taille Minimale
Ratio
Poids Max
Tous
225 x 225
225 x 225
1
2Mo
RETOUR à la home
Un terme n'est pas clair pour vous ?
J'explore le Lexique Otto