La plupart des types de contenus (actualités, articles, documents, petites annonces, ...) possède une illustration qui pourra être utilisée à différents endroits dans le site.
La dimension des images dépend du composant graphique dans lequel elles sont utilisées.
L'illustration pourra être amenée à être recadrée (rognée) afin de remplir au mieux le cadre dans lequel elle est affichée.
Si besoin, les images sont toujours rognées en prenant le centre de l'image comme point d’intérêt. Les images seront zoomés ou dézoomer avant recadrage afin de perdre le moins d'information possible.
Exemple d'algorithme pour le recadrage des images
|
L'image originale est plus large que le cadre |
|
|
L'image originale est plus haute que le cadre |
|
Dimensions des images en fonction de la taille de l'écran
Carrousel des actualités en page d'accueil
|
|
Écran FullHD 1920x1080px |
Écran HD 1280x720 px |
Écran mobile 360x800px |
|---|---|---|---|
|
L x H (px) |
962 x 367 |
610 x 367 |
348 x 172 |
|
Ratio |
962:367 / 2.65 |
610:367 / 1.66 |
87:43 / 2.02 |
|
Ex. |
|
|
|
Illustration principale en page intérieure, gabarit "Pleine page"
|
|
Écran FullHD 1920x1080px |
Écran HD 1280x720 px |
Écran mobile 360x800px |
|---|---|---|---|
|
L x H (px) |
1413x396 |
870x244 |
308x100 |
|
Ratio |
157:44/ 3.6 |
435:122 / 3.6 |
77:25 / 3.08 |
|
Ex. |
|
|
|
Illustration principale en page intérieure, gabarit "Page 2 colonnes"
|
|
Écran FullHD 1920x1080px |
Écran HD 1280x720 px |
Écran mobile 360x800px |
|---|---|---|---|
|
L x H (px) |
932x457 |
570x280 |
308x151 |
|
Ratio |
932:457 / 2.03 |
57:28 / 2.03 |
308:151 / 2.04 |
|
Ex. |
|
|
|
Résultats de la recherche
|
|
Écran FullHD 1920x1080px |
Écran HD 1280x720 px |
Écran mobile 360x800px |
|---|---|---|---|
|
L x H (px) |
288x164 |
288x164 |
288x164 |
|
Ratio |
72:41 / 1.75 |
72:41 / 1.75 |
72:41 / 1.75 |
|
Ex. |
|
|
|
Petites annonces en page d'accueil
|
|
Écran FullHD 1920x1080px |
Écran HD 1280x720 px |
Écran mobile 360x800px |
|---|---|---|---|
|
L x H (px) |
129x88 |
129x88 |
129x88 |
|
Ratio |
129:88 / 1.46 |
129:88 / 1.46 |
129:88 / 1.46 |
|
Ex. |
|
|
|
Retour en haut