14/05/2013
Gilles Le Page - @lepagegilles
Dia 1
Redimensionner/Optimiser une photo
Tutoriel
14/05/2013 Dia 2
Les photos numériques originales
• Une photo numérique originale est souvent
« lourde »
– Les appareils actuels enregistrent couramment des
photos larges de 3600 pixels
– Cela correspond à une page papier de 1m de large !!!
– Ces images « pèsent » lourd en Méga-octets
Gilles Le Page - @lepagegilles
14/05/2013 Dia 3
Les photos sur le web
• Affichage sur un écran
– l’écran d’un PC portable moyen mesure seulement 1024 pixels,
– une photo affichée dans un site mesure la plupart du temps
moins de 400 pixels de large…
• Il est utile de les redimensionner
• Les photos à la sortie de l’appareil photo sont
disproportionnées pour le web :
• en poids,
• en taille
• en finesse de détail pour une utilisation sur un site web
Gilles Le Page - @lepagegilles
14/05/2013 Dia 4
Un exemple de photo originale
La même image, à
l’échelle 5%
(divisée par 20 !)
Taille réelle (détail)
• Cette photo :
– mesure 2736 pixels de large sur 3648 pixels de haut
– « pèse » 5,4 Méga-octets
Gilles Le Page - @lepagegilles
14/05/2013 Dia 5
Redimensionner ? Optimiser ?
• Redimensionner
– On dit aussi « retailler » (dans le sens « modifier la taille)
– Il s’agit de modifier largeur et longueur de la photo sans toucher à son
contenu : on en garde les proportions, les couleurs, la définition…
• Optimiser
– Il s’agit de retraiter la photo pour que la précision des détails soit adaptée à
l’affichage web, mais pas plus : en clair, en limiter le poids tant que possible
sans perdre de qualité apparente
– Cette opération est effectuée par des outils logiciels : pratiquement tous les
logiciels de retouche d’image en sont capables.
– L’image est retraitée de façon à ce que les nuances de couleur soient moins
nombreuses et que la résolution soit diminuée : en affichage web, personne
ne s’en apercevra.
Gilles Le Page - @lepagegilles
14/05/2013 Dia 6
Redimensionner ? Optimiser ?
• Exemple
Non retaillée, non optimisée :
•Largeur 717 pixels
•Poids 477 ko
Retaillée, optimisée :
•Largeur 200 pixels
•Poids 8 ko
La qualité
reste très
acceptable
Gilles Le Page - @lepagegilles
14/05/2013 Dia 7
Un outil très simple et gratuit
Adresse : http://www.rw-designer.com/picture-resize
Gilles Le Page - @lepagegilles
14/05/2013 Dia 8
Télécharger l’outil - 1
Adresse : http://www.rw-designer.com/picture-resize
Cliquer sur le lien
Gilles Le Page - @lepagegilles
14/05/2013 Dia 9
Cliquer sur « Enregistrer
le fichier »
Télécharger l’outil - 2
Une boite de
dialogue
s’affiche
Gilles Le Page - @lepagegilles
14/05/2013 Dia 10
Choisissez d’enregistrer
sur le « bureau »
Télécharger l’outil - 3
Une boite
de
dialogue
s’affiche
Gilles Le Page - @lepagegilles
14/05/2013 Dia 11
Le logiciel est
maintenant sur le
« bureau »
Télécharger l’outil - 4
Gilles Le Page - @lepagegilles
14/05/2013 Dia 12
1 - Ouvrez un répertoire contenant une
photo à optimiser
Tester l’outil - 1
2 - organisez ce répertoire sur le
bureau de façon à accéder
facilement à « PhotoResizer400 »
Gilles Le Page - @lepagegilles
14/05/2013 Dia 13
Tester l’outil - 2
Faire glisser et poser le fichier
image (drag & drop) sur l’icône
du logiciel du bureau
Gilles Le Page - @lepagegilles
14/05/2013 Dia 14
Appuyer sur la touche « Entrée »,
Comme demandé
Une boite de
dialogue
s’ouvre
Tester l’outil - 3
Gilles Le Page - @lepagegilles
14/05/2013 Dia 15
Dans le répertoire d’origine, un
nouveau fichier image est apparu :
bouteille_orig-400.jpg
Tester l’outil - 5
Gilles Le Page - @lepagegilles
14/05/2013 Dia 16
L’image d’origine s’appelait : bouteille_orig.jpg
Tester l’outil - 6
L’image optimisée s’appelle : bouteille_orig-400.jpg
Elle mesurait 717 x 1011
Elle pesait 477 ko
Elle mesure 283 x 400
Elle pèse seulement 13 ko
Gilles Le Page - @lepagegilles
14/05/2013 Dia 17
L’image d’origine (détail en
taille réelle)
Tester l’outil - 7
L’image optimisée
(taille réelle)
Gilles Le Page - @lepagegilles
14/05/2013 Dia 18
Tester l’outil - 8
Elle mesurait 717 x 1011
Elle pesait 477 ko
Elle mesure 283 x 400
Elle pèse 13 ko
Commentaires :
•La photo a été redimensionnée et optimisée
•La dimension maximum d’origine était la largeur (1011)
•Elle a été ramenée à 400
•Sur le bureau, le logiciel est nommé PhotoResize400.exe
•Il a agit de la façon suivante :
•Réduction de la dimension maxi à la taille indiquée dans le nom du logiciel (400)
•Respect des proportions
•Optimisation de la photo
Gilles Le Page - @lepagegilles
14/05/2013 Dia 19
Tester l’outil - 9
La photo optimisée s’appelle
bouteille_orig-400.jpg
Commentaires :
•Sur le bureau, le logiciel est nommé PhotoResize400.exe
•La photo a été ramenée à 400 pixels
•… Étonnant, non ?
•PhotoResizer a agit de la façon suivante :
•Réduction de la dimension maxi à la taille indiquée dans le nom du
logiciel (400)
•Respect des proportions
•Optimisation de la photo
La photo originale s’appelle
bouteille_orig.jpg
Gilles Le Page - @lepagegilles
14/05/2013 Dia 20
Utiliser l’outil plus largement…
Puisque le nombre dans le nom du logiciel est déterminant
dans le redimensionnement des photos :
1. Cloner le logiciel par copier coller sur le bureau
2. Renommer les nouveaux logiciels avec les nombres cibles
3. Utiliser dans le nom un W ou un H majuscule si l’on souhaite traiter
en priorité la largeur ou la hauteur de la photo
4. L’important dans le nom du logiciel, c’est en fait le nombre !
Exemples : PhotoResize400.exe, prW640.exe, prW156.exe,
toto_H680.exe, aldoW800.exe
Gilles Le Page - @lepagegilles
14/05/2013 Dia 21
Redimensionner/Optimiser une photo
Gilles Le Page - @lepagegilles

Redimensionner et optimiser des photo

  • 1.
    14/05/2013 Gilles Le Page- @lepagegilles Dia 1 Redimensionner/Optimiser une photo Tutoriel
  • 2.
    14/05/2013 Dia 2 Lesphotos numériques originales • Une photo numérique originale est souvent « lourde » – Les appareils actuels enregistrent couramment des photos larges de 3600 pixels – Cela correspond à une page papier de 1m de large !!! – Ces images « pèsent » lourd en Méga-octets Gilles Le Page - @lepagegilles
  • 3.
    14/05/2013 Dia 3 Lesphotos sur le web • Affichage sur un écran – l’écran d’un PC portable moyen mesure seulement 1024 pixels, – une photo affichée dans un site mesure la plupart du temps moins de 400 pixels de large… • Il est utile de les redimensionner • Les photos à la sortie de l’appareil photo sont disproportionnées pour le web : • en poids, • en taille • en finesse de détail pour une utilisation sur un site web Gilles Le Page - @lepagegilles
  • 4.
    14/05/2013 Dia 4 Unexemple de photo originale La même image, à l’échelle 5% (divisée par 20 !) Taille réelle (détail) • Cette photo : – mesure 2736 pixels de large sur 3648 pixels de haut – « pèse » 5,4 Méga-octets Gilles Le Page - @lepagegilles
  • 5.
    14/05/2013 Dia 5 Redimensionner? Optimiser ? • Redimensionner – On dit aussi « retailler » (dans le sens « modifier la taille) – Il s’agit de modifier largeur et longueur de la photo sans toucher à son contenu : on en garde les proportions, les couleurs, la définition… • Optimiser – Il s’agit de retraiter la photo pour que la précision des détails soit adaptée à l’affichage web, mais pas plus : en clair, en limiter le poids tant que possible sans perdre de qualité apparente – Cette opération est effectuée par des outils logiciels : pratiquement tous les logiciels de retouche d’image en sont capables. – L’image est retraitée de façon à ce que les nuances de couleur soient moins nombreuses et que la résolution soit diminuée : en affichage web, personne ne s’en apercevra. Gilles Le Page - @lepagegilles
  • 6.
    14/05/2013 Dia 6 Redimensionner? Optimiser ? • Exemple Non retaillée, non optimisée : •Largeur 717 pixels •Poids 477 ko Retaillée, optimisée : •Largeur 200 pixels •Poids 8 ko La qualité reste très acceptable Gilles Le Page - @lepagegilles
  • 7.
    14/05/2013 Dia 7 Unoutil très simple et gratuit Adresse : http://www.rw-designer.com/picture-resize Gilles Le Page - @lepagegilles
  • 8.
    14/05/2013 Dia 8 Téléchargerl’outil - 1 Adresse : http://www.rw-designer.com/picture-resize Cliquer sur le lien Gilles Le Page - @lepagegilles
  • 9.
    14/05/2013 Dia 9 Cliquersur « Enregistrer le fichier » Télécharger l’outil - 2 Une boite de dialogue s’affiche Gilles Le Page - @lepagegilles
  • 10.
    14/05/2013 Dia 10 Choisissezd’enregistrer sur le « bureau » Télécharger l’outil - 3 Une boite de dialogue s’affiche Gilles Le Page - @lepagegilles
  • 11.
    14/05/2013 Dia 11 Lelogiciel est maintenant sur le « bureau » Télécharger l’outil - 4 Gilles Le Page - @lepagegilles
  • 12.
    14/05/2013 Dia 12 1- Ouvrez un répertoire contenant une photo à optimiser Tester l’outil - 1 2 - organisez ce répertoire sur le bureau de façon à accéder facilement à « PhotoResizer400 » Gilles Le Page - @lepagegilles
  • 13.
    14/05/2013 Dia 13 Testerl’outil - 2 Faire glisser et poser le fichier image (drag & drop) sur l’icône du logiciel du bureau Gilles Le Page - @lepagegilles
  • 14.
    14/05/2013 Dia 14 Appuyersur la touche « Entrée », Comme demandé Une boite de dialogue s’ouvre Tester l’outil - 3 Gilles Le Page - @lepagegilles
  • 15.
    14/05/2013 Dia 15 Dansle répertoire d’origine, un nouveau fichier image est apparu : bouteille_orig-400.jpg Tester l’outil - 5 Gilles Le Page - @lepagegilles
  • 16.
    14/05/2013 Dia 16 L’imaged’origine s’appelait : bouteille_orig.jpg Tester l’outil - 6 L’image optimisée s’appelle : bouteille_orig-400.jpg Elle mesurait 717 x 1011 Elle pesait 477 ko Elle mesure 283 x 400 Elle pèse seulement 13 ko Gilles Le Page - @lepagegilles
  • 17.
    14/05/2013 Dia 17 L’imaged’origine (détail en taille réelle) Tester l’outil - 7 L’image optimisée (taille réelle) Gilles Le Page - @lepagegilles
  • 18.
    14/05/2013 Dia 18 Testerl’outil - 8 Elle mesurait 717 x 1011 Elle pesait 477 ko Elle mesure 283 x 400 Elle pèse 13 ko Commentaires : •La photo a été redimensionnée et optimisée •La dimension maximum d’origine était la largeur (1011) •Elle a été ramenée à 400 •Sur le bureau, le logiciel est nommé PhotoResize400.exe •Il a agit de la façon suivante : •Réduction de la dimension maxi à la taille indiquée dans le nom du logiciel (400) •Respect des proportions •Optimisation de la photo Gilles Le Page - @lepagegilles
  • 19.
    14/05/2013 Dia 19 Testerl’outil - 9 La photo optimisée s’appelle bouteille_orig-400.jpg Commentaires : •Sur le bureau, le logiciel est nommé PhotoResize400.exe •La photo a été ramenée à 400 pixels •… Étonnant, non ? •PhotoResizer a agit de la façon suivante : •Réduction de la dimension maxi à la taille indiquée dans le nom du logiciel (400) •Respect des proportions •Optimisation de la photo La photo originale s’appelle bouteille_orig.jpg Gilles Le Page - @lepagegilles
  • 20.
    14/05/2013 Dia 20 Utiliserl’outil plus largement… Puisque le nombre dans le nom du logiciel est déterminant dans le redimensionnement des photos : 1. Cloner le logiciel par copier coller sur le bureau 2. Renommer les nouveaux logiciels avec les nombres cibles 3. Utiliser dans le nom un W ou un H majuscule si l’on souhaite traiter en priorité la largeur ou la hauteur de la photo 4. L’important dans le nom du logiciel, c’est en fait le nombre ! Exemples : PhotoResize400.exe, prW640.exe, prW156.exe, toto_H680.exe, aldoW800.exe Gilles Le Page - @lepagegilles
  • 21.
    14/05/2013 Dia 21 Redimensionner/Optimiserune photo Gilles Le Page - @lepagegilles