.fr
« OPTIMISER SES IMAGES POUR SES
SUPPORTS DE COMMUNICATION »
www.ohmyweb.fr
DE L’IMPORTANCE DE L’IMAGE…
CECI EST UN AXOA DE VEAU
CECI EST UN AXOA DE VEAU
VOICI NOTRE GAMME DE VIN
VOICI NOTRE GAMME DE VIN
CHÂTEAU LE THIL 2010
CHÂTEAU LE THIL 2010
Soigner ses photos pour…
Véhiculer une image de qualité.
Faire rêver, donner envie.
Valoriser ses produits, ses services, ...
OPTIMISER SES PHOTOS POUR LE
WEB ET LES RESEAUX SOCIAUX
4 paramètres composent une image
1. Le Format
2. La Résolution
3. La Dimension
4. Le Poids
www.ohmyweb.fr Brice Papillaud ...
Le Format
Utilisé pour les illustrations compliquées
et les photos qui contiennent des millions de couleurs
JPEG
Le Format
Utile pour les dessins et les animations…
GIF
Le Format
Permet de gérer « la transparence » d’une image
PNG
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...
La Résolution
DPI & PPP…???
Dots Per Inch / Points Par Pouce
• Nombre de pixels par unité de mesure (pouce)
• 1 pouce = 2...
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
...
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 utili...
La Dimension
Et pour mon site mobile ?
 La pratique du « Responsive Design » permet de rendre les images « élastiques » p...
180 x 180
851 x 315
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr
400 x 400
1500 x 500
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr
250 x 250
1010 x 608
www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr
La Dimension
La notion d’homothétie
C’est le fait de conserver la proportion de l’image (largeur et
hauteur) lorsque sa t...
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
Su...
Quelques logiciels
de retouche photos
Photoshop
The Gimp PhotoFiltrePixlr
Paint Shop ProLightRoom
Payant
Gratuit
Et le référencement Google dans
tout ça ?
Les médias (photos, vidéos…) ont beaucoup d’importance dans le
référencement nat...
Et le référencement Google dans
tout ça ?
Pour optimiser une image sur un site internet on retiendra
notamment :
• La bali...
ET SI VOUS DEVENIEZ VOTRE
PROPRE PHOTOGRAPHE ?
Quelques photos prises avec
un objectif 50 MM
Nikon D3100
Les avantages du 50 MM
Objectif très lumineux pour des prises de vues même en faible luminosité
Excellente résolution
Aucu...
Merci de votre attention
ohmyweb!
Place des basques
64100 Bayonne
Tél : 05 35 46 58 10
BORDEAUX BAYONNE
brice@ohmyweb.fr mathieu@ohmyweb.fr
/Agence...
Optimiser ses images sur tous supports de communication pour vous démarquer de la concurrence
Optimiser ses images sur tous supports de communication pour vous démarquer de la concurrence
Prochain SlideShare
Chargement dans…5
×

Optimiser ses images sur tous supports de communication pour vous démarquer de la concurrence

551 vues

Publié le

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

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

Aucun téléchargement
Vues
Nombre de vues
551
Sur SlideShare
0
Issues des intégrations
0
Intégrations
85
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Optimiser ses images sur tous supports de communication pour vous démarquer de la concurrence

  1. 1. .fr « OPTIMISER SES IMAGES POUR SES SUPPORTS DE COMMUNICATION » www.ohmyweb.fr
  2. 2. DE L’IMPORTANCE DE L’IMAGE…
  3. 3. CECI EST UN AXOA DE VEAU
  4. 4. CECI EST UN AXOA DE VEAU
  5. 5. VOICI NOTRE GAMME DE VIN
  6. 6. VOICI NOTRE GAMME DE VIN
  7. 7. CHÂTEAU LE THIL 2010
  8. 8. CHÂTEAU LE THIL 2010
  9. 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. 10. OPTIMISER SES PHOTOS POUR LE WEB ET LES RESEAUX SOCIAUX
  11. 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. 12. Le Format Utilisé pour les illustrations compliquées et les photos qui contiennent des millions de couleurs JPEG
  13. 13. Le Format Utile pour les dessins et les animations… GIF
  14. 14. Le Format Permet de gérer « la transparence » d’une image PNG
  15. 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. 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. 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. 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. 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. 20. 180 x 180 851 x 315 www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr
  21. 21. 400 x 400 1500 x 500 www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr
  22. 22. 250 x 250 1010 x 608 www.ohmyweb.fr Brice Papillaud – brice@ohmyweb.fr
  23. 23. 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.
  24. 24. 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
  25. 25. Quelques logiciels de retouche photos Photoshop The Gimp PhotoFiltrePixlr Paint Shop ProLightRoom Payant Gratuit
  26. 26. 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 :
  27. 27. 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
  28. 28. ET SI VOUS DEVENIEZ VOTRE PROPRE PHOTOGRAPHE ?
  29. 29. Quelques photos prises avec un objectif 50 MM Nikon D3100
  30. 30. 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
  31. 31. Merci de votre attention
  32. 32. ohmyweb! Place des basques 64100 Bayonne Tél : 05 35 46 58 10 BORDEAUX BAYONNE brice@ohmyweb.fr mathieu@ohmyweb.fr /AgenceOhMyWeb /ohmyweb /+OhmywebFr

×