Tailles des images pour un site internet

De Microfly.info.

(Différences entre les versions)
m (→Image portrait)
m (→Mini galerie photos)
 
(23 versions intermédiaires masquées)
Ligne 1 : Ligne 1 :
[[Catégorie:Documentation site internet]][[Catégorie:Documentation images]][[Catégorie:Site internet]]
[[Catégorie:Documentation site internet]][[Catégorie:Documentation images]][[Catégorie:Site internet]]
== Avant de commencer ==
== Avant de commencer ==
-
Les information présentées ci-après sont adaptées au [[templates standards des sites internet]] proposés par microfly.info. Pour des designs personnalisé ou l'utilisation dans un autre contexte, les dimension devront peut-être être corrigées.
+
Les informations présentées ci-après sont adaptées aux [[templates standards des sites internet]] proposés par microfly.info. Pour des designs personnalisés ou l'utilisation dans un autre contexte, les dimensions devront peut-être être adaptées.
-
{{Information|Information !|Pour discuter de la taille des images, vous pouvez utiliser [http://support.microfly.info/manipulation-images/ les forums de support]}}
+
Les formats et dimensions sont basés sur un rapport largeur/hauteur de photo standard : 2/3 (équivalent 24/36 en photo argentique). Cependant, certains appareils photo numérique produisant des images au rapport largeur/hauteur 3/4, les dimensions pour ces rapports seront aussi indiquées.
-
== Page d'accueil ==
+
Les formats donnés sont ceux à appliquer lors de la préparation des images ''avant'' de les transférer et de les utiliser sur le site; ces dimensions correspondent à la taille maximale des images qui seront affichées sur le site. Ces dimensions tiennent aussi compte du temps de chargement par les navigateurs. Les paramètres TYPO3 sont les réglages à appliquer lors de l'utilisation des images dans les pages du site. 
 +
 
 +
 
 +
{{Information|Information !|
 +
* Consultez aussi les pages [[préparer des images pour les publier sur un site internet]] et [[TYPO3, Les contenus Image]].
 +
* Pour discuter de la taille des images, vous pouvez utiliser [http://support.microfly.info/manipulation-images/ les forums de support].}}
 +
 
 +
== Formats des images à uploader ==
{| class="wikitable" border="1" cellspacing="0" width="800px"
{| class="wikitable" border="1" cellspacing="0" width="800px"
|-  
|-  
-
!| Composition !!| Format images  !!| Paramètres TYPO3  !! Remarques
+
!| Orientation !!| Format images  !! remarques
|-
|-
-
|| Une seule image ||
+
! colspan="3" | Format 2/3
-
* Largeur: {{WIDTH|1024px}}
+
|-
-
* Hauteur: {{HEIGHT|683px}}
+
| Paysage ||
-
* Résolution: {{RESOL|72dpi}}
+
{| class="cleantable"
-
* Format: {{FIMG|.jpg/80}}
+
|-
-
||
+
| Largeur: || {{WIDTH|1024px}}
-
* Width: {{INP|620px}}
+
|-
-
* Heigt: {{INP|(ne rien mettre)}}
+
| Hauteur: || {{HEIGHT|683px}}
-
* Position and Alignment: {{SEL|Above, center}}
+
|-
-
* Number of Columns: {{SEL|1}}
+
| Résolution: || {{RESOL|72dpi}}
 +
|-
 +
| Format: || {{FIMG|.jpg/80}}
 +
|}
||  
||  
|-
|-
-
|| Deux images portrait ||
+
| Portait ||
-
* Largeur: {{WIDTH|455px}}
+
{| class="cleantable"
-
* Hauteur: {{HEIGHT|683px}}
+
|-
-
* Résolution: {{RESOL|72dpi}}
+
| Largeur: || {{WIDTH|455px}}
-
* Format: {{FIMG|.jpg/80}}
+
|-
-
||  
+
| Hauteur: || {{HEIGHT|683px}}
-
* Width: {{INP|305px}}
+
|-
-
* Heigt: {{INP|(ne rien mettre)}}
+
| Résolution: || {{RESOL|72dpi}}
-
* Position and Alignment: {{SEL|Above, center}}
+
|-
-
* Number of Columns: {{SEL|2}}
+
| Format: || {{FIMG|.jpg/80}}
 +
|}
 +
||
 +
|-
 +
! colspan="3" | Format 3/4
 +
|-
 +
| Paysage ||
 +
{| class="cleantable"
 +
|-
 +
| Largeur: || {{WIDTH|1024px}}
 +
|-
 +
| Hauteur: || {{HEIGHT|768px}}
 +
|-
 +
| Résolution: || {{RESOL|72dpi}}
 +
|-
 +
| Format: || {{FIMG|.jpg/80}}
 +
|}
||  
||  
|-
|-
-
|| Quatre images paysage ||
+
| Portait ||
-
* Largeur: {{WIDTH|1024px}}
+
{| class="cleantable"
-
* Hauteur: {{HEIGHT|683px}}
+
|-
-
* Résolution: {{RESOL|72dpi}}
+
| Largeur: || {{WIDTH|576px}}
-
* Format: {{FIMG|.jpg/80}}
+
|-
-
||
+
| Hauteur: || {{HEIGHT|768px}}
-
* Width: {{INP|305px}}
+
|-
-
* Heigt: {{INP|(ne rien mettre)}}
+
| Résolution: || {{RESOL|72dpi}}
-
* Position and Alignment: {{SEL|Above, center}}
+
|-
-
* Number of Columns: {{SEL|2}}
+
| Format: || {{FIMG|.jpg/80}}
 +
|}
||  
||  
|}
|}
-
== Image paysage ==
+
== Page d'accueil ==
-
* 1024 x 683
+
{| class="wikitable" border="1" cellspacing="0" width="800px"
 +
|-
 +
!| Composition !! width="300px" | Paramètres TYPO3 !! Remarques
 +
|-
 +
|| [[Image:TYPO3-FE-accueil-001.png|128px]] ||
 +
{| class="cleantable"
 +
|-
 +
| Width: || {{INP|620px}}
 +
|-
 +
| Heigt: || {{INP|(ne rien mettre)}}
 +
|-
 +
| Position and Alignment: || {{SEL|Above, center}}
 +
|-
 +
| Number of Columns: || {{SEL|1}}
 +
|}
 +
|| Une image au format paysage  
 +
|-
 +
|| [[Image:TYPO3-FE-accueil-002.png|128px]] ||
 +
{| class="cleantable"
 +
|-
 +
| Width: || {{INP|305px}}
 +
|-
 +
| Heigt: || {{INP|(ne rien mettre)}}
 +
|-
 +
| Position and Alignment: || {{SEL|Above, center}}
 +
|-
 +
| Number of Columns: || {{SEL|2}}
 +
|}
 +
|| Deux images au format portrait
 +
|-
 +
|| [[Image:TYPO3-FE-accueil-003.png|128px]] ||
 +
{| class="cleantable"
 +
|-
 +
| Width: || {{INP|305px}}
 +
|-
 +
| Heigt: || {{INP|(ne rien mettre)}}
 +
|-
 +
| Position and Alignment: || {{SEL|Above, center}}
 +
|-
 +
| Number of Columns: || {{SEL|2}}
 +
|}
 +
|| Quatre images au format paysage
 +
|}
-
== Image portrait ==
+
== Images habillées par du texte ==
 +
=== Image paysage ===
 +
{| class="wikitable" border="1" cellspacing="0" width="800px"
 +
|-
 +
!| Composition !! width="300px" | Paramètres TYPO3 !! Remarques
 +
|-
 +
|| [[Image:TYPO3-FE-normalLeft-001.png|128px]] ||
 +
{| class="cleantable"
 +
|-
 +
| Width: || {{INP|305px}}
 +
|-
 +
| Heigt: || {{INP|(ne rien mettre)}}
 +
|-
 +
| Position and Alignment: || {{SEL|In text, Left}}
 +
|-
 +
| Number of Columns: || {{SEL|1}}
 +
|}
 +
|| Une image au format paysage habillée par le texte. (Contenu de type : Text & Images)
 +
|-
 +
|| [[Image:TYPO3-FE-normalLeft-002.png|128px]] ||
 +
{| class="cleantable"
 +
|-
 +
| Width: || {{INP|305px}}
 +
|-
 +
| Heigt: || {{INP|(ne rien mettre)}}
 +
|-
 +
| Position and Alignment: || {{SEL|Beside text, Left}}
 +
|-
 +
| Number of Columns: || {{SEL|1}}
 +
|}
 +
|| Une image au format paysage à gauche du texte. (Contenu de type : Text & Images)
 +
|-
 +
|| [[Image:TYPO3-FE-normalLeft-003.png|128px]] ||
 +
{| class="cleantable"
 +
|-
 +
| Width: || {{INP|305px}}
 +
|-
 +
| Heigt: || {{INP|(ne rien mettre)}}
 +
|-
 +
| Position and Alignment: || {{SEL|In text, Right}}
 +
|-
 +
| Number of Columns: || {{SEL|1}}
 +
|}
 +
|| Une image au format paysage habillée par le texte. (Contenu de type : Text & Images)
 +
|-
 +
|| [[Image:TYPO3-FE-normalLeft-004.png|128px]] ||
 +
{| class="cleantable"
 +
|-
 +
| Width: || {{INP|305px}}
 +
|-
 +
| Heigt: || {{INP|(ne rien mettre)}}
 +
|-
 +
| Position and Alignment: || {{SEL|Beside text, right}}
 +
|-
 +
| Number of Columns: || {{SEL|1}}
 +
|}
 +
|| Une image au format paysage à droite du texte. (Contenu de type : Text & Images)
 +
|}
 +
 
 +
=== Image portrait ===
* 683 x 455
* 683 x 455
-
{{Astuce|Astuce !|Quelques pistes pour trouver un [[logiciels d'édition d'images]].}}
+
=== Autres compositions ===
 +
 
 +
{{Astuce|Astuce !|Quelques pistes pour trouver des [[logiciels d'édition d'images]].}}
 +
 
 +
== Mini galerie photos ==
 +
=== Galerie ===
 +
 
 +
=== Page d'accueil des galeries ===
 +
 
 +
{{Retour|Formation rédacteurs TYPO3 |Retourner au plan de la formation rédacteur TYPO3}}

Version actuelle en date du 21 août 2011 à 12:37

Sommaire

Avant de commencer

Les informations présentées ci-après sont adaptées aux templates standards des sites internet proposés par microfly.info. Pour des designs personnalisés ou l'utilisation dans un autre contexte, les dimensions devront peut-être être adaptées.

Les formats et dimensions sont basés sur un rapport largeur/hauteur de photo standard : 2/3 (équivalent 24/36 en photo argentique). Cependant, certains appareils photo numérique produisant des images au rapport largeur/hauteur 3/4, les dimensions pour ces rapports seront aussi indiquées.

Les formats donnés sont ceux à appliquer lors de la préparation des images avant de les transférer et de les utiliser sur le site; ces dimensions correspondent à la taille maximale des images qui seront affichées sur le site. Ces dimensions tiennent aussi compte du temps de chargement par les navigateurs. Les paramètres TYPO3 sont les réglages à appliquer lors de l'utilisation des images dans les pages du site.


Icon-information-32x32.png



Formats des images à uploader

Orientation Format images remarques
Format 2/3
Paysage
Largeur: Largeur 1024px
Hauteur: Hauteur 683px
Résolution: Résolution d'image 72dpi
Format: Format d'enregistrement d'image .jpg/80
Portait
Largeur: Largeur 455px
Hauteur: Hauteur 683px
Résolution: Résolution d'image 72dpi
Format: Format d'enregistrement d'image .jpg/80
Format 3/4
Paysage
Largeur: Largeur 1024px
Hauteur: Hauteur 768px
Résolution: Résolution d'image 72dpi
Format: Format d'enregistrement d'image .jpg/80
Portait
Largeur: Largeur 576px
Hauteur: Hauteur 768px
Résolution: Résolution d'image 72dpi
Format: Format d'enregistrement d'image .jpg/80

Page d'accueil

Composition Paramètres TYPO3 Remarques
TYPO3-FE-accueil-001.png
Width: Champs de saisie de donnée 620px
Heigt: Champs de saisie de donnée (ne rien mettre)
Position and Alignment: Menu déroulant Above, center
Number of Columns: Menu déroulant 1
Une image au format paysage
TYPO3-FE-accueil-002.png
Width: Champs de saisie de donnée 305px
Heigt: Champs de saisie de donnée (ne rien mettre)
Position and Alignment: Menu déroulant Above, center
Number of Columns: Menu déroulant 2
Deux images au format portrait
TYPO3-FE-accueil-003.png
Width: Champs de saisie de donnée 305px
Heigt: Champs de saisie de donnée (ne rien mettre)
Position and Alignment: Menu déroulant Above, center
Number of Columns: Menu déroulant 2
Quatre images au format paysage

Images habillées par du texte

Image paysage

Composition Paramètres TYPO3 Remarques
TYPO3-FE-normalLeft-001.png
Width: Champs de saisie de donnée 305px
Heigt: Champs de saisie de donnée (ne rien mettre)
Position and Alignment: Menu déroulant In text, Left
Number of Columns: Menu déroulant 1
Une image au format paysage habillée par le texte. (Contenu de type : Text & Images)
TYPO3-FE-normalLeft-002.png
Width: Champs de saisie de donnée 305px
Heigt: Champs de saisie de donnée (ne rien mettre)
Position and Alignment: Menu déroulant Beside text, Left
Number of Columns: Menu déroulant 1
Une image au format paysage à gauche du texte. (Contenu de type : Text & Images)
TYPO3-FE-normalLeft-003.png
Width: Champs de saisie de donnée 305px
Heigt: Champs de saisie de donnée (ne rien mettre)
Position and Alignment: Menu déroulant In text, Right
Number of Columns: Menu déroulant 1
Une image au format paysage habillée par le texte. (Contenu de type : Text & Images)
TYPO3-FE-normalLeft-004.png
Width: Champs de saisie de donnée 305px
Heigt: Champs de saisie de donnée (ne rien mettre)
Position and Alignment: Menu déroulant Beside text, right
Number of Columns: Menu déroulant 1
Une image au format paysage à droite du texte. (Contenu de type : Text & Images)

Image portrait

  • 683 x 455

Autres compositions

Icon-astuce-32x32.png Quelques pistes pour trouver des logiciels d'édition d'images.



Mini galerie photos

Galerie

Page d'accueil des galeries

Retourner à la page : Formation rédacteurs TYPO3
Récupérée de « http://docs.microfly.info/index.php/Tailles_des_images_pour_un_site_internet »