fbpx

Choisir et préparer les images de son site comme une pro

Sommaire

Lors de mes accompagnements en création de site, j’ai remarqué que le choix et l’intégration des images sur son site étaient souvent source de questionnements.

Quelle taille pour les images de son site ? Quelles dimensions ? Quel format utiliser ? Où trouver des images gratuites et libres de droit pour son site internet ?

Tu te poses toutes ces questions ?

Déjà, sache que tu as bien raison de te préoccuper des images de ton site, car un visuel bien optimisé permet d’améliorer l’expérience utilisateur, le design, la vitesse et le référencement de ton site. Oui, oui tout ça !

Voyons, dans cet article, comment choisir de beaux visuels, les intégrer à la bonne taille sur ton site et les optimiser pour le référencement.

Où trouver de belles images gratuites pour son site internet ?

Le must est évidemment d’avoir ses propres visuels. Cela peut très bien être des photos prises soi-même ou par un photographe pro. Mais cette option n’est pas toujours possible et accessible pour tout le monde.

Heureusement, tu as désormais plein de sites sur lesquels des photographes, pros ou amateurs, proposent des visuels gratuitement en téléchargement. Et ça, c’est vraiment trop cool.

Je pense plus particulièrement à :

Unsplash – mon préféré

Pexels – la valeur sûre

Kaboompics – le méconnu

Commence par faire une petite session brainstorming durant laquelle tu vas noter les mots clés concernant ton secteur d’activité. Élargis ta recherche à des mots clés annexes pour diversifier les résultats de recherche.

Je te donne des exemples :

Si tu es community manager, tu pourras faire des recherches d’images avec les mots clés suivants : “instagram”, “communication”, “espace de travail”, “créativité”…

Si tu es naturopathe, tu pourras faire des recherches d’images avec les mots clés suivants : “naturopathie” (obviously) 💁🏼‍♀️ , “thérapeute”, “bien-être”, ou même “relaxation”, “nature”, “alimentation”…

Prends le temps de chercher. Le risque avec les sites d’images libres de droit, c’est que tu peux facilement te retrouver avec les mêmes visuels que tout le monde. Ne t’arrête pas à la première page, car tu peux être certaine que ces photos auront déjà été utilisées de nombreuses fois.

Une fois que tu as trouvé une photo que tu apprécies, n’hésite pas à aller visiter le profil du photographe : il y a de fortes chances pour que tu aimes le reste de son travail et que tu découvres d’autres visuels qui te correspondent. Choisir des images provenant du même photographe te permettra, en plus, de garder la même unicité entre tous les visuels de ton site.

Sur Unsplash ou sur Pexels, tu as la possibilité de créer des dossiers dans lesquels tu peux enregistrer les images qui t’intéressent. Je te conseille de trier les images qui te plaisent par thème. De cette façon, le jour où tu rechercheras une image pour ton site ou pour de la création de contenu, il te suffira de piocher dans tes visuels enregistrés.

Tu as trouvé plein de visuels canons pour ton site ? Chouette ! Passons maintenant à la seconde étape : la sélection.

Tes photos doivent garder une cohérence entre elles. Pourquoi ? Tout simplement parce qu’avoir plein de visuels de styles différents sur ton site donne un effet fouillis pas super pro. Choisir des photos harmonieuses entre elles produit l’effet inverse, c’est-à-dire un site pro et agréable à visiter. Et ça tombe bien puisque c’est ça qu’on veut !

choisir images site

Tu vois ce que je veux dire ?

Prends bien le temps de sélectionner des visuels qui ont la même chromie et les mêmes tonalités.

Maintenant que tes images sont sélectionnées, voyons les aspects plus “techniques”. À savoir la taille des images de ton site ainsi que leurs formats. Je te l’accorde, c’est beaucoup moins fun que de parcourir Unsplash à la recherche de beaux visuels. Mais cette étape est indispensable. Si tes images sont trop lourdes, elles vont ralentir ton site. Et si tu as l’habitude de lire mes articles, tu le sais : un site lent nuit à ton référencement.

Sorry, mais il n’y a pas de réponse universelle à cette question ! En fait, ça va dépendre de l’emplacement prévu pour cette image. S’il s’agit d’une photo destinée à être affichée en plein écran, ton image devra évidemment être plus grande qu’une image destinée à être affichée en miniature sur ton blog.

Je n’ai donc pas de réponse précise à t’apporter, mais voici ce que je te conseille de faire :

Lorsque tu télécharges une photo sur Unsplash, plusieurs dimensions te sont proposées :

  • petite : 640 x 960 px
  • moyenne : 1920 x 2880 px
  • grande : 2400 x 3600 px.

Si ton image a pour but d’être utilisée en pleine page : choisis moyenne.

Sinon préfère plutôt petite.

Tu peux ensuite redimensionner, dans le logiciel de ton choix : Photoshop, Canva ou encore Gimp… tes images à la taille de l’emplacement prévue sur ton site. En tout cas, retiens bien qu’une image plus grande que son emplacement va ralentir inutilement ton site.

Quand on parle de taille d’une image, on parle de son poids. Évite les images de plus de 200 Ko sur ton site. Les photos destinées à être affichée en plein écran pourront peser un peu plus lourd. Mais par pitié évite les photos de 2 Mo sur ton site internet. Tes visiteurs et Google ne seront pas contents (et moi non plus 🧏🏼‍♀️ ).

Une fois que tes images sont aux bonnes dimensions, je te conseille de les compresser. Pour ça, tu peux utiliser des outils de compression en ligne. Il en existe plein, tu as l’embarras du choix et aucune excuse pour ne pas compresser tes images.

Quelques outils de compression en ligne bien pratiques :

Venons-en maintenant au format. 🙂

Les formats d’images qu’on peut rencontrer sur le web sont JPEG, WEBP, PNG, SVG, GIF.

Chacun de ces formats d’image va avoir un rôle bien spécifique.

JPEG : Il s’agit du format le plus couramment utilisé sur le web. C’est le format à privilégier pour tes photos.

PNG : Contrairement au format JPEG, le format PNG permet d’avoir des images avec fond transparent. Il est donc adapté aux illustrations, aux logos et aux icônes. Le PNG est un format est assez lourd, donc à utiliser uniquement si nécessaire.

Pour les icônes, illustration et logos, tu pourras également utiliser le format SVG. Si tu le peux, privilégie le format SVG, car c’est un format plus léger que le PNG.

Le GIF permet d’avoir des images animées.

Webp : ce format est plus léger que le JPEG. Cependant, il n’est pas encore supporté par tous les navigateurs, ce qui signifie que certains visiteurs ne pourront pas voir les images de ton site. Sache, tout de même, que les navigateurs ne supportant pas le format Webp restent très peu utilisés aujourd’hui. Si tu utilises WordPress, il existe des extensions permettant de convertir tes images Jpeg en Webp : si le navigateur utilisé ne peut pas afficher d’image Webp, c’est l’image Jpeg qui sera affichée.

Optimiser les images de son site pour le référencement

Tu as sélectionné tes photos. Leurs dimensions, tailles et formats sont adaptés aux objectifs de tes images. Les voilà prêtes à être intégrées sur ton site.

 🦋 Minute papillon, il reste une dernière étape : l’optimisation de tes images pour le référencement.

Oui, les images jouent un rôle dans le bon référencement de ton site ! Tu as en fait deux éléments à prendre en compte : le nom des images et le texte alternatif.

Tes images doivent être renommées de manière pertinente avant d’être intégrées à ton site. C’est-à-dire qu’elles doivent être nommées avec des mots clés relatifs au sujet de ta page.

Je m’explique.

Pour comprendre le contenu de l’image d’un site, le moteur de recherche va se baser sur le nom de celle-ci. Si ton image se nomme “IMG12345.jpg”, le moteur de recherche ne va pas comprendre de quoi il s’agit. En revanche, si ton image se nomme “chaton-mignon.jpg” ça sera plus clair pour lui.

Quelques conseils pour nommer correctement les images de ton site :

  • sépare les mots par des tirets ;
  • n’utilise pas de caractères spéciaux (accent, ponctuation, espace etc etc.) ;
  • évite les noms d’image à rallonge.

Qu’est-ce que le texte alternatif ? En fait, il s’agit du texte qui s’affichera si le navigateur est dans l’incapacité d’afficher une image sur ton site. Par exemple, si la connexion de l’internaute est mauvaise. Le texte alternatif, c’est aussi le texte qui sera lu aux personnes malvoyantes pour leur fournir une description de l’image de ton site.

Les moteurs de recherche se servent également du texte alternatif pour identifier le sujet de l’image. C’est le moment d’y insérer des mots clés pour remonter ta page ou ton article, dans les résultats de recherche de Google.

Quelques conseils pour optimiser le texte alternatif des images de son site :

  • Nul besoin de mettre des tirets entre les mots, des espaces sont suffisants.
  • Soit spécifique : “prof de yoga vinyasa Caen” sera préférable que juste “yoga”
  • À l’inverse : pas la peine d’y placer trop de mots. Le texte alternatif doit faire au maximum 100 caractères.
  • On évite la surcharge de mots clés.

Où placer le texte alternatif ?

Cela dépendra ensuite de la plateforme de création de site que tu utilises. Il s’agit généralement d’un champ à remplir lors de l’ajout de l’image sur ton site, une manip’ très simple donc.

Ce qu’il faut retenir

 🌼  Les images ont une place super importante dans le design de ton site : prends le temps de bien les choisir.

 🌼  Évite les images trop grandes (et donc trop lourdes) sur ton site internet, tu risques de ralentir inutilement ton site.

 🌼  Le choix du format d’image joue un rôle dans le poids de tes images.

 🌼  Place tes mots clés dans le nom de tes images et dans le texte alternatif pour améliorer ta position dans les moteurs de recherche.

Et voilà, le choix et l’optimisation des images pour un site internet n’ont plus aucun secret pour toi !

À bientôt,

Zoé

Cet article t’a plu ? 📌​ Épingle-le sur Pinterest pour le retrouver plus tard.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

webdesigneuse

Hello !

Hey, je m’appelle Zoé et je suis créatrice de sites internet pour entrepreneuses.

Ma mission ? T’aider à te démarquer sur le web grâce à un site impactant, pensé pour atteindre tes objectifs et dont tu seras fière.

newsletter création de site

Des conseils pour améliorer ta relation avec ton site internet. Un jeudi sur deux, dans ta boite mail.

créer site soi même

Atelier offert

Lance-toi enfin dans la création de ton site grâce à cet atelier gratuit à suivre à ton rythme.

Un plan d’action qui reprend, pas à pas, les différentes étapes pour créer un site efficace et qui saura toucher ton audience idéale.