Il y a des éléments sur ton site web qui ont plus ou moins d’impact sur ses performances. L’optimisation des images en est une. Et je vois beaucoup de sites web qui sous-estiment les conséquences des images sur l’affichage des pages.
Si de ton côté, tu souhaites accélérer le temps de chargement de ton site, il va falloir te pencher sur les bonnes pratiques à adopter pour optimiser ses images.
À noter que le poids des images n’influence pas seulement les performances de ton site. Travailler les images de ton site, c’est aussi un point essentiel pour le SEO et l’expérience utilisateur.
Avec cet article, tu vas saisir pourquoi l’optimisation des images est essentielle, mais aussi comment choisir le bon format d’image avec le bon type de fichier. Il est aussi important de savoir compresser ces images sans perdre en qualité avec des outils efficaces.
Nous ferons un focus sur l’optimisation (SEO) et l’analyse de la vitesse de ton site internet après le travail sur tes images.
Sommaire
TogglePourquoi l’optimisation des images est essentielle pour ton site web ?
Comme je l’ai évoqué dans cette introduction, les images et leur résolution ont un impact important sur la vitesse de ton site web. Personne n’aime attendre l’ouverture d’une page interminable…
Ce sont souvent les visuels des pages qui posent des soucis du côté du bon chargement. Ces éléments alourdissent les pages et prennent beaucoup d’espace dans la base de données des serveurs. Résultat : les pages apparaissent trop lentement sur le navigateur. Et toi, tu quittes le site web !
L’optimisation des images, c’est aussi un élément important si tu veux améliorer ta visibilité grâce au référencement naturel (SEO). Elles doivent aussi être au bon format pour favoriser une bonne expérience utilisateur que ce soit sur l’ordinateur ou sur la version mobile.
Maintenant que tu saisis l’importance du travail sur les images de ton site internet, passons au concret et à la pratique. Comment réussir à optimiser une image sur une page web ? Comment réduire la taille de celles-ci sans avoir une perte de qualité ?
Comment choisir le bon format d’image ?
La plupart des images sont proposées au format JPEG (JPG) ou format PNG. Ce sont d’ailleurs ces deux formats qui sont le plus souvent disponibles sur les sites de banque d’images gratuites comme Unsplash.
Alors que dois-tu privilégier sur ton site internet ?
Et bien, pas ceux-là !
À noter que tu peux retrouver d’autres formats :
- Le format svg. Celui-ci est utilisé par les graphistes qui travaillent sur Adobe Photoshop, principalement.
- Le format GIF utilisé pour les images animées.
Mais alors quels sont les formats à privilégier sur tes pages web ?
L’objectif de ces fichiers, c’est d’avoir une petite taille pour ne pas prendre beaucoup d’espace sur l’ensemble du site.
Pour ça, je te propose d’opter pour des formats alternatifs. Ils sont plus légers et surtout adaptés pour avoir un impact sur le référencement positif.
Il s’agit du format webp ou du format avif. Ces deux dernières solutions permettent d’alléger le poids de ton image pour le web. Pour ça, il faut le plus souvent utiliser un outil de conversion pour tes fichiers.
La première étape pour optimiser tes images : les dimensions
Si tu te lances dans la création de ton site web, je te recommande de te pencher sur ces bonnes pratiques pour ne pas ralentir l’affichage de tes pages sur les moteurs de recherche. Il va falloir observer la taille de tes visuels.
Plus la taille de ton image est grande, plus son poids est important. Et nous, on veut de la légèreté !
Sur le web, la taille des images s’exprimer en pixel. Il faut donc y prêter une attention importante pour obtenir un meilleur positionnement dans les recherches de Google. Tu peux te poser plusieurs questions :
-
- Où vas-tu déposer cette image sur ton site web ? En fonction de sa place, tu peux rendre ta photo plus ou moins petite.
- Que donne cette image sur ta version mobile ? N’oublie pas que ta photo doit s’adapter à tous les écrans.
Typiquement, si tu viens de télécharger une image via un site, il est possible que tu te retrouves avec de très larges dimensions (4500 x 3500). Ces larges dimensions assurent une grande qualité.
Avant de penser à la conversion via un changement de format de fichier, tu peux déjà la redimensionner en fonction de sa prochaine utilisation. C’est une façon intéressante d’optimiser l’espace de stockage du serveur web !
Tu peux commencer par diminuer celle-ci en conservant le même format (paysage ou portrait) pour conserver une grande qualité.
Si tu veux un format particulier pour le contenu de ta page, tu peux utiliser des outils complémentaires pour redimensionner correctement celles-ci avec Canva, par exemple.
Avant de passer à l’image suivante, tu peux consulter le poids de ton image en allant « lire les informations ». Note que cette taille de fichier va diminuer grâce à l’étape suivante : la conversion de ton élément.
La seconde étape : la conversion au bon format
Convertir ton fichier avant de l’importer sur ton site web
Ici, tu as plusieurs options pour améliorer la vitesse de chargement des pages. La meilleure solution est d’importer ton image dans ta médiathèque avec une version Webp ou Avif. Ces images pour le web sont les plus adaptées !
Pour ça, tu as plusieurs outils en ligne gratuits et populaires qui te permettent de déposer ton fichier jpg ou ton fichier png pour le transformer au bon format. Cette conversion aura pour effet immédiat de réduire au maximum le poids de ton image. Et c’est ici que tu remarques que certains visuels peuvent être particulièrement lourds.
Pour te donner un ordre d’idée, il vaut mieux avoir des visuels sous les 100 Ko. Je te laisse jeter un coup d’oeil dans la médiathèque de ton site et identifier les photos les plus lourdes. Elles sont parfois nombreuses !
Convertir ton fichier grâce à une extension sur WordPress
Tu peux aussi te retrouver dans une situation où tu as déjà beaucoup d’éléments dans ta médiathèque qui ne sont pas au bon format. Dans ce cas, il faut utiliser un outil conçu pour convertir les éléments existants. Ce processus se réalise avec des plugins si tu as ton site internet sur WordPress.
Contrairement à ma première option, il va falloir que tu télécharges sur ton site web une extension pour réaliser cette conversion.
Tu as plusieurs solutions :
Ces deux extensions ont une version gratuite.
Par contre, si tu as beaucoup de photos, il est fréquent que l’extension limite son activité à une partie de tes fichiers.
L’avantage de ces solutions c’est que celles-ci te permettent de réaliser une compression sans perte de tes photos. Elles vont donc agir sur le poids de tes images. Il est aussi possible de revoir le format du fichier selon tes besoins.
Une fois que cette réduction est réalisée, tu peux importer ton fichier et le télécharger sur ton site internet.
Enfin, avant de l’importer, je te conseille de terminer la lecture de cet article parce qu’il reste des éléments importants à travailler. Ces derniers t’aideront à travailler les autres avantages d’une bonne optimisation d’image : le SEO et l’expérience utilisateur.
Troisième étape : l’optimisation des autres éléments sur tes images
La balise ALT sur tes images
Promis ce n’est pas compliqué, même si le nom peut le laisser sous-entendre. Cette balise est là à l’origine pour les personnes malvoyantes. Pour les aider à saisir toutes les informations sur la page des moteurs de recherche puis de ton site, ils utilisent une voix off. Celle-ci vient lire le texte de ta page (titres et sous-titres). Elle peut aussi lire le texte alternatif contenu dans cette balise.
Ce texte alternatif est toujours utile de cette façon. Mais, c’est aussi une optimisation complémentaire pour Google. Il faut donc renseigner sur chaque image cette balise ALT. Je te conseille d’y glisser la requête visée à condition que cela soit cohérent. Si tu as une dizaine d’images sur ta page, tu peux varier le texte de ces attributs alt avec ton mot clé principal des mots clés secondaires.
Renommer les images : les éléments à connaître concernant le nom du fichier
Dans la liste des bonnes pratiques pour afficher correctement et rapidement tes pages, il est important de renommer tes images avant de les télécharger sur ton site internet.
Je te conseille ici d’intégrer le mot clé dans ce nom. Tu peux indiquer les mots qui composent le titre de ton image en les séparant par le tiret du 6. L’affichage de ce nom pour Google est une indication complémentaire pour identifier le sujet de ta page. C’est donc une chose à travailler et à vérifier avant de lancer la publication de ta page optimisée ou de ton article de blog.
Les outils pour vérifier la bonne optimisation des images
C’est intéressant de vérifier les optimisations mises en place. Pour ça, je te recommande d’utiliser Page Speed Insights. Celui-ci va te préciser si tes images sont bien téléchargées avec un format adapté.
Il t’indique automatiquement et gratuitement s’il existe des problèmes à prendre en charge si tu souhaites avoir un site web plus rapide. Je te recommande de l’enregistrer dans ton moteur de recherche comme Chrome sur Google pour y accéder facilement et être au courant afin de vérifier les performances globales de ton site web.
À côté de ces points sur la partie technique, il est recommandé d’installer une extension pour la mise en cache. Celle-ci va contribuer à diminuer le stockage de ton site pour le rendre plus rapide et donc plus performant. Il existe ici différents plugins.
Tu as du choix sur WordPress. Je te recommande sur ce CMS : WP-Optimize, Lite Speed Cache ou la solution payante, mais optimale : WP Rocket.
Avec tout ça, tu as un programme précis et complet pour optimiser tes photos. Ces actions t’aider à avoir des taux positifs du côté de la performance générale de ton site web..