Optimiser ses images pour le web : le guide

par 9.09.19SITES WEB, TUTORIELS

Des images optimisées et allégées pour le web, mais pour quoi faire ?

Si vous souhaitez être bien référencé sur Google, il va falloir veiller à la rapidité de chargement de votre site internet. En effet, l’algorithme de ce moteur de recherche prend en compte plusieurs critères pour vous positionner plus ou moins bien dans ses pages. Ces critères sont entre autres votre serveur d’hébergement, le thème choisi pour votre site, la propreté du code mais aussi la taille / le poids des images utilisées sur votre site web.

Dans cet article je vous explique comment compresser vos images avant de les charger sur le web en ne perdant pas leur qualité.

Au sommaire :

  1. Les critères à prendre en compte pour que les images soient optimisées pour le web
  2. Une liste de logiciels pour compresser ses images
  3. La checklist à effectuer après avoir chargé ses images dans WordPress

Quels critères prendre en compte pour que les images soient optimisées pour le web ?

Avant même de charger vos images sur votre site, il y a certaines choses à prendre en compte concernant vos visuels.

La taille : les images que vous prenez avec votre smartphone ou appareil photo sont bien trop grandes telles qu’elles pour être utilisées directement sur votre site. Elles font généralement 5000 pixels lorsque vous les prenez mais une taille de 500 à 1000 pixels sera amplement suffisante pour le web. Sachez que la réduction de la taille de votre image réduira simultanément son poids.

La compression : Certains logiciels vous permettent de compresser vos images. Réduire le pourcentage de compression de 100% à 70% par exemple vous permettra d’alléger vos visuels sans en réduire la qualité.

Le poids : à retenir une image de moins de 100ko est idéale pour le web. Attention également au nombre d’images utilisées sur une même page. Soixante-dix-huit images, même allégées feront considérablement ralentir le chargement de votre page.

Ici, vous avez bien compris les critères qu’il était important de prendre en compte concernant les images destinées à être utilisées sur votre site web. Un deuxième point à prendre en compte est le nommage de vos images. En effet, mal nommer vos visuels pourrait causer des erreurs d’affichage sur les navigateurs.

Sur ce points plusieurs règles sont à respecter :

  • Pas de caractères spéciaux ( @, &, +, / …)
  • Pas d’accents ( é, à, î…)
  • Pas de majuscules
  • Pas d’espace entre les mots, à la place on utilise un tiret : logo entreprise.jpg deviendra logo-entreprise.jpg

 

Quels logiciels utiliser pour compresser mes images pour le web ?

Voici une petite liste de logiciels, logiciels en ligne et extension WordPress pour compresser vos images :

 

  • Photoshop : il suffit simplement d’ouvrir l’image avec Photoshop. Puis lorsque l’image est ouverte, cliquer sur « Fichier » et « Enregistrer pour le web ». Dans la fenêtre qui s’ouvrira il vous suffira simplement de renseigner la largeur ( 1000px maximum), la hauteur se calculera automatiquement. Vous pouvez également agir sur la qualité dans cette même fenêtre. Puis cliquer sur Enregistrer.

 

  • Affinity Designer : Comme pour Photoshop, ouvrez votre image avec Affinity Designer. Puis cliquer sur « Fichier > Exporter ». Comme pour Photoshop vous pourrez agir ici sur sa largeur et sa qualité. Cliquez ensuite sur Exportez, renommez votre image ( en respectant bien les règles 😉 ) et cliquez sur enregistrer.

 

  • Squoosh : C’est un logiciel en ligne facile à prendre en main qui va vous permettre de redimensionner et d’alléger vos images que vous souhaitez. Le petit plus : vous pouvez comparer votre visuel avec l’original avant de l’exporter.

 

  • Tiny PNG : C’est un logiciel en ligne. Ici il suffit de charger votre image en ligne et le logiciel se charge tout seul de la compresser au maximum. Rapide et gratuit !

 

  • IMAGIFY : il s’agit ici d’une extension WordPress qui va vous permettre d’optimiser vos images directement via le back-office de votre site web.

 

La checklist à effectuer après avoir chargé ses images dans WordPress

Vos images sont compressées, bien nommées et il est temps de les charger sur WordPress.

Si vous êtes encore novices sur WordPress je vous invite à lire mon article sur les astuces à connaître quand on débute sur WordPress.

Voici la checklist à effectuer à chaque fois que vous importerez une nouvelle image sur votre site web. C’est l’étape ultime de l’optimisation.

  • Changer son titre : ici vous pouvez utiliser des espaces, des majuscules, des minuscules et préciser davantage ce que représente la photo.
  • Ajouter une balise alt ( ou texte alternatif ) : cette balise est SUPER importante pour toutes images utilisées sur le web. D’une part, elle va permettre à Google de comprendre le contenu de votre image ( Google ne peut pas voir l’image comme nous ) il en est de même pour un malvoyant qui utilisera la fonction vocale pour connaître le descriptif de ce visuel. D’autre part, elle est importante pour votre SEO, pensez-donc à y inclure votre mot clé.

En résumé :

  1. Redimensionnez vos images pour que celles-ci soient inférieures à 1000px.
  2. Compressez vos images
  3. Renommez vos images en respectant les règles ( pas d’accents, de caractères spéciaux etc.)
  4. Téléchargez vos images dans WordPress
  5. Renseignez le titre et la balise alt
  6. Et voilà !

Cet article vous a plu ? Si vous pensez qu’il peut aider épinglez – le sur Pinterest

A propos de l’auteur 

Hello, moi c’est Marion. Ma mission est de vous aider dans la création d’une marque authentique et alignée étape par étape qui soit au service de votre vie idéale. 

Au travers de mes contenus, je souhaite vous montrer qu’il est possible de créer une entreprise sur-mesure avec des conseils simples à mettre en place tout en préservant son écologie personnelle, son environnement et l’Humain d’une manière générale. J’ai une approche dite « holistique » de l’entrepreneuriat. 

Si vous souhaitez entreprendre autrement, nous devrions bien nous entendre.

Bonne lecture et à très vite ✨ ! 

Marion Samuel

Consultante digitale, experte en création de marque et site internet, marionsamuel.com

D’autres idées de lectures

0 commentaires

Soumettre un commentaire

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