Aujourd’hui le texte ne suffit plus à un bon référencement et l’image prend une valeur de plus en plus importante dans le contenu éditorial. Par contre, les photos mises à l’avant nécessitent des règles de bonnes pratiques (format, poids..). Découvrez comment valoriser au mieux votre communication en ligne. Focus sur la propriété intellectuelle. Animée par l’Agence Oh My Web

1. .fr
« OPTIMISER SES IMAGES POUR SES
SUPPORTS DE COMMUNICATION »
www.ohmyweb.fr

2. DE L’IMPORTANCE DE L’IMAGE…

3. CECI EST UN AXOA DE VEAU

4. CECI EST UN AXOA DE VEAU

5. VOICI NOTRE GAMME DE VIN

6. VOICI NOTRE GAMME DE VIN

7. CHÂTEAU LE THIL 2010

8. CHÂTEAU LE THIL 2010

9. Soigner ses photos pour…
Véhiculer une image de qualité.
Faire rêver, donner envie.
Valoriser ses produits, ses services, son patrimoine.
Favoriser le partage sur les réseaux sociaux.
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

10. OPTIMISER SES PHOTOS POUR LE
WEB ET LES RESEAUX SOCIAUX

11. 4 paramètres composent une image
1. Le Format
2. La Résolution
3. La Dimension
4. Le Poids
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

12. Le Format
Utilisé pour les illustrations compliquées
et les photos qui contiennent des millions de couleurs
JPEG

13. Le Format
Utile pour les dessins et les animations…
GIF

14. Le Format
Permet de gérer « la transparence » d’une image
PNG

15. La Résolution
1 pixel… C’est quoi ?
C’est un point de votre image. L’ensemble des pixels composent
l’intégralité de votre image.
Plus le nombre de pixels est élevé, plus la définition de l’image
est bonne.
Le nombre total de pixels dépend de la puissance des
appareils, certaines photos peuvent avoir plusieurs millions de
pixels.
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

16. La Résolution
DPI & PPP…???
Dots Per Inch / Points Par Pouce
• Nombre de pixels par unité de mesure (pouce)
• 1 pouce = 2,54 cm
Le DPI est une unité de mesure de la résolution de l’image
WEB
72 DPI
PRINT
300 DPI
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

17. La Dimension
Rappel des principaux formats d’écrans :
320 x 480
640 x 960
1136 x 640
…
1920 x 1080
1024 x 768
2048 x 1536
1024 x 768
1280 x 1024
1920 x 1200
…
5120 x 2880

18. La Dimension
Quelles dimensions pour mes images sur mon site web ?
Il n’y a pas de règle et cela dépend des formats utilisés dans la charte
graphique de votre site internet.
De façon générale, il faut éviter de charger des images dont les
dimensions dépassent celles communément admises par les résolutions
d’écran.
• Une photo numérique en sortie d’appareil peut faire jusqu’à 4608 pixels de
largeur…
• Il est déconseillé de les charger en l’état et préférable de les redimensionner en
amont.
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

19. La Dimension
Et pour mon site mobile ?
 La pratique du « Responsive Design » permet de rendre les images « élastiques » pour qu’elles
s’adaptent à toutes les résolutions d’écran.
 Dans certaines situations (cas des images panoramiques notamment), il est préférable de masquer
les images sur format mobile car leur lisibilité n’est pas assez bonne.

20. 180 x 180
851 x 315
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

21. 400 x 400
1500 x 500
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

22. 250 x 250
1010 x 608
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

24. La Dimension
La notion d’homothétie
C’est le fait de conserver la proportion de l’image (largeur et
hauteur) lorsque sa taille varie.
Pour passer d’un format panoramique à un format carré, il
n’y a pas d’autre solution que de « retirer de la matière » à
l’image.

25. Le Poids
1 Ko (Kilo-octet) 1 000 Octets
1 Mo (Méga-octet) 1 000 Ko
1 Go (Giga-octet) 1 000 Mo
1 To (Téra-octet) 1000 Go
Sur un site internet, évitez de dépasser les
200 K0
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

26. Quelques logiciels
de retouche photos
Photoshop
The Gimp PhotoFiltrePixlr
Paint Shop ProLightRoom
Payant
Gratuit

27. Et le référencement Google dans
tout ça ?
Les médias (photos, vidéos…) ont beaucoup d’importance dans le
référencement naturel
• Les internautes effectuent leur recherche de plus en plus sur Google
images :

28. Et le référencement Google dans
tout ça ?
Pour optimiser une image sur un site internet on retiendra
notamment :
• La balise alternative
• <img src=«mon-image.jpg» alt=«Description de mon image» />
• Le nommage
• <img src=«mon-image.jpg» alt=«Description de mon image» />
• Le poids
• Maximum 200Ko dans un article (Cf : Google Page Speed)
• La contextualisation
• Les images devront être insérées au cœur des pages / articles
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

29. ET SI VOUS DEVENIEZ VOTRE
PROPRE PHOTOGRAPHE ?

30. Quelques photos prises avec
un objectif 50 MM
Nikon D3100

32. Les avantages du 50 MM
Objectif très lumineux pour des prises de vues même en faible luminosité
Excellente résolution
Aucune profondeur de champ, permet d’isoler parfaitement le sujet (flou d’arrière plan)
Focale fixe (pas de zoom), aucune distorsion et rendu très naturel
Accessible à partir d’une centaine d’euros
Peu de chance de faire de « mauvaises photos »
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr

33. Merci de votre attention

34. ohmyweb!
Place des basques
64100 Bayonne
Tél : 05 35 46 58 10
BORDEAUX BAYONNE
brice@ohmyweb.fr mathieu@ohmyweb.fr
/AgenceOhMyWeb /ohmyweb /+OhmywebFr