SlideShare une entreprise Scribd logo
1  sur  21
Télécharger pour lire hors ligne
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 pratiquesGilles 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 entrepriseGilles 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 certifiantGilles Le Page
 
Mesurer sa popularité sur le web
Mesurer sa popularité sur le webMesurer sa popularité sur le web
Mesurer sa popularité sur le webGilles Le Page
 
Veiller sur Internet avec Talkwalker Alertes
Veiller sur Internet avec Talkwalker AlertesVeiller sur Internet avec Talkwalker Alertes
Veiller sur Internet avec Talkwalker AlertesGilles Le Page
 
Veiller avec Google Alertes
Veiller avec Google AlertesVeiller avec Google Alertes
Veiller avec Google AlertesGilles 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 simpleGilles Le Page
 
Gestion de projet, méthodologie
Gestion de projet, méthodologieGestion de projet, méthodologie
Gestion de projet, méthodologieGilles 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 veilleGilles 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 viraleGilles 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 questionsGilles 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_suresGilles Le Page
 
Ret2012–beaulieu 111221
Ret2012–beaulieu 111221Ret2012–beaulieu 111221
Ret2012–beaulieu 111221Gilles 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

Computer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptxComputer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptxRayane619450
 
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptxSUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptxssuserbd075f
 
Boléro. pptx Film français réalisé par une femme.
Boléro.  pptx   Film   français   réalisé  par une  femme.Boléro.  pptx   Film   français   réalisé  par une  femme.
Boléro. pptx Film français réalisé par une femme.Txaruka
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film françaisTxaruka
 
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdfCOURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdfabatanebureau
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne FontaineTxaruka
 
gestion des conflits dans les entreprises
gestion des  conflits dans les entreprisesgestion des  conflits dans les entreprises
gestion des conflits dans les entreprisesMajdaKtiri2
 
La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film françaisTxaruka
 
Cours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfCours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfachrafbrahimi1
 

Dernier (10)

Computer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptxComputer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptx
 
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptxSUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
 
Boléro. pptx Film français réalisé par une femme.
Boléro.  pptx   Film   français   réalisé  par une  femme.Boléro.  pptx   Film   français   réalisé  par une  femme.
Boléro. pptx Film français réalisé par une femme.
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film français
 
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdfCOURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne Fontaine
 
gestion des conflits dans les entreprises
gestion des  conflits dans les entreprisesgestion des  conflits dans les entreprises
gestion des conflits dans les entreprises
 
La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film français
 
Evaluación Alumnos de Ecole Victor Hugo
Evaluación Alumnos de Ecole  Victor HugoEvaluación Alumnos de Ecole  Victor Hugo
Evaluación Alumnos de Ecole Victor Hugo
 
Cours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfCours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdf
 

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