Gérer les images sur son site internet

Choisir les images pour son site internet

Pourquoi les images sont si importantes ?

Beaucoup pense que le choix des images / photos pour leur site internet est secondaire. FAUX ! Cette étape est d’une importance capitale. Vous pouvez avoir le même site internet, la même structure, les mêmes couleurs… si vos photos ne sont pas de bonnes qualités, attrayantes et représentantes de vos valeurs et de ce que vous souhaitez véhiculer, c’est peine perdue !
Nous nous faisons tous un avis dès les premières secondes où nous voyons un site internet. Peu importe le contenu, notre cerveau nous enverra un premier message avec ses premières impressions dès la première visualisation d’une page internet.
Alors prenez soin de bien choisir vos visuels.

Mathilde Langle - Graphiste Webdesigner - Gérer les images sur son site internet
Mathilde Langle - Graphiste Webdesigner - Gérer les images sur son site internet

Les deux mises en page ci-dessus vous montre l’importance du choix et du travail des images. A gauche, des images photographiées avec soin, retravaillées, mises au bon format pour qu’elles aient toutes les 3 la même taille, ajout du logo… Et puis à droite, même mise en page avec 3 photos prises au restaurant et non retravaillées. En un coup d’oeil, on voit tout de suite la différence. Imaginez sur toutes les images du site internet…

Comment choisir ses images ?

Si vous aimez la photographie et que vous aimez prendre vos propres photos, les travailler etc. Rien de mieux ! Vous embarquerez encore plus vos visiteurs dans votre univers et attirerez davantage vos clients idéaux, qui partagent vos goûts et vos valeurs.
Si ce n’est pas le cas, aucun soucis. Il existe de nombreux sites internet qui mettent à disposition des images / photos gratuitement. Attention toutefois à quelques points :

  • Les images sur Google Images ne sont pas gratuites ! Google remonte automatiquement les images de différents sites internet. Au même titre qu’il vous remonte des sites internet pertinents avec votre recherche, il va vous montrer les images qui ont également les mots clés que vous recherchez. Elles appartiennent donc aux propriétaires des sites internet sur lesquelles elles sont hébergées. ON NE TOUCHE PAS AUX IMAGES DE GOOGLE IMAGES. Ça, c’est dit. Vous êtes maintenant prévenu(e) haha
  • Lorsque l’on parle d’images/photos gratuites, il faut tout de même aller lire les conditions et licences de chaque site. Certains vous donnent la possibilité d’utiliser les images uniquement à titre personnel et non commercial. D’autres vous laissent la liberté de les utiliser à titre personnel ET commercial à condition de citer l’auteur ou leur site internet. D’autres encore vous laissent une totale liberté tout en précisant que c’est toujours sympa de citer l’auteur mais que vous n’en êtes pas obligé(e). À vous de prendre connaissance de ces licences. Une fois que c’est fait, vous pourrez choisir les meilleures images/photos répondant à votre univers graphique.

Où choisir ses images ?

Voici une liste non exhaustive de sites internet vous permettant de télécharger gratuitement des images/photos :
Unsplash | www.unsplash.com
Freepik | www.freepik.com
Pexels | www.pexels.com
Canva | www.canva.com
Pixabay | www.pixabay.com

Exporter ses images pour le web

Une fois que vous aurez choisi les images pour votre site internet, il va y avoir une étape importante à ne pas négliger avant de les mettre en ligne. Il va falloir les « exporter pour le web ». Et là vous vous dites que je vous ai totalement perdu et que ça devient trop technique. MAIS NON ! Ne vous inquiétez pas. Je vous explique.

Pourquoi est-ce que le "poids" d'une image est important sur un site internet ?

Quand vous allez sur un site internet, vous êtes tous d’accord avec moi pour dire que c’est assez insupportable lorsque ça ne charge pas ou que ça met 1000 ans… Alors parfois c’est votre connexion et c’est donc temporaire. Mais parfois c’est tout simplement le site internet en question car les images sont trop « lourdes ». En effet, si vous prenez des photos et que vous les chargez telles quelles sur votre site, bonjour les dégâts ! Une photo de plus de 4000 pixels (voire beaucoup plus) de large, qui fait plus de 7Mo à elle seule, ça met du temps à charger !

Votre site internet est comme un dossier sur votre ordinateur. Dans ce dossier vous avez les sous-dossiers (vos pages) et dans chaque sous dossier vous avez vos textes et vos images. Plus vos images sont lourdes, plus votre sous dossier et donc votre dossier global prennent de la place sur votre disque dur. Alors forcément, si vous arrivez à avoir des images qui font juste la taille qu’il faut pour être affichées correctement avec une bonne qualité et qui en plus sont super légères, vous allez pouvoir en mettre beaucoup plus dans votre dossier sans saturer le disque ! Et bien c’est la même chose pour votre site internet. Plus vos images sont grandes et lourdes, plus vous allez prendre de la place sur votre hébergement et donc le saturer (et donc le ralentir le temps qu’il essaye de charger tout votre contenu).

Alléger ses images pour les charger plus rapidement

L’étape d’exportation pour le web, consiste donc à diminuer la taille d’une image : ça ne sert à rien d’avoir une image de la taille d’une affiche pour un abribus si vous avez besoin de l’imprimer sur un flyer… C’est pareil pour votre site internet : ça ne sert à rien d’avoir une image qui fait 4000 pixels de large alors que vous l’utiliser simplement pour vous présenter et qu’elle prend 1/4 de votre écran (donc environ 500 pixels). Ensuite, une fois que vous l’avez à la bonne taille, vous pouvez la « compresser » pour qu’elle soit la plus légère possible tout en gardant sa qualité. Grâce à ça vous pourrez passer d’une image de plus de 7 Mo à seulement 100 Ko. (Pour rappel 1 Mo = 1 000 Ko).

Les outils à utiliser

Pour modifier la taille de vos images :
www.photoshop.adobe.com

Pour « alléger » vos images :
www.tinypng.com
ou encore www.websiteplanet.com/webtools/imagecompressor/ qui m’a été suggéré par l’une d’entre vous. 😊

Pour aller plus loin sur votre site WordPress, vous pouvez également ajouter l’extension Smush. Cette dernière vous permettra de faire un travail supplémentaire qui compressera automatiquement les images que vous chargerez sur votre site (si elles en ont encore besoin après les 2 étapes précédentes).

Renseigner les informations de vos images

Et là vous vous dites « encore une étape ?! »
Et bien oui. Si vous voulez aller encore plus loin, il y a une dernière étape qui peut vous intéresser.
Au début de cet article, je vous ai parlé des images dans Google Images. Je ne sais pas vous, mais j’utilise beaucoup Google Images lorsque j’effectue des recherches. Alors si vous souhaitez vous aussi que vos images remontent dans Google avec les mots clés associés, il faut prendre le temps de renommer et de renseigner correctement vos images.
Comment faire ?

Renommer ses images

Dans un premier temps, une fois les images pour mon site sélectionnées, je les renomme toutes.
Plutôt que de laisser un nom comme IMG1000_23.jpg, je la renomme par exemple « Mathilde_Langle-Graphiste_Webdesigner-Gerer_ses_images_sur_son_site_internet-001.jpg » Alors oui, c’est un peu long, mais au moins je sais que c’est une image pour mon site internet pro, que c’est pour l’article de gestion des images pour son site internet et que c’est la première. Et si un visiteur décide d’enregistrer une image présente sur mon site internet, cette dernière se téléchargera avec toutes ces informations dans son nom.

NB : Vous remarquerez qu’il n’y a ni accent ni espace. On utilise les – et les _ pour séparer les informations dans les noms de fichiers pour le web.

Décrire les images

Une fois mes images renommées, redimensionnées et compressées, je les charge dans les médias de mon site internet. WordPress vous donne ensuite la possibilité de leur donner un texte alternatif, un titre et une description.

Mathilde Langle - Graphiste Webdesigner - Gérer les images sur son site internet

Ces informations permettent notamment à Google « d’analyser » vos images et de les faire remonter dans son moteur de recherche d’images.

À vous de jouer !

Bien évidemment, je vous ai simplifié tout ça. Mais je pense qu’avec cette « base » vous êtes prêt(e) pour choisir les images qu’il vous faut, les optimiser correctement et avoir un joli site internet, attrayant et qui vous ressemble.

Mathilde Langle - Graphiste Webdesigner - Gérer les images sur son site internet
Mathilde Langle - Graphiste Webdesigner - Checklist : Optimiser les images de son site internet
Mathilde Langle - Graphiste Webdesigner - Checklist : Optimiser les images de son site internet
Mathilde Langle - Graphiste Webdesigner - Checklist : Optimiser les images de son site internet

Mathilde

Hello ! ☀️ Je m’appelle Mathilde. 👩🏼, Je suis graphiste et web designer freelance. J’accompagne les entrepreneurs dans le lancement et le développement de leur activité grâce à une identité visuelle, un site internet et des supports de communication à leur image.💫