optimiser les images pour le web natalia
DESCRIPTION
TRANSCRIPT
![Page 1: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/1.jpg)
Optimiser les images pour le web
Natalia Zhukova Master CAWEB
1
![Page 2: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/2.jpg)
La règle des tiers (la règle d’or)
2
![Page 3: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/3.jpg)
• Pertinentes
• Uniformes
• Vivantes
• Inanimées
Améliorer le message grâce aux images
3
![Page 4: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/4.jpg)
Une image numérique
• Le profil colorimétrique
• La résolution
• La taille
• Le poids
• Le format
• Le nom
4
![Page 5: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/5.jpg)
RGB les écrans d’ordinateur
le bon profil colorimétrique
CMJN l’impression
5
![Page 6: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/6.jpg)
la bonne résolution
les écrans d’ordinateur l’impression
6
![Page 7: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/7.jpg)
• 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
![Page 8: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/8.jpg)
• < de 200 Ko
• réduisez sa taille ( HxL)
et/ou
• la compression
le bon poids
8
![Page 9: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/9.jpg)
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
![Page 10: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/10.jpg)
• en minuscules • sans accent ni ponctuation
• sans espace (- ou _)
le bon nom
10
![Page 11: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/11.jpg)
É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
![Page 12: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/12.jpg)
Optimiser les images pour le référencement
12
![Page 13: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/13.jpg)
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
![Page 14: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/14.jpg)
Trouver des images libres de droits sur Internet et gratuites
• Google Images
• ImageBase
• Stock Photos for Free
• Bajstock
• Flickr
• Getty Images
14
![Page 15: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/15.jpg)
Pour bien photographier
15
![Page 16: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/16.jpg)
16
Montrer aux gens les choses d’un point de vue qu’ils ne sont pas habitués à voir
![Page 17: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/17.jpg)
Photo droite
Photo de travers
17
![Page 18: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/18.jpg)
Le détail
18
![Page 19: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/19.jpg)
Une photo bien composée
La règle des tiers
Les points forts de l'image
19
![Page 20: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/20.jpg)
Gestion de la lumière 20
![Page 21: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/21.jpg)
ISO
La sensibilité à la lumière
21
![Page 22: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/22.jpg)
le diaphragme
L'ouverture du diaphragme
La profondeur de champ
maximiser la profondeur de champ minimiser la profondeur de champ
22
![Page 23: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/23.jpg)
La vitesse d'obturation
Le temps que va prendre votre appareil photo pour laisser entrer de la lumière
23
![Page 24: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/24.jpg)
24
![Page 25: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/25.jpg)
Le mode S : priorité vitesse
25
![Page 26: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/26.jpg)
Le flash
26
![Page 27: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/27.jpg)
27
![Page 28: Optimiser les images pour le web natalia](https://reader034.vdocuments.site/reader034/viewer/2022051514/549c9c16ac7959ab2a8b47a2/html5/thumbnails/28.jpg)
28