Optimiser les images
pour le web
Natalia Zhukova
Master CAWEB
1
La règle des tiers (la règle d’or)
2
• Pertinentes
• Uniformes
• Vivantes
• Inanimées
Améliorer le message grâce aux images
3
Une image numérique
• Le profil colorimétrique
• La résolution
• La taille
• Le poids
• Le format
• Le nom
4
RGB les écrans d’ordinateur
le bon profil colorimétrique
CMJN l’impression
5
la bonne résolution
les écrans d’ordinateurl’impression
6
• la largeur et
la hauteur (HxL)
en pixels (px)
• la largeur (un site
Web) < 1000 px
• La balise <img>
(height et width)
l...
• < de 200 Ko
• réduisez sa taille
( HxL)
et/ou
• la compression
le bon poids
8
le bon format
JPEG GIF PNG
une photographie et une image
haute qualité
la qualité le poids
les images contenant du texte
f...
• en minuscules
• sans accent ni ponctuation
• sans espace (- ou _)
le bon nom
10
Éditeurs d’images en
ligne gratuits
• Pixlr
• BeFunky
• Photoshop en ligne
• PicMonkey
• Editor
• Splashup
• Fotoflexer
• ...
Optimiser les images pour
le référencement
12
Optimiser les images pour référencement
• Le bon rapport
qualité/poids
• La légende de l’image
• Backlinks
• Le nom de l’i...
Trouver des images libres de droits sur
Internet et gratuites
• Google Images
• ImageBase
• Stock Photos for Free
• Bajsto...
Pour bien photographier
15
16
Montrer aux gens les choses d’un point de vue
qu’ils ne sont pas habitués à voir
Photo droite
Photo de travers
17
Le détail
18
Une photo bien composée
La règle des tiers
Les points forts
de l'image
19
Gestion de la lumière
20
ISO
La sensibilité
à la lumière
21
le diaphragme
L'ouverture du
diaphragme
La profondeur de champ
maximiser la profondeur de champminimiser la profondeur de ...
La vitesse d'obturation
Le temps que va prendre votre appareil photo
pour laisser entrer de la lumière
23
24
Le mode S : priorité vitesse
25
Le flash
26
27
28
Prochain SlideShare
Chargement dans…5
×

Optimiser les images pour le web natalia

379 vues

Publié le

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
379
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Optimiser les images pour le web natalia

  1. 1. Optimiser les images pour le web Natalia Zhukova Master CAWEB 1
  2. 2. La règle des tiers (la règle d’or) 2
  3. 3. • Pertinentes • Uniformes • Vivantes • Inanimées Améliorer le message grâce aux images 3
  4. 4. Une image numérique • Le profil colorimétrique • La résolution • La taille • Le poids • Le format • Le nom 4
  5. 5. RGB les écrans d’ordinateur le bon profil colorimétrique CMJN l’impression 5
  6. 6. la bonne résolution les écrans d’ordinateurl’impression 6
  7. 7. • la largeur et la hauteur (HxL) en pixels (px) • la largeur (un site Web) < 1000 px • La balise <img> (height et width) les bonnes dimensions (taille de l’image) 7
  8. 8. • < de 200 Ko • réduisez sa taille ( HxL) et/ou • la compression le bon poids 8
  9. 9. le bon format JPEG GIF PNG une photographie et une image haute qualité la qualité le poids les images contenant du texte floue moins de possibilités une image avec transparence incompatible supporte très peu les icônes, les graphiques, des logos le poids les animations la compression la qualité 95% taille ½ modification de la taille par logiciel > 80% le poids
  10. 10. • en minuscules • sans accent ni ponctuation • sans espace (- ou _) le bon nom 10
  11. 11. Éditeurs d’images en ligne gratuits • Pixlr • BeFunky • Photoshop en ligne • PicMonkey • Editor • Splashup • Fotoflexer • Picadilo • Ipiccy • Photofiltre • Gimp Mac et Windows • Paint.Net • Photo Pos Pro • PhotoScape Windows • Acorn Mac (version gratuite et payante) Les logiciels gratuits 11
  12. 12. Optimiser les images pour le référencement 12
  13. 13. Optimiser les images pour référencement • Le bon rapport qualité/poids • La légende de l’image • Backlinks • Le nom de l’image ( ) mots-clés pertinents • La balise « alt » (le texte alternatif) 13
  14. 14. Trouver des images libres de droits sur Internet et gratuites • Google Images • ImageBase • Stock Photos for Free • Bajstock • Flickr • Getty Images 14
  15. 15. Pour bien photographier 15
  16. 16. 16 Montrer aux gens les choses d’un point de vue qu’ils ne sont pas habitués à voir
  17. 17. Photo droite Photo de travers 17
  18. 18. Le détail 18
  19. 19. Une photo bien composée La règle des tiers Les points forts de l'image 19
  20. 20. Gestion de la lumière 20
  21. 21. ISO La sensibilité à la lumière 21
  22. 22. le diaphragme L'ouverture du diaphragme La profondeur de champ maximiser la profondeur de champminimiser la profondeur de champ 22
  23. 23. La vitesse d'obturation Le temps que va prendre votre appareil photo pour laisser entrer de la lumière 23
  24. 24. 24
  25. 25. Le mode S : priorité vitesse 25
  26. 26. Le flash 26
  27. 27. 27
  28. 28. 28

×