Préparer des images pour les publier sur un site internet

De Microfly.info.


TO DO: Compléter et séparer en plusieurs pages !

Sommaire

Contexte

bla bla sur les images (http://fr.wikipedia.org/wiki/Image_num%C3%A9rique) + Tailles des images pour un site internet

bla bla sur les formats de fichiers (http://fr.wikipedia.org/wiki/JPEG)

Icon-astuce-32x32.png Les manipulations à effectuer sont destructives, c'est à dire que l'image après traitement contiendra moins d'informations et il ne sera pas possible de revenir en arrière, il donc est conseillé de conserver un original aux dimensions et formats initiaux.



Outils à utiliser

L'objectif étant de mettre les images à des dimensions optimales pour la publication sur un site internet, nous aurons principalement besoin de deux outils, soit utilisés individuellement, soit combinés : redimensionner et recadrer. Le cas échéant un troisième outil pourrait être utile : la rotation.

Redimensionner

Le redimensionnement d'une image est en réalité une mise à l'échelle : le redimensionnement permet de conserver le cadrage tout en réduisant les dimensions et le poids de l'image.

Icon-alert-32x32.png Il faut toujours redimensionner en réduisant les dimensions, tenter d'augmenter la taille donnera une image de mauvaise qualité.



Recadrer

Le recadrage permet de découper l'image et de n'en conserver qu'une partie. Il permet aussi de changer le format (orientation de l'image) : il est tout à fait envisageable de recadrer une image au format paysage vers le format portrait par exemple.

Icon-alert-32x32.png il faut toujours recadrer en conservant des dimensions finales suffisantes, sinon l'image sera trop petite ou de mauvaise qualité.



Rotation

Exemples

Pour les exemples suivants, nous considérons que les caractéristiques des images finales seront (pour d'autres proportions voir formats des images) :

Format paysage Format Portrait
Largeur: Largeur 1024px
Hauteur: Hauteur 683px
Résolution: Résolution d'image 72dpi
Format: Format d'enregistrement d'image .jpg/80
Largeur: Largeur 683px
Hauteur: Hauteur 455px
Résolution: Résolution d'image 72dpi
Format: Format d'enregistrement d'image .jpg/80

Redimensionner uniquement

Situation 1

Une image à haute résolution (chargée d'un appareil photo par exemple), ayant la bonne orientation (portrait ou paysage) et les bonnes proportions (2/3).

L'image à traiter est au format paysage, la méthode est identique pour une image portrait, (chargée depuis un appareil photo) Fichier:Exemple.jpg

Largeur 1024px X Hauteur 683px @ Résolution d'image 72dpi Format d'enregistrement d'image .jpg/80
Avec l'outil en ligne picnik

Redimensionner l'image, en conservant les proportions, aux dimensions définitives.

  • ouvrir la page picnik dans une nouvelle fenêtre,
  • puis cliquer sur le bouton Bouton Upload a photo,
Picnik-001.png
  • dans l'onglet Onglet Edit, cliquer sur le bouton Bouton Resize,
Picnik-002.png
  • saisir la largeur désirée (New dimensions) Champs de saisie de donnée 1024,
  • la hauteur s'adapte automatiquement à Champs de saisie de donnée 683 grâce à la case à cocher Case à cocher Keep Proportions,
  • cliquer ensuite sur le bouton Bouton OK,
Picnik-003.png
  • dans l'onglet Onglet Save & Share :
  • saisir une nouveau nom de fichier (/!\ ne pas écraser l'original),
  • choisir le format Menu déroulant JPG (Best for most photos),
  • vérifier que "JPG Compression Quality" est à Menu déroulant 8,
  • cliquer ensuite sur le bouton Bouton Save Photo,
  • choisir le dossier d'enregistrement sur l'ordinateur local et cliquer sur le bouton Bouton Save,
Picnik-004.png
  • cliquer sur le bouton Bouton Close photo pour terminer.
Picnik-005.png
Avec le logiciel libre GIMP

Recadrer uniquement

Situation 1

Une image ayant la bonne orientation (portrait ou paysage). Le contenu visuel final correspondant exactement aux dimensions finales. Une exemple concret serait un original au format 4/3 par exemple.

Méthode 1

Situation 2

Une image dont nous voulons changer l'orientation (paysage vers portrait par exemple). Le contenu visuel final correspondant exactement aux dimensions finales. Un exemple concret serait un original au format paysage ayant pour hauteur la dimension de l'image au format portrait désirée.

Méthode 2

Redimensionner puis recadrer

Recadrer puis redimensionner

Icon-information-32x32.png


Retourner à la page : Formation rédacteurs TYPO3