optimiser ses images sur tous supports de communication pour vous démarquer de la concurrence
TRANSCRIPT
.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, son patrimoine.
Favoriser le partage sur les réseaux sociaux.
www.ohmyweb.fr Brice Papillaud – [email protected]
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 – [email protected]
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 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 – [email protected]
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 – [email protected]
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
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 – [email protected]
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.
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.
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 – [email protected]
Quelques logiciels de retouche photos
Photoshop
The Gimp PhotoFiltre Pixlr
Paint Shop Pro LightRoom
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 naturel
• Les internautes effectuent leur recherche de plus en plus sur Google images :
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 – [email protected]
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
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 – [email protected]
Merci de votre attention
ohmyweb! Place des basques
64100 Bayonne Tél : 05 35 46 58 10
BORDEAUX BAYONNE
[email protected] [email protected]
/AgenceOhMyWeb /ohmyweb /+OhmywebFr