8 erreurs à éviter lorsque vous choisissez des images pour votre site Web

Mardi 14 juillet 2015

Les images sont importantes dans les sites Web. Elles doivent être de qualité. Comme les résolutions d'écran sont plus grandes qu'auparavant mais aussi plus variées (les anciens standards étaient de 990 pixels de large comparativement à 2100 pixels maintenant pour les écrans d'ordinateurs de bureau).  Des précautions sont donc à prendre !

1- Faire télécharger des images trop lourdes à vos utilisateurs.

Lorsque vos utilisateurs naviguent sur un téléphone mobile, il est important pour eux de télécharger le minimum de données.

Mais même quand vos utilisateurs utilisent un ordinateur de bureau, ils ne veulent pas naviguer sur un site Web qui se télécharge à la vitesse d'une tortue. La plupart vont chercher un autre site Web pour répondre à leurs besoins, au profit de vos concurrents fort probablement.

Pour atteindre ce but, voici deux trucs à respecter.

Respectez les formats prédéfinis de votre site Web.

Sur tout site Web professionnel, vous avez des formats prédéfinis pour toutes vos images, par exemple : les images d'entêtes, les images d'accueil, les images d'articles, etc. Assurez-vous de respecter ces formats.

Une solution simple est d'utiliser un format standard qui se partage bien sur les réseaux sociaux lorsque vous créez votre site Web. Par exemple, si vous publiez fréquemment sur Pinterest, allez-y pour un format standard de ce réseau. (Pour une liste complète des formats de réseaux sociaux, c'est par ici.)

Le type d'image est important à considérer.

Il existe différents types d'images, par exemple jpg, png, bmp, gif, et plus encore.

Les meilleurs pour le Web sont jpg, gif et png.

 

2- Ne pas recadrer vos images

Si vous ne rognez pas vos images avant de la télécharger sur votre site Web, ou encore, si vous ne prenez pas au moins la peine de vérifier de quelle façon votre système de gestion de contenu choisit de recadrer vos images, les résultats pourraient être décevants. Dans certains cas, on pourrait même ne plus voir ce qui est illustré sur l'image.

Recadrer chaque image manuellement demande du temps et de la patience, mais vous permettra des résultats optimaux. Cependant, si vous avez une console de gestion qui vous aide à faire le travail, c'est encore mieux.

 

3- Oublier les formats «vignettes» et les petites images

Les petits formats d'images ne doivent pas être oubliés ou mis de côté lors de mises à jour. Les vignettes comprennent toutes les images de type «preview» qui sont généralement beaucoup plus petites que les images de contenus. Bien qu'elles soient petites, elles ne doivent pas être délaissées et il est important de préparer un fichier léger pour ce type d'image.
Le Favicon fait partie de ces petites images.

Donc, si vous mettez à jour votre image d'entreprise, pensez à l'actualiser lui aussi.

 

4- Ne pas donner de nom à vos images et ne pas remplir les «Meta» de vos images 

Les moteurs de recherche utilisent les données «meta» et le nom de vos images pour vous indexer. Portez donc attention à ce que vous y inscrivez et donnez des noms qui décrivent bien ce qui est illustré sur vos images.

Soyez le plus précis possible, vérifiez votre orthographe et si votre nom d'image est composé de plusieurs mots, séparez-les par des traits d'union.

Exemple de bon nom d'image :

equipe-steeve.jpg

spa-veranda.jpg

 

Exemple d'un mauvais nom d'image :

web-2014080913514f-c681-6170-ebbf52b6c24.jpg

image1.jpg

photo1.jpg

téléchargement.png

 

5- Ne pas redimensionner proportionnellement votre image

Cette erreur aura pour effet de donner une «tête de cône» aux gens sur la photo ou de les rendre trop larges (style «petits bonhommes pas de cou»). La bonne technique pour recadrer une image est bien sûr de la recadrer proportionnellement, donc de conserver le même ratio.

6- Ne pas planifier les multiples formats d'écran

Vous devez prévoir de quelle façon vos images seront redimensionnées selon le format de l'écran utilisé par vos visiteurs. 

Une pratique commune consiste à utiliser des «media queries» qui géreront le tout sur votre site Web. Faites quelques tests sur différents appareils pour valider que vos images ont fière allure, peu importe le format de l'écran.

 

7- Ne pas tenir compte des écrans «Retina»

Les écrans «retina» offrent un rendu de qualité supérieure sans pareil pour l'affichage des photos et des visuels. Ces écrans sont courants dans la gamme de produits Apple.

Les spécialistes le recommandent fortement, mais disons que ce ne sont pas tous les utilisateurs du Web qui ont accès à de tels appareils. 

 

8- Utiliser des photos «stock» déjà utilisées ailleurs

Les photos «stock» sont ces photos que nous pouvons acheter à petit prix dans différentes banques d'images (chez Numérique nous utilisons fotolia). L'utilisation de photos stock enlève de l'originalité à votre site Web, surtout si elles sont reprises par plusieurs autres entreprises.

L'idéal est d'utiliser des photos que vous aurez fait prendre par un photographe professionnel, même si vous devez en mettre un plus petit nombre sur votre site. La qualité et l'originalité avant tout ! De plus, ces photos pourront être réutilisées lors de la production de documents corporatifs, publicités, dépliants, etc.

En bref...

Cherchez toujours à utiliser les photos de la meilleure qualité qui soit. Sachez qu'il est préférable d'accompagner vos textes d'une photo ou d'une vidéo. Les gens sont visuels, surtout sur le Web ! Ce conseil s'applique aussi à vos interventions sur les réseaux sociaux. Prenez le temps de bien choisir vos photos, c'est une étape agréable de toute mise en ligne de site Web, profitez-en !