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

Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsRajiAbdelghani
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 37
 
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSKennel
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeXL Groupe
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSKennel
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSKennel
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Alain Marois
 
le present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptxle present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptxmmatar2
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre françaisTxaruka
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 37
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .Txaruka
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSKennel
 
Evaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxEvaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxAsmaa105193
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETMedBechir
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETMedBechir
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSKennel
 
Saint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxSaint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxMartin M Flynn
 
Présentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxPrésentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxrababouerdighi
 

Dernier (20)

Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 temps
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
 
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directe
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024
 
DO PALÁCIO À ASSEMBLEIA .
DO PALÁCIO À ASSEMBLEIA                 .DO PALÁCIO À ASSEMBLEIA                 .
DO PALÁCIO À ASSEMBLEIA .
 
le present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptxle present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptx
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre français
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
 
Evaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxEvaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. Marocpptx
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSET
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
 
Saint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxSaint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptx
 
Présentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxPrésentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.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