⚙️ Comment optimiser ses images pour le web ?

🌿 J'éco conçois les sites que je crée avec mes clients. Mais pour que le site reste léger et performant, j’explique et je montre toujours comment optimiser leurs images pour le web 🏞️

‍

Pourquoi est-il essentiel d’optimiser les images de son site web ?

‍

Il est très important de toujours optimiser ses images avant de les ajouter sur son site.

Voici quelques bénéfices : 

• Point à ne pas négliger sur votre site : l’expérience utilisateur. Des images peu, voire pas du tout optimisées peuvent considérablement ralentir le temps de chargement de vos pages.

• Le temps de chargement est un critère pris en compte par Google et peut jouer sur le positionnement de votre site dans les pages de recherches. 

• Vous avez travaillé avec un designer et un développeur pour éco-concevoir votre site ? Si vous n’optimisez pas vos images, vous allez très rapidement perdre l’aspect éco-responsable et léger de votre site et c’est comme si vous repartiez de zéro.

‍

💡Pourquoi optimiser le temps de chargement de votre site ?
40% des internautes abandonnent un site web si le chargement prend plus de 3 secondes. Avec un site non optimisé, vous perdez en engagement et en conversion.

‍

‍

Comment optimiser ses images ?

Savoir si une image est trop lourde

💡Tout d’abord, quelques ordres de grandeur pour savoir si une image a besoin d'être optimisée :

◉ Une grande image, comme un bandeau, ne doit pas dépasser une taille de fichier de 140/150 Ko, avec une largeur d’image de 900/1000 pixels.

◉ La plupart des autres images ne doivent pas dépasser 50/60 Ko.

‍

Comment diminuer le poids d’une image ?

⚙️ Si c’est le cas, voici comment diminuer le poids d’une photo :

• en la redimensionnant (donner une résolution appropriée en diminuant ses dimensions)
• en la compressant (réduire la qualité de l’image pour la rendre plus légère).
• en changeant son format (choisir un format d’image adapté au web comme WebP)

‍

Oui mais vous allez me dire, on est pas tous des pros de la retouche et de l'édition d’images 🧐

‍

Et c’est vrai ! Du coup, je vous recommande l’outil en ligne (et gratuit), Squoosh App. Il permet de jouer sur les différents paramètres vus plus haut et il est très simple d’utilisation !

Vous pouvez comparer la qualité d’image avant/après et le petit plus satisfaisant, vous voyez de combien de % vous avez réduit le poids de l’image. 🪶

‍

➡️ Un exemple ?

Juste en dessous, c’est une capture de Squoosh App : je pars d'une image avec un poids de 1,48 Mo. 

‍

C'est une image qui a vocation à être utilisée en guise d’accompagnement pour un texte. Elle n'a donc pas besoin d'être aussi lourde ni en qualité HD.

‍

Pour réduire son poids, j’ajoute l’image dans Squoosh App, puis je joue sur différents paramètres : 

• J’ai redimensionné l’image à une largeur de 900 pixels (au lieu de 4032 pixels)
• J’ai compressé l’image en réduisant sa qualité (75% au lieu de 100%)

‍

Grâce à ces ajustements, j’ai réduit son poids de 97% en passant de 1,48Mo à 41Ko.

‍

👍 L’image est prête à être ajoutée sur le site ! 

‍

Pour aller plus loin

Astuces SEO

Au delà du poids et du format d’image, voici quelques astuces SEO pour vos images : 

• Rédiger un title : qui résume le sujet de l’image et intègre des termes proches de du mot clé sur lequel vous souhaitez vous positionner

‍

• Ajouter systématiquement un texte alternatif (attribut alt) : celui-ci doit décrire précisément l’image. Cette balise a pour but de remplacer l’image lorsque celle-ci ne s’affiche pas et est utile pour les utilisateurs qui utilisent des lecteurs d’écran (malvoyants par exemple) et pour les robots des moteurs de recherche.

‍

Suivre l’impact écologique du site web pendant son cycle de vie

Si le site a été éco-conçu, il est important de poursuivre cette démarche tout au long de son cycle de vie. 

‍

Cela passe notamment par : 

• le fait de conserver une limite d’images par page (6 images par exemple)
• optimiser toute nouvelle image ajoutée sur le site
• utiliser des formats .svg pour tout ce qui est logo, illustrations vectorielles et pictogrammes

‍

Pour finir :

Ça ne parait pas forcément grand chose comme ça, mais si vous optimisez bien toutes vos images, vous verrez une vraie différence sur la performance et la vitesse de chargement de votre site 🌠

👉 Et vous, vous optimisez déjà vos images pour votre site web ? Si non, plus d’excuse désormais pour s’y mettre. 😉

‍

Contenu Bonus

• Découvrir Squoosh App
• Comme il n'y a pas que les photos dans la vie, voici un outil pour optimiser vos images au format SVG (logo, illustration, favicon, picto) : SVGOMG
• Comment bien rédiger une balise alt

‍