SlideShare une entreprise Scribd logo
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

Contenu connexe

Plus de Gilles Le Page

Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiquesApprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
Gilles Le Page
 
Je crée ma page facebook entreprise
Je crée ma page facebook entrepriseJe crée ma page facebook entreprise
Je crée ma page facebook entreprise
Gilles Le Page
 
4 semaines dans un Mooc français certifiant
4 semaines dans un Mooc français certifiant4 semaines dans un Mooc français certifiant
4 semaines dans un Mooc français certifiant
Gilles Le Page
 
Mesurer sa popularité sur le web
Mesurer sa popularité sur le webMesurer sa popularité sur le web
Mesurer sa popularité sur le web
Gilles Le Page
 
Veiller sur Internet avec Talkwalker Alertes
Veiller sur Internet avec Talkwalker AlertesVeiller sur Internet avec Talkwalker Alertes
Veiller sur Internet avec Talkwalker Alertes
Gilles Le Page
 
Veiller avec Google Alertes
Veiller avec Google AlertesVeiller avec Google Alertes
Veiller avec Google Alertes
Gilles Le Page
 
Poster comme un pro sur Google+ : tutoriel simple
Poster comme un pro sur Google+ : tutoriel simplePoster comme un pro sur Google+ : tutoriel simple
Poster comme un pro sur Google+ : tutoriel simple
Gilles Le Page
 
Gestion de projet, méthodologie
Gestion de projet, méthodologieGestion de projet, méthodologie
Gestion de projet, méthodologie
Gilles Le Page
 
Créer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veilleCréer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veille
Gilles Le Page
 
Facebook, animation de page par storytelling et mascotte virale
Facebook, animation de page par storytelling et mascotte viraleFacebook, animation de page par storytelling et mascotte virale
Facebook, animation de page par storytelling et mascotte virale
Gilles Le Page
 
Le marketing dans un établissement touristique en 20 questions
Le marketing dans un établissement touristique en 20 questionsLe marketing dans un établissement touristique en 20 questions
Le marketing dans un établissement touristique en 20 questions
Gilles Le Page
 
Les nuits de_ma_ville_ne_sont_plus_sures
Les nuits de_ma_ville_ne_sont_plus_suresLes nuits de_ma_ville_ne_sont_plus_sures
Les nuits de_ma_ville_ne_sont_plus_sures
Gilles Le Page
 
Ret2012–beaulieu 111221
Ret2012–beaulieu 111221Ret2012–beaulieu 111221
Ret2012–beaulieu 111221
Gilles Le Page
 

Plus de Gilles Le Page (13)

Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiquesApprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
 
Je crée ma page facebook entreprise
Je crée ma page facebook entrepriseJe crée ma page facebook entreprise
Je crée ma page facebook entreprise
 
4 semaines dans un Mooc français certifiant
4 semaines dans un Mooc français certifiant4 semaines dans un Mooc français certifiant
4 semaines dans un Mooc français certifiant
 
Mesurer sa popularité sur le web
Mesurer sa popularité sur le webMesurer sa popularité sur le web
Mesurer sa popularité sur le web
 
Veiller sur Internet avec Talkwalker Alertes
Veiller sur Internet avec Talkwalker AlertesVeiller sur Internet avec Talkwalker Alertes
Veiller sur Internet avec Talkwalker Alertes
 
Veiller avec Google Alertes
Veiller avec Google AlertesVeiller avec Google Alertes
Veiller avec Google Alertes
 
Poster comme un pro sur Google+ : tutoriel simple
Poster comme un pro sur Google+ : tutoriel simplePoster comme un pro sur Google+ : tutoriel simple
Poster comme un pro sur Google+ : tutoriel simple
 
Gestion de projet, méthodologie
Gestion de projet, méthodologieGestion de projet, méthodologie
Gestion de projet, méthodologie
 
Créer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veilleCréer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veille
 
Facebook, animation de page par storytelling et mascotte virale
Facebook, animation de page par storytelling et mascotte viraleFacebook, animation de page par storytelling et mascotte virale
Facebook, animation de page par storytelling et mascotte virale
 
Le marketing dans un établissement touristique en 20 questions
Le marketing dans un établissement touristique en 20 questionsLe marketing dans un établissement touristique en 20 questions
Le marketing dans un établissement touristique en 20 questions
 
Les nuits de_ma_ville_ne_sont_plus_sures
Les nuits de_ma_ville_ne_sont_plus_suresLes nuits de_ma_ville_ne_sont_plus_sures
Les nuits de_ma_ville_ne_sont_plus_sures
 
Ret2012–beaulieu 111221
Ret2012–beaulieu 111221Ret2012–beaulieu 111221
Ret2012–beaulieu 111221
 

Dernier

Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
cristionobedi
 
Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025
Billy DEYLORD
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
Txaruka
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
Friends of African Village Libraries
 
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
M2i Formation
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
BenotGeorges3
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 

Dernier (8)

Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
 
Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
 
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
 

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 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
  • 3. 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
  • 4. 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
  • 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 Un outil 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écharger l’outil - 1 Adresse : http://www.rw-designer.com/picture-resize Cliquer sur le lien Gilles Le Page - @lepagegilles
  • 9. 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
  • 10. 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
  • 11. 14/05/2013 Dia 11 Le logiciel 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 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. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 14/05/2013 Dia 21 Redimensionner/Optimiser une photo Gilles Le Page - @lepagegilles